@import '@/assets/scss/variables';
@import '@/assets/scss/partial';

.header{
    background-color: $primary;
    padding: 15px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    height: 64px;
    @media (min-width: $xsm) {
          height: 70px;
    }
    @media (min-width: $lg) {
        padding: 20px 0 20px;
        background-color: $white;
        height: auto;
    }
    @media (min-width: $xxxl) {
        padding: 30px 0 20px;
    }
    .headerWrapper{
        @media (min-width: $lg) {
            padding: 20px 20px;
            border-radius: 87px;
            background-color: $primary;
        }
        @media (min-width: $xxxl) {
            padding: 30px 20px;
        }
        .headerLogo{
            img{
                max-width: 95px;
                @media (min-width: $xsm) {
                    max-width: 130px;
                }
                @media (min-width: $xl) {
                    max-width: 150px;
                }
                @media (min-width: $xxxl) {
                    max-width: 171px;
                }
            }
        }
        .navList{
            position: fixed;
            top: 64px;
            left: -100%;
            height: calc(100vh - 64px);
            width: 100%;
            background: $primary;
            overflow-y: auto;
            transition: all 0.4s;
            z-index: 9;
            border-top: 1px solid $greyC9;
            @media (min-width: $xsm){
                top: 70px;
                height: calc(100vh - 70px);
            }
            @media (min-width: $lg) {
                position: initial;
                top: unset;
                left: unset;
                height: auto;
                background-color: transparent;
                overflow: unset;
                z-index: auto;
                border: none;
                width: auto;
            }
            .navMenu{
                gap: 40px;
                @media (min-width: $xxxl) {
                    gap: 54px;
                }
                li{
                    a{
                        font-size: 16px;
                        line-height: 1.44;
                        font-weight: 500;
                        color: $white;
                        display: block;
                        position: relative;
                        padding: 10px 20px;
                        border-bottom: 1px solid $greyC9;
                        @media (min-width: $lg) {
                            border-bottom: none;
                            padding: 0;
                        }
                        @media (min-width: $xxxl) {
                            font-size: 20px;
                        }
                        &::after{
                            content: '';
                            position: absolute;
                            width: 0;
                            height: 1px;
                            background-color: $white;
                            left: 0;
                            top: 100%;
                            transition: 0.3s ease-in-out;
                            display: none;
                            @media (min-width: $lg) {
                                display: block;
                            }
                        }
                        &:hover{
                            color: $black;
                            @media (min-width: $lg) {
                                color: $white;
                            }
                            &::after{
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
    }
}