@layer components {

    .navigation-section--label {
        color: var(--color-dropdown-text);
        font-weight: var(--font-weight-extrabold);
    }

    .navigation-theme__title,
    .navigation-section--label,
    .listing-layout-slider__title {
        font-weight: var(--font-weight-semibold);
        line-height: var(--leading-title);
    }

    .navigation-theme-button__track {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: var(--space-4);
        width: 6.25rem;
        height: var(--space-32);
        padding: 0.1875rem;
        border: var(--border-width-hairline) solid var(--color-neutral-300);
        border-radius: var(--radius-round);
        background: var(--color-control-bg);
        transition: background-color .2s ease, border-color .2s ease;
    }

    .navigation-theme-button:hover .navigation-theme-button__track,
    .navigation-theme-button:focus-visible .navigation-theme-button__track {
        background: var(--color-control-hover-bg);
    }

    .navigation-theme-button__option {
        position: relative;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.8125rem;
        height: var(--space-26);
        color: var(--color-neutral-700, currentColor);
    }

    .navigation-theme-button__thumb {
        position: absolute;
        top: 0.1875rem;
        left: 0.1875rem;
        z-index: 1;
        width: 1.8125rem;
        height: var(--space-26);
        border-radius: var(--radius-round);
        background: var(--color-dropdown-bg);
        box-shadow: 0 var(--space-2) var(--space-8) color-mix(in oklch, var(--color-black) 14%, transparent);
        transition: transform .2s ease;
    }

    html[data-theme="dark"] .navigation-theme-button__thumb {
        transform: translateX(2rem);
    }

    html[data-theme-preference="system"] .navigation-theme-button__thumb {
        transform: translateX(4rem);
    }

    html[data-theme="light"] .navigation-theme-button__option--sun,
    html[data-theme="dark"] .navigation-theme-button__option--moon {
        color: var(--color-dropdown-text);
    }

    html[data-theme-preference="system"] .navigation-theme-button__option--system {
        color: var(--color-dropdown-text);
    }

    html[data-theme="light"] .navigation-theme-button__option--moon,
    html[data-theme="dark"] .navigation-theme-button__option--sun {
        color: var(--color-neutral-500, currentColor);
    }

    html[data-theme-preference="system"] .navigation-theme-button__option--sun,
    html[data-theme-preference="system"] .navigation-theme-button__option--moon {
        color: var(--color-neutral-500, currentColor);
    }

    .navigation-theme {
        @media (max-width: 768px) {
            margin-inline: var(--space-20);
        }
    }

    .navigation-section {
        justify-content: space-between;
        padding: var(--space-14) var(--space-16);
        border: var(--border-width-hairline) solid var(--color-ink-alpha-08);
        border-radius: var(--radius-corner);
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: var(--space-12);
        width: auto;
        height: auto;

        @media (max-width: 768px) {
            gap: var(--space-12);
        }
    }

    .navigation-section--panel {
        width: 100%;
        min-height: 2.75rem;
        padding: var(--space-6) 0;
        border: 0;
        border-radius: var(--radius-corner);
        background: transparent;
        box-shadow: none;
        transition: background-color .2s ease;
    
        @media (max-width: 768px) {
            padding: var(--space-6) 0;
        }

        &:hover,
        &:focus-visible {
            outline: none;
            background: transparent;
        }
    }

    .navigation-section--copy {
        display: grid;
        flex-direction: column;
        gap: var(--space-2);
        min-width: 0;
        text-align: left;
    }

    .navigation-section--text {
        color: var(--color-text-header-control-soft);
        font-size: var(--text-sm);
        line-height: var(--leading-ui);
    }

    .navigation-theme-button__svg,
    .u-menu__chevron,
    .u-menu__check,
    .navigation-theme-select__chevron,
    .navigation-theme-select__check,
    .listing-layout-select-menu__check,
    .listing-layout-switch__icon,
    .listing-layout-slider__value-icon {
        position: static;
        display: block;
        overflow: visible;
        flex: 0 0 auto;
        width: 1em;
        height: 1em;
        fill: currentColor;
    }

    .listing-layout-switch__icon {
        fill: none;
        stroke: currentColor;
    }

    .u-menu,
    .navigation-select,
    .navigation-theme-select,
    .navigation-language-select {
        position: relative;
        display: inline-flex;
        justify-content: flex-end;
        min-width: 0;
    }

    .u-menu__toggle,
    .navigation-theme-select__toggle,
    .search-container-toggle {
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-10);
        min-width: 9.75rem;
        min-height: var(--space-36);
        padding: 0 var(--space-12);
        border: var(--border-width-hairline) solid var(--color-ink-alpha-08);
        border-radius: var(--radius-round);
        color: var(--color-dropdown-text);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-extrabold);
        line-height: var(--leading-none);
        cursor: pointer;
        transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
    }

    .search-container-toggle span[data-search-filter-label] {
        display: inline-flex;
        align-items: center;
        flex: 1 1 auto;
        gap: var(--space-10);
        min-width: 0;
        width: auto;
        font-weight: inherit;
        cursor: inherit;
    }

    .mobile-drawer-search__toggle span[data-search-filter-label] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .u-menu__chevron,
    .navigation-theme-select__chevron {
        transition: transform .2s ease;
    }

    .u-menu__toggle[aria-expanded="true"] .u-menu__chevron,
    .select-toggle[aria-expanded="true"] .navigation-theme-select__chevron,
    .navigation-theme-select__toggle[aria-expanded="true"] .navigation-theme-select__chevron {
        transform: rotate(180deg);
    }

    .u-menu__toggle>span,
    .select-toggle>span,
    .navigation-theme-select__toggle>span,
    .listing-layout-slider__value>span {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
    }

    .u-menu__chevron,
    .navigation-theme-select__chevron,
    .listing-layout-slider__value-icon {
        margin-left: auto;
    }

    .listing-layout-slider__value-icon {
        transition: transform .2s ease;
    }

    .listing-layout-slider__value[aria-expanded="true"] .listing-layout-slider__value-icon {
        transform: rotate(180deg);
    }

    .u-menu__panel,
    .navigation-select--menu,
    .navigation-theme-select__menu,
    .navigation-language-select__menu,
    .listing-layout-select-menu {
        position: absolute;
        top: calc(100% + var(--space-6));
        right: 0;
        z-index: 20;
        display: grid;
        gap: var(--space-2);
        min-width: 13.5rem;
        max-width: min(18rem, calc(100vw - var(--space-32)));
        padding: var(--space-8);
        border: var(--border-width-hairline) solid var(--color-ink-alpha-08);
        border-radius: var(--radius-corner);
        background: var(--color-dropdown-bg);
        box-shadow: 0 0.75rem 1.75rem var(--color-dropdown-shadow);
    }

    .u-menu__panel[hidden],
    .navigation-select--menu[hidden],
    .navigation-theme-select__menu[hidden],
    .navigation-language-select__menu[hidden],
    .listing-layout-select-menu[hidden] {
        display: none;
    }

    .u-menu__option,
    .navigation-select--menu__option,
    .navigation-theme-select__option,
    .listing-layout-select-menu__option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-12);
        width: 100%;
        min-height: var(--space-38);
        padding: 0 var(--space-10);
        border: 0;
        border-radius: var(--radius-corner);
        background: transparent;
        color: var(--color-neutral-700);
        font: inherit;
        font-size: var(--text-sm);
        font-weight: var(--font-weight-extrabold);
        text-align: left;
        cursor: pointer;
    }

    .u-menu__option:hover,
    .u-menu__option:focus-visible,
    .u-menu__option[data-selected="true"],
    .navigation-select--menu__option:hover,
    .navigation-select--menu__option:focus-visible,
    .navigation-select--menu__option[data-selected="true"],
    .navigation-theme-select__option:hover,
    .navigation-theme-select__option:focus-visible,
    .navigation-theme-select__option[data-selected="true"],
    .listing-layout-select-menu__option:hover,
    .listing-layout-select-menu__option:focus-visible,
    .listing-layout-select-menu__option[data-selected="true"] {
        outline: none;
        background: var(--color-control-bg);
        color: var(--color-dropdown-text);
    }

    .u-menu__label,
    .listing-layout-select-menu__label {
        display: inline-flex;
        align-items: center;
        gap: var(--space-8);
        min-width: 0;
    }

    .u-menu__check,
    .navigation-theme-select__check {
        width: var(--space-14);
        height: var(--space-14);
        opacity: 0;
    }

    .u-menu__option[data-selected="true"] .u-menu__check,
    .navigation-theme-select__option[data-selected="true"] .navigation-theme-select__check {
        opacity: 1;
    }
}