
$screen: 768px

.media-header 
    position: fixed
    display: flex
    flex-direction: column
    align-items: center
    justify-content: center
    left: 16px
    gap: 8px
    top: 0px

    @media (max-width: $desktopScreen) 
        display: none
    

    &__links 
        display: grid
        grid-auto-columns: 1fr

    &__line 
        width: 1px
        height: 33vh
        background-color: var(--gray)
        display: block

.hamburger
    width: 32px
    margin: 0
    aspect-ratio: 1
    display: none
    appearance: none
    position: absolute
    cursor: pointer
    right: 8px
    top: 32px
    z-index: 9999

    &::before, &::after
        content: ""
        width: 100%
        height: 2px
        position: absolute
        top: 30%
        background-color: var(--gray)
        transition: all 0.2s ease

    &::after
        width: 75%
        top: 70%
        right: 0

    @media (max-width: $desktopScreen)
        display: block

        &:checked 
            &::after
                transform: translateY(-50%) rotateZ(45deg)
                width: 100%
                top: 50%

            &::before
                transform: translateY(-50%) rotateZ(-45deg)
                top: 50%


            & ~ .media-header
                display: flex
                top: calc(100% - 16px)
                left: 50%
                transform: translate(-50%, -100%)
                z-index: 9999

                .media
                    width: 48px

                .media-header__links
                    display: flex
                    gap: 16px

                .media-header__line
                    display: none
                    

            & ~ .container
                width: 100vw
                height: 100vh

                .dropdown
                    display: flex
                    position: absolute
                    bottom: -16px
                    font-size: 24px
                    transform: translateY(100%)
                    right: 0

                .header
                    &__inner
                        align-items: start

                    &__links
                        display: flex
                        position: absolute
                        flex-direction: column
                        bottom: -32px
                        transform: translateY(100%)
                        font-size: 24px


.header 
    padding:
        top: 32px
        bottom: 8px
    background-color: var(--background)
    position: fixed
    top: 0
    width: 100%
    z-index: 999
    
    &__inner
        display: flex
        width: 100%

        justify-content: space-between
        align-items: center
        gap: 16px
        position: relative


    &__links 
        margin-left: auto
        display: flex
        align-items: flex-start

        gap: 32px
        
    
    &__link
        color: var(--gray)

        &_active
            font-weight: 600
            color: var(--white)

        &::before
            content: "#"
            color: var(--primary)
            font-weight: normal
        
        &:hover 
            color: var(--white)

    @media (max-width: $desktopScreen) 
        padding-top: 16px

        &__links, .dropdown
            display: none

        