.section-switcher {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 0 calc(var(--page-gutter) - 1rem);
    border-block-start: 1px solid var(--rule);
    background: var(--ground);

    li { display: contents }

    :is(label, a) {
        position: relative;
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 0.25rem;
        min-block-size: 3.75rem;
        color: var(--ink-muted);
        font-size: var(--size-small);
        text-decoration: none;
        cursor: pointer;

        &:hover { background: var(--tint) }

        svg {
            inline-size: 1.25rem;
            block-size: 1.25rem;
        }
    }

    :is(:checked + label, a[aria-current="page"]) {
        color: var(--operator-accent);

        &::before {
            content: '';
            position: absolute;
            inset: 0 1.375rem auto;
            block-size: 0.125rem;
            background: currentColor;
        }
    }
}