@use '../utilities' as *;

.top-header {
    background: $secondary_black;
    padding: 5px 0;
}

.top-header .wrapper {
    @include flexBox ( center, space-between, row );
    flex-wrap: wrap;
}

// TOP HEADER MENU
.top-header .top-header-menu {

    @include flexBox (center, flex-start, row);

    .menu {
        @include flexBox ( center, center, row );
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        margin: 0;

        li {
            list-style: none;

            a {
                padding: 0 8px !important;
                font-size: .67rem;
                font-weight: 600;
                color: $secondary_white;
                display: block;
                text-decoration: none;
            }

            a:hover {
                color: $gray;
            }
        }
    }
}

// TOP HEADER SEARCH
.top-header .top-header-search .main-search-form .search-content {
    font-size: .85rem !important;
    width: 380px !important;
    max-width: 100% !important;
    border-radius: 30px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border: 1px solid $secondary_white !important;
    border-right: none !important;
    padding: 0 10px !important;
}

.top-header .top-header-search .main-search-form .search-btn {
    border-top-right-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
    border: 1px solid $secondary_white !important;
    border-left: none !important;
    background: none !important;
    line-height: 1.2 !important;
    @include flexBox(center, center, row);

    .search-icon {
        color: $secondary_white !important;
    }
}

// TOP HEADER SOCIAL
.top-header .social-icons-container {
    @include flexBox ( center, center, row );

    a {
        @include flexBox (center, center, row);
        margin-right: 5px;
        height: 26px;
        width: 26px;
        border: 2px solid $border_color;
        border-radius: 50%;
        background: transparent;
        text-align: center;
        font-size: .75rem;
        color: $secondary_white;
        transition: all .35s ease-in-out;

        &:hover {
            .facebook {
                color: $facebook;
            }

            .instagram {
                color: $instagram;
            }

            .twitter {
                color: $twitter;
            }
        }
    }
}

// TOP HEADER DATE
.date-container p {
    color: $secondary_white;
    margin: 0;
    font-size: .8rem;
    @include flexBox (center, center, row);
}

// MEDIA QUERIES
@media( max-width: 992px ) {
    .top-header .wrapper {
        @include flexBox (center, center, column);
    }

    .top-header .top-header-menu {
        order: 2;
    }

    .top-header .top-header-search {
        display: none;
    }

    .top-header .social-icons-container {
        margin-bottom: 8px;
    }

    .top-header .date-container {
        display: none;
    }
}