.options-scroller { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; --horizontal-padding: 15px; border-radius: var(--scroller-radius); } .options-title { background-color: var(--main-theme-color); color: var(--header-text-color); margin: 0; padding: 10px var(--horizontal-padding); font-weight: bold; font-size: 1.4rem; border-bottom: 1px solid var(--off-black); transition: all 300ms ease-in-out; transition-property: background-color, color; } .original-image .options-title { background-color: var(--black); color: var(--white); } .option-text-first { display: grid; align-items: center; grid-template-columns: 87px 1fr; gap: 0.7em; padding: 10px var(--horizontal-padding); } .option-toggle { cursor: pointer; display: grid; align-items: center; grid-template-columns: 1fr auto; gap: 0.7em; padding: 10px var(--horizontal-padding); } .option-reveal { composes: option-toggle; grid-template-columns: auto 1fr; gap: 1em; } .option-one-cell { display: grid; grid-template-columns: 1fr; padding: 10px var(--horizontal-padding); } .section-enabler { composes: option-toggle; background: var(--dark-gray); padding: 15px var(--horizontal-padding); border-bottom: 1px solid var(--off-black); } .options-section { background: var(--off-black); } .text-field { background: var(--white); color: var(--black); font: inherit; border: none; padding: 6px 0 6px 10px; width: 100%; box-sizing: border-box; border-radius: 4px; }