@import 'variables';
@import 'mixin';

body.noscroll {

    overflow: hidden;

}

header.header {

    // position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    height: $headerHeightDesktop;
    display: flex;
    align-items: center;
    background-color: #fff;
    z-index: 150;

    @include box-shadow(0px 0px 5px 0px rgba(155, 155, 155, 0.2));

    @media (max-width: 1199px) {
        
        height: $headerHeightMobile;
        
    }

    .container {

        max-width: unset;

    }
    
    .header__desktop {

        height: $headerHeightDesktop;

        display: flex;
        align-items: center;
        padding: 0 55px;

        @media (max-width: 1199px) {

            display: none;

        }

        .header__desktop__logo {

            display: inline-block;
    
            a {
    
                display: inline-block;
                width: 188px;
    
            }

        }

        .header__desktop__nav {

            display: flex;
            opacity: 1;
            margin-left: auto;
            visibility: visible;
            align-items: center;
            justify-content: flex-end;
            background: transparent;
            
            @include transition(all, .5s, ease-in-out);

            .header__desktop__nav__list {

                position: relative;
                list-style: none;
                right: auto;
                width: auto;
                height: auto;
                display: inline-block;
                padding: 0px;
                margin: 0px;
                
                @include transition(all, .5s, ease-in-out);

                .header__desktop__nav__list__item {

                    text-align: center;
                    padding: 15px;
                    display: inline-block;
                    border-bottom-style: none;
                    position: relative;
                    cursor: pointer;

                    a {
                        
                        position: relative;
                        display: inline-block;
                        text-decoration: none;
                        font-size: 20px;
                        line-height: 18px;
                        color: $black;
                        font-weight: 500;

                        &::after {
                            
                            position: absolute;
                            content: '';
                            display: block;
                            height: 2px;
                            width: 0px;
                            left: 0;
                            bottom: -5px;
                            background-color: $black;
                            @include transition(all, .3s, ease-in-out);

                        }
                
                        &:hover,
                        &:focus {

                            opacity: .9;
                            &::after {
                                
                                width: 100%;
                            
                            }
                
                        }

                    }

                }

            }

        }

    }

    .header__mobile {

        
        display: none;

        @media (max-width: 1199px) {

            display: flex;
            justify-content: center;
            align-items: center;
            height: $headerHeightMobile;
            
        }

        .header__mobile__logo {

            display: inline-block;
            margin-right: auto;

            a {

                img {

                    height: 40px;
                    width: auto;

                }

            }

        }

        .header__mobile__burger-menu {

            width: 35px;
            height: 24px;
            position: relative;    
            z-index: 100;
            float: right;

            @include rotate(0deg);
            @include transition(all, .5s, ease-in-out);

            cursor: pointer;

            span  {

                display: block;
                position: absolute;
                height: 4px;
                width: 100%;
                background: $black;
                left: 0;

                @include border-radius(10px);
                @include rotate(0deg);
                @include transition(all, .25s, ease-in-out);

                &:nth-child(1) {

                    top: 0px;

                }

                &:nth-child(2),
                &:nth-child(3) {

                    top: 10px;

                }

                &:nth-child(4) {

                    top: 20px;

                }

            }

            &.header__mobile__burger-menu--open {

                span {

                    &:nth-child(1) {

                        top: 18px;
                        width: 0%;
                        left: 50%;

                    }

                    &:nth-child(2) {

                        @include rotate(45deg);

                    }

                    &:nth-child(3) {

                        @include rotate(-45deg);

                    }

                    &:nth-child(4) {

                        top: 18px;
                        width: 0%;
                        left: 50%;

                    }

                }

            }

        }

        .header__mobile__nav {

            position: fixed;
            top: 0;
            right: 0;
            background: rgba(0, 0, 0, .3);
            opacity: 0;
            visibility: hidden;
            height: 100%;
            width: 100%;
            z-index: 90;
            
            @include transition(all, .5s, ease-in-out);
                
            .header__mobile__nav__list {

                list-style: none;
                position: fixed;
                display: block;
                background-color: #ffffff;
                top: 0;
                right: 0;
                width: 100%;
                height: 100%;
                max-width: 100%;
                padding: 50px 0px 0px 0px;
                margin: 0px;
                overflow: scroll;

                @include box-shadow(2px 0px 20px 0px rgba(0,0,0,0.3));
                @include transition(all, .5s, ease-in-out);
    
                .header__mobile__nav__list__item {

                    padding-left: 40px;

                    &:last-of-type {

                        padding-bottom: 30px;
                        
                    }

                    span {
                        
                        font-size: 12px;
                        text-transform: uppercase;
                        color: $gray;

                    }

                    a {
                        
                        position: relative;
                        display: inline-block;
                        text-decoration: none;
                        font-size: 18px;
                        text-transform: none;
                        color: $black;
                        font-weight: 500;
                        padding: 10px 0;
    
                    }

                }

                .header__mobile__nav__list__divider {

                    padding: 15px;

                }

            }

            &.header__mobile__nav--open {

                opacity: 1;
                visibility: visible;
        
            }

        }

    }

}