.Header {
    &-globalSearch {
        background: #fff;
        box-shadow: 0 10px 15px -10px rgb(0 0 0 / 20%);
        color: $body-color;
        font-size: 1rem;
        left: 0;
        position: absolute;
        right: 0;
        top: $header-height;
        width: 100%;
        z-index: 999;

        .Select-control {
            border: none;
            border-radius: 0;
            font-size: 1.4rem;
            margin: 15px $viewport-padding-lg;
            width: auto;

            &:hover {
                box-shadow: none;
            }

            @media (max-width: $viewport-lg) {
                margin: 15px $viewport-padding;
            }
        }

        .Select-menu-outer {
            border-left: none;
            border-radius: 0;
            border-right: none;
            padding: 20px $viewport-padding;
            top: auto;

            .Select-menu {
                margin: auto;
            }

            .noresults-text {
                padding: 0;
            }

            @media (min-width: $viewport-lg) {
                padding-left: $viewport-padding-lg;
                padding-right: $viewport-padding-lg;
            }
        }

        .closeSearchButton {
            cursor: pointer;
            position: absolute;
            right: $viewport-padding-lg;
            top: calc(50% - 8px);

            @media (max-width: $viewport-lg) {
                right: $viewport-padding;
            }
        }

        .GlobalSearchResults-search {
            display: none;
        }
    }

    &-closeOverlay {
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: $header-height;
    }
}

.globalSearchIcon {
    .Icons-search {
        fill: var(--white);
    }

    &.active .Icons-search {
        fill: $grey_600;
    }
}