/* stylelint-disable selector-no-id, max-nesting-depth */
@import '../styles/functions.scss';
@import '../styles/variables.scss';
@import '~@orchard/frontend-react-components/src/scss/variables';
@import '~@orchard/frontend-react-components/src/scss/theme';
@import '~@orchard/frontend-react-components/src/scss/utils';
@import '../components/header/app-switcher/app-switcher';

#header {
    @import '~@orchard/frontend-react-components/src/scss/react-select';
    @import '~@orchard/frontend-react-components/src/icon-components/close/close';
    @import '~@orchard/frontend-react-components/src/icon-components/search/search';
    @import '~@orchard/frontend-react-components/src/icon-components/video/video';
    @import '~@orchard/frontend-react-components/src/icon-components/physical-audio/physical-audio';
    @import '~@orchard/frontend-react-components/src/icon-components/digital-audio/digital-audio';
    @import '~@orchard/frontend-react-components/src/legacy-components/select-input/select-input';
    @import '../components/global-search/global-search';
    @import '../components/global-search/search-results/search-results';
    @import '../components/global-search/search-result-option';
    @import '../components/global-search/search-loading-indicator';
    @import '../components/header/header-global-search/header-global-search';

    > .container {
        padding: 0 $viewport-padding;
        width: auto;

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

        > .row {
            margin: auto;
        }
    }

    #app_switcher_app {
        float: left;
        margin-top: 12px;
    }

    #global_search_app {
        float: left;
        height: $header-height;
        margin-left: -20px;
        width: 46px;

        .Header-globalSearch {
            font-size: 1.2rem;
            left: -$viewport-padding;
            right: -$viewport-padding;
            text-align: left;
            width: auto;

            .closeSearchButton {
                right: $viewport-padding * 2;

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

            .Select-control {
                font-size: 1.6rem;
            }

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

        .globalSearchIcon {
            cursor: pointer;
            padding: $nav-item-padding;
            user-select: none;
        }
    }
}