///////////////////////
// HEADER 
////
// all styles related to the header
//


html 
    scroll-padding-top: $sticky-header-height + 50px

header
    height: $normal-header-height
    width: 100%
    position: absolute
    z-index: 5
    top: 0
    transform: translateY(0px)
    /*****************/
    /** Sticky menu **/
    /*****************/
    &.sticky
        position: fixed
        background-color: #000
        height: $sticky-header-height
        top: -150px
        transition: transform 0.5s
        transform: translateY(150px)
        padding-top: 10px
        padding-bottom: 10px
    /*************/
    /** Toolbar **/
    /*************/
    .toolbar
        flex-basis: 100%
        height: 44px
        .container 
            display: flex 
            align-items: center
        svg
            height: 24px
    .header-main-content
        display: flex
        justify-content: space-between
        align-items: center
        .menu-logo
        nav 
            /**********************/
            /** Hamburger Button **/
            /**********************/
            button.menu-toggle
                padding: 20px
                cursor: pointer
                display: none
                .hamburger
                    &, &::before, &::after 
                        content: ""
                        display: block
                        background: #333
                        height: 3px
                        width: 30px
                        border-radius: 3px
                        transition: all ease-in-out 500ms
                    &::before
                        transform: translateY(-6px)
                    &::after 
                        transform: translateY(3px)
                &[aria-expanded="true"] .hamburger 
                    transform: rotate(45deg)
                    &::before
                        opacity: 0
                    &::after 
                        transform: translateY(-3px) rotate(-90deg)
            /************************/
            /** General menu style **/
            /************************/
            ul
                display: flex
                li 
                    display: flex
                    a
                        text-decoration: none
                        white-space: nowrap
            /***************/
            /** Main menu **/
            /***************/
            #main-menu 
                gap: 50px
                li.menu-item-has-children a[href="#"]
                    display: flex
                button, .submenu-icon--no-btn
                    width: 35px
                    padding: 10px
                    padding-left: 10px
                    display: block
                .submenu-icon
                    svg 
                        width: 100%
                        height: 100%
                        display: block
                button 
                    cursor: pointer
                    &:focus
                        // TODO: CHANGE BUTTON FOCUS EFFECT
                        background-color: #eee
                > li 
                    &:hover, &:focus-within
                        // TODO: CHANGE LINK FOCUS EFFECT
                        text-decoration: underline
                /**************/
                /** Sub menu **/
                /**************/
                .sub-menu
                    display: none
                    position: absolute
                    top: 100%
                    padding: 5px 10px
                    background-color: #333
                    li 
                        &:hover, &:focus-within
                            // TODO: CHANGE SUBMENU LINK FOCUS EFFECT
                            text-decoration: underline
                        a
                            color: #ddd
                            padding: 5px 10px
                            display: block
                            width: 100%
                li.open .sub-menu
                    display: block

@keyframes openMenuMobile 
    0% 
        max-height: 0px
        transform: scaleY(0)
    100% 
        max-height: 100vh
        transform: scaleY(1)

@keyframes closeMenuMobile 
    0% 
        max-height: 100vh
        transform: scaleY(1)
    100% 
        max-height: 0px
        transform: scaleY(0)


/*******************/
/** Desktop header **/
/*******************/
@mixin header--laptop-and-bigger


/*******************/
/** Mobile header **/
/*******************/
@mixin header--tablet-and-smaller
    header .header-main-content nav 
        button.menu-toggle 
            display: block
        #main-menu
            display: none
            position: absolute
            width: 100%
            left: 0
            top: 100%
            flex-direction: column
            gap: 10px
            background-color: #333
            transition: all 750ms
            transform-origin: top
            &[data-is-opened='true']
                animation: openMenuMobile 0.3s ease-in-out forwards
            &[data-is-opened='false']
                animation: closeMenuMobile 0.3s ease-in-out forwards
            &.open 
                display: flex
                
            li
                width: 100%
                padding: 10px 20px
                &:not(:last-of-type)
                    border-bottom: 1px solid rgba(#ddd, 0.3)
                a
                    color: #eee