@import ../../styles/helpers

.center
  +simple-center

.header
    position: relative
    z-index: 205
    padding: 39px 0
    +m
        padding-bottom: 24px

.container
    display: flex
    align-items: center
    & > .button,
    & > div > div[class^="DropdownMenu"]
        +m
            display: none

.logo
    width: 9.88em
    margin-right: 48px
    +d
        margin-right: auto

.button
    min-width: 111px
    &:not([class^='button-stroke'])
        background: #5400FF
        box-shadow: 0 0 0 2px #5400FF inset
        color: $neutrals8
        &:hover
            background: darken(#5400FF, 10)
            box-shadow: 0 0 0 2px darken(#5400FF, 10) inset
            color: $neutrals8
    &[class~='button'] //remove along with rent btn, later
        margin-right: 1em
        +d
            margin-right: 1.5em
    +m
        width: 100%

.icon
    font-family: FontAwesomeSolid
    font-size: 10px
    margin-right: 4px

.wrap
    display: flex
    align-items: flex-end
    flex-grow: 1
    padding-left: 48px
    // border-left: 1px solid $neutrals3
    +x
        padding-left: 0
        border: none
    +d
        display: none
        position: absolute
        align-items: flex-start
        top: 100%
        right: 1em
        height: fit-content
        padding: 1em 1.5em
        background: $neutrals1
        border-radius: 0.75em
        box-shadow: 0px 8px 12px 0px #000000A8
        &.active
            display: flex
    +m
        left: 1em
        right: 1em
        flex-direction: column
        align-items: flex-start
        min-height: fit-content
        padding: 48px 32px 160px
        border-color: $neutrals3
    & > div //targeting OutsideClickHandler
        width: 100%
        height: 100%
        display: flex
        align-items: flex-end
        flex-grow: 1
        +d
            flex-direction: column
            align-items: center
    & div[class^="Header_details"]
        +m
            padding: 0 2em
            & > .button
                margin: 64px auto 0 auto
    & .button
        display: none
        +m
            display: inline-flex
    & div > div[class^="DropdownMenu_group"]
        display: none
        +m
            display: inline
            & div[class^="DropdownMenu_head"]
                margin-top: 64px
                margin-right: 0
                padding: 0
                box-shadow: none !important
            & .button
                margin-right: 0.5em
            & div[class^="DropdownMenu_inner"]
                position: absolute
                right: 0
                transform: translateX(0%)
                width: 100%
                margin-top: 1em
                padding: 0

.nav
    display: flex
    visibility: hidden
    height: 0
    align-items: center
    margin-left: auto
    margin-right: 0px
    +d
        flex-direction: column
        margin-right: 15vw
    +m
        height: auto
        visibility: visible
        align-items: flex-start
        flex: auto 0 calc(100% + 64px)
        width: calc(100% + 64px)
        // max-width: calc(100% + 64px)
        margin: 0 -32px

.link,
.group,
.nav > div
    &:not(:last-child)
        margin-right: 24px
        +x
            margin-right: 24px
        +d
            margin: 0 0 48px
        +m
            margin: 0

.link
    display: block
    padding: 16px 8px
    +button-2
    color: $neutrals8
    transition: color .2s
    +d
        width: fit-content
        padding: 0
        font-size: 40px
        line-height: 1.2
        letter-spacing: -.01em
    +t
        font-size: 32px
    +m
        padding: 0px 32px 
        font-size: 36px
    &:hover
        color: $white
    &.active
        color: $neutrals5
        +m
            box-shadow: inset 2px 0 0 0 $red
    
.details
    margin-top: auto
    margin-bottom: auto
    display: flex
    align-items: center
    flex-basis: 235px
    +d
        display: block
        left: 50%
        bottom: 3em
        flex: 0 0 auto
        width: 100%
    +m
        margin: 6em 0 0


.text
    +caption-1
    color: $neutrals4

.socials
    display: flex
    margin: 0 auto
    +d
        justify-content: space-evenly
        width: 100%

.social
    display: flex
    justify-content: center
    align-items: center
    flex-shrink: 0
    width: 24px
    height: 24px
    // +m
    //     width: 48px
    //     height: 48px
    svg
        fill: $neutrals4
        transition: fill .2s
    &:hover svg
        fill: $neutrals8
    &:not(:last-child)
        margin-right: 24px
        +d
            margin: 0

.burger
    display: none
    +d
        display: block
        position: relative
        margin-left: 40px
        width: 32px
        height: 32px
        background: none
        -webkit-tap-highlight-color: rgba(0,0,0,0)
        &.active
            &:before
                transform: translateY(0) rotate(-45deg)
            &:after
                transform: translateY(0) rotate(45deg)
        &:before,
        &:after
            content: ''
            position: absolute
            top: 16px
            left: 6px
            width: 20px
            height: 2px
            background: $neutrals4
            border-radius: 2px
            transition: transform .2s
        &:before
            transform: translateY(-4px)
        &:after
            transform: translateY(3px)
    +t
        margin-left: 32px