@layer components {
    /* Search */
    .search-container {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--space-8);
        padding: var(--space-4);
        border: var(--border-width-hairline) solid var(--color-brand-primary);
        border-radius: var(--radius-corner);
        background-color: var(--color-bg-surface);
    }

    .search-container>div:nth-child(2) {
        width: 100%;
    }

    .search-container__field {
        position: relative;
        display: flex;
        align-items: center;
    }

    .search-container__field input {
        all: unset;
        z-index: 1;
        width: 100%;
        padding-right: calc(var(--space-32) + var(--space-48));
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    .search-clear-button {
        position: absolute;
        right: var(--space-40);
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--space-32);
        height: var(--space-32);
        padding: 0;
        border: 0;
        border-radius: var(--radius-round);
        background: transparent;
        color: var(--color-text-faint);
        cursor: pointer;
    }

    .search-clear-button[hidden] {
        display: none;
    }

    .search-clear-button:hover,
    .search-clear-button:focus-visible {
        outline: none;
        background: var(--color-control-bg);
        color: var(--color-dropdown-text);
    }

    .search-clear-button .svg-sprite {
        position: static;
        display: block;
        width: var(--space-14);
        height: var(--space-14);
        fill: currentColor;
    }

    [data-search-filter-menu][hidden],
    .dropdown-menu[hidden] {
        display: none;
    }

    .search-container-toggle [data-search-filter-menu],
    .mobile-drawer-search__toggle [data-search-filter-menu] {
        left: 0;
        right: auto;
        color: var(--color-dropdown-text);
        font-weight: var(--font-weight-extrabold);
    }

    .search-container-toggle [data-search-filter-menu] .search-filter-option,
    .mobile-drawer-search__toggle [data-search-filter-menu] .search-filter-option {
        color: var(--color-neutral-700, var(--color-text-header-control-soft));
        line-height: var(--leading-none);
    }

    .search-filter-check {
        position: static;
        display: block;
        width: var(--space-14);
        height: var(--space-14);
        opacity: 0;
        fill: currentColor;
    }

    .search-filter-option[data-selected="true"] .search-filter-check {
        opacity: 1;
    }

    .search-filter-option:hover,
    .search-filter-option:focus-visible,
    .search-filter-option[data-selected="true"] {
        outline: none;
        background: var(--color-control-bg);
        color: var(--color-dropdown-text);
    }

    .search-container .search {
        position: absolute;
        right: 0;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        margin-right: var(--space-4);
        padding: var(--space-12);
        color: var(--color-brand-primary);
        line-height: var(--leading-none);

        &:hover {
            border-radius: var(--radius-corner);
            background-color: var(--color-bg-surface-alt);
            color: var(--color-ui-contrast);
        }
    }

    .search-container .search .svg-sprite {
        position: static;
        display: block;
        overflow: visible;
        flex: 0 0 auto;
        width: var(--space-18);
        height: var(--space-18);
        pointer-events: none;
        fill: currentColor;
    }



    /* Search filter category colors */
    .search-filter-option--news {
        --search-filter-accent: var(--color-content-news);
    }

    .search-filter-option--reviews {
        --search-filter-accent: var(--color-content-review);
    }

    .search-filter-option--features {
        --search-filter-accent: var(--color-content-article);
    }

    .search-filter-option--videos {
        --search-filter-accent: var(--color-content-video);
    }

    .search-filter-option--games {
        --search-filter-accent: var(--color-text-strong);
    }

    [data-search-filter-menu] .search-filter-option,
    [data-search-filter-menu] .search-filter-option:hover,
    [data-search-filter-menu] .search-filter-option:focus-visible,
    [data-search-filter-menu] .search-filter-option[data-selected="true"] {
        color: var(--search-filter-accent, var(--color-text-strong));
    }

    :root[data-theme="dark"] [data-search-filter-menu] .search-filter-option,
    :root[data-theme="dark"] [data-search-filter-menu] .search-filter-option:hover,
    :root[data-theme="dark"] [data-search-filter-menu] .search-filter-option:focus-visible,
    :root[data-theme="dark"] [data-search-filter-menu] .search-filter-option[data-selected="true"] {
        color: var(--color-white);
    }

    :root[data-theme="dark"] .search-filter-option:hover,
    :root[data-theme="dark"] .search-filter-option:focus-visible,
    :root[data-theme="dark"] .search-filter-option[data-selected="true"] {
        background: var(--color-control-hover-bg);
    }
}

@layer utilities {
    .search-container-toggle .angle-down::after {
        padding: 0;
    }

    .search-container-toggle .angle-up::after {
        padding: 0;
    }

    .search-container .search:hover {
        border-radius: var(--radius-corner);
    }
}