@layer components {


    /* Long-press process switcher sheet above the nav bar. */
    .env-shell-navbar__switcher {
        --navbar-switcher-background: light-dark(color-mix(in oklch, #f2f2f7 96%, transparent), color-mix(in oklch, #1c1c1e 96%, transparent));

        position: fixed;
        inset-inline: 0.75rem;
        /*inset-block-end: calc(100% + 0.4rem);*/
        inset-block-end: 4rem;
        z-index: 5;
        max-block-size: min(50dvb, 20rem);
        overflow: auto;
        padding: 0.35rem;
        border-radius: 0.85rem;
        background: var(--navbar-switcher-background);
        color: contrast-color(var(--navbar-switcher-background));
        --icon-color: contrast-color(var(--navbar-switcher-background));
        border: 1px solid light-dark(color-mix(in oklch, #fff 12%, transparent), color-mix(in oklch, #1c1c1e 12%, transparent));
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        
        inline-size: calc(100cqi - 1rem);
        place-self: center;
    }

    .env-shell-navbar__switcher[hidden] {
        display: none !important;
    }

    .env-shell-navbar__switcher-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .env-shell-navbar__switcher-empty {
        padding: 0.75rem 0.85rem;
        font: 400 0.8125rem/1.3 system-ui, sans-serif;
        opacity: 0.72;
        text-align: center;
    }

    .env-shell-navbar__switcher-row {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0.2rem;
    }

    .env-shell-navbar__switcher-item {
        appearance: none;
        display: flex;
        flex: 1 1 auto;
        flex-direction: row;
        align-items: center;
        gap: 0.65rem;
        min-inline-size: 0;
        margin: 0;
        padding: 0.65rem 0.75rem;
        border: 0;
        border-radius: 0.65rem;
        background: transparent;
        color: inherit;
        font: 500 0.875rem/1.25 system-ui, sans-serif;
        text-align: start;
        cursor: pointer;
    }

    .env-shell-navbar__switcher-label {
        flex: 1 1 auto;
        min-inline-size: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .env-shell-navbar__switcher-item:hover,
    .env-shell-navbar__switcher-item:focus-visible {
        outline: none;
        background: light-dark(color-mix(in oklch, #fff 10%, transparent), color-mix(in oklch, #1c1c1e 10%, transparent));
    }

    .env-shell-navbar__switcher-item[data-active] {
        background: light-dark(color-mix(in oklch, #60cdff 18%, transparent), color-mix(in oklch, #60cdff 18%, transparent));
    }

    .env-shell-navbar__switcher-item[data-minimized] {
        opacity: 0.78;
    }

    .env-shell-navbar__switcher-item ui-icon {
        flex: 0 0 auto;
        --icon-size: 1.25rem;
        inline-size: 1.25rem;
        block-size: 1.25rem;
    }

    .env-shell-navbar__switcher-close {
        appearance: none;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        inline-size: 2.5rem;
        min-inline-size: 2.5rem;
        border: 0;
        border-radius: 0.65rem;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

    .env-shell-navbar__switcher-close:hover,
    .env-shell-navbar__switcher-close:focus-visible {
        outline: none;
        background: light-dark(color-mix(in oklch, #ff6b6b 22%, transparent), color-mix(in oklch, #ff6b6b 22%, transparent));
        color: #ffb4b4;
    }

    .env-shell-navbar__switcher-close ui-icon {
        --icon-size: 1.1rem;
        inline-size: 1.1rem;
        block-size: 1.1rem;
    }
}