main { grid-row: 1; grid-column: 1; position: relative; display: flex; min-height: 0; &::before, &::after { content: ""; position: absolute; left: 0; right: 0; z-index: 10; pointer-events: none; } &::before { top: 0; height: var(--main-padding); background-image: linear-gradient( to top, transparent, var(--background-color) ); } &::after { bottom: 0; height: var(--main-padding); background-image: linear-gradient( to bottom, transparent, var(--background-color) ); } html[data-layout="full"] & { width: 100% !important; } html[data-layout="split"] & { min-width: 100%; max-width: var(--max-main-width); overflow-x: hidden; } > nav, > search { flex: 1; overflow-x: hidden; overflow-y: auto; padding: var(--main-padding); height: 100%; display: flex; flex-direction: column; padding-bottom: 12rem; } } #resize-bar { display: none; grid-column: 1; grid-row: 1 / -1; justify-self: end; width: 8px; margin: 0 -4px; z-index: 50; position: relative; cursor: col-resize; touch-action: none; &::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; translate: -50% 0; background: transparent; transition: background 0.15s; } &:hover { background: var(--border-color); &::after { background: var(--color); } } html[data-resize] &::after { background: var(--color); } html[data-layout="split"] & { display: block; } } footer { grid-row: 2; grid-column: 1 / -1; position: relative; z-index: 2; min-width: 0; overflow: hidden; text-transform: uppercase; padding-bottom: var(--main-padding); html[data-layout="split"] & { grid-column: 1; } &::before, &::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--main-padding); z-index: 1; pointer-events: none; } &::before { left: 0; background-image: linear-gradient( to left, transparent, var(--background-color) ); } &::after { right: 0; background-image: linear-gradient( to right, transparent, var(--background-color) ); } > fieldset { display: flex; gap: 1.125rem; overflow-x: auto; scrollbar-width: thin; min-width: 0; margin: -0.5rem 0; padding: 0.5rem var(--main-padding); pointer-events: auto; > label, > button { flex-shrink: 0; } > button { color: var(--off-color); } } }