@layer components {
    .settings {
        --settings-spacer: var(--block-space);
        --settings-item-padding-inline: 0.5ch;

        display: grid;
        gap: calc(var(--settings-spacer) * 2);
        margin: 0 auto;
        max-inline-size: min(100ch, 100%);

        @media (min-width: 960px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* Sections & Panels
  /* -------------------------------------------------------------------------- */

    .settings__panel {
        --panel-size: 100%;
        --panel-padding: calc(var(--settings-spacer) / 1);

        display: flex;
        flex-direction: column;
        gap: var(--panel-padding);
        min-block-size: 100%;
        min-inline-size: 0;

        @media (min-width: 640px) {
            --panel-padding: calc(var(--settings-spacer) * 2);
        }
    }

    .settings__panel--users {
        @media (min-width: 640px) {
            max-height: 80dvh;
        }

        @media (min-width: 960px) {
            max-height: calc(100dvh - 12rem);
        }
    }

    .settings__section {
        h2 {
            font-size: var(--text-large);
        }

        >*+* {
            margin-block-start: calc(var(--panel-padding) / 2);
        }

        &:is(:first-child):has(h2) {
            margin-top: -0.33lh;
            /* Align h2 letters caps with panel padding */
        }
    }

    /* Users
  /* ------------------------------------------------------------------------ */

    .settings__user-filter {
        --btn-size: 3.5ch;
        --avatar-size: var(--btn-size);

        display: flex;
        flex-direction: column;
        gap: calc(var(--settings-spacer) / 2);
        min-height: 0;
    }

    .settings__user-filter--bg {
        background-color: var(--color-ink-lightest);
        border-radius: 0.5em;
        margin-block: 0;
        padding: var(--settings-spacer);
    }

    .settings__user-list {
        flex: 1 1 auto;
        list-style: none;
        margin: calc(var(--settings-spacer) / -4) calc(-1 * var(--settings-item-padding-inline));
        padding: 0;
        overflow: auto;

        li {
            border-radius: 0.5em;

            /* Add padding if it's not already on a link within */
            &:not(:has(a:first-child)) {
                padding-inline-end: var(--settings-item-padding-inline);
            }

            &:not(:has(a:last-child)) {
                padding-inline-end: var(--settings-item-padding-inline);
            }
        }

        a {
            padding: calc(var(--settings-spacer) / 4) var(--settings-item-padding-inline);

            @media(any-hover: hover) {
                &:hover {
                    text-decoration: underline;
                }
            }
        }

        /* Only add a BG color when you can actually navigate */
        .settings__user-filter:focus-within & {
            [aria-selected] {
                background: var(--color-selected);
            }
        }
    }

    .settings__user-list-tips {
        border-top: 1px solid var(--color-ink-light);
        color: var(--color-ink-dark);
        font-size: var(--text-small);
        padding-block-start: var(--settings-spacer);

        .settings__user-filter--bg & {
            margin-inline: calc(-1 * var(--settings-spacer));
            padding-inline: var(--settings-spacer);
        }
    }
}