@import "./top-header";
@import "./bottom-header";
@import "./navigation/navigation";
@import "canvas-menu";

header {
    &.site-header {
        background-color: $bg-color;
        @include transition(all 500ms ease);
        .search-toggle {
            position: relative;

            a {
                @include display-flex(flex);
                @include justify-content-center;
                @include align-items-center;
                @include flex-direction-column(column);
                color: $body-color;
                width: 38px;
                height: 38px;
                @include radius(100%);
                border: 1px solid $border-color;
                color: $body-color;
                background-color: $white-color;
                @include transition(all .5s ease-in-out);

                i {
                    font-size: .875rem;
                }

                &:hover {
                    background-color: $secondary-color;
                    color: $white-color;
                }
            }

            .searchform {
                opacity: 0;
                visibility: hidden;
                position: absolute;
                top: 150%;
                right: 0;
                width: 0;
                @include transition(all .5s ease-in-out);
                z-index: -1;
                background: $white-color;
                padding: 10px 15px 10px;
                box-shadow: 0 0 6px #00000036;
                @include radius(5px);

            }

            &.show {
                .searchform {
                    visibility: visible;
                    opacity: 1;
                    width: 100%;
                    top: 100%;
                    z-index: 999;
                    min-width: 280px;
                }
            }
        }
        &.fixed-header {
            .bottom-header{
                position: fixed;
                
                left: 0px;
                top: 0;
                width: 100%;
                z-index: 1;
                background-color: $white-color;
            -ms-animation-name: fadeInDown;
                -moz-animation-name: fadeInDown;
                -op-animation-name: fadeInDown;
                -webkit-animation-name: fadeInDown;
                animation-name: fadeInDown;
                @include transition(all 500ms ease);
                animation-duration: 500ms;
                -ms-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
                -op-animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
                -ms-animation-iteration-count: 1;
                -moz-animation-iteration-count: 1;
                -op-animation-iteration-count: 1;
                -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1; 
            }
        }
    }
}

@media #{$breakpoint-lg} {
    .Is-toggle {
        .site-header {
            .main-navigation {
                right: 0;
            }
        }
    }
}