@import settings

header
  position: fixed
  top: 0
  left: 0
  z-index: 11
  width: 100%
  right: 0
  z-index: 11
  display: flex 
  align-items: center
  flex-direction: column

  .logo
    display: flex
    align-items: center

    p
      +resolution(992)
        font-size: 16px
        font-weight: 600
        letter-spacing: $em
        color: $grey-normal
      +resolution(0, 991)
        display: none

    a
      +resolution(992)
        margin-right: 20px

  .header
    display: flex
    justify-content: space-between
    align-items: center
    height: 74px
    width: 100%
    +resolution(0, 575)
      border-bottom: 1px solid $grey-light

  .links
    display: flex
    align-items: center
    +resolution(0, 575)
      display: none

    a
      font-weight: 700
      font-family: $a
      color: $black
      letter-spacing: $em
      text-decoration: none
      display: flex
      align-items: center
      height: 24px
      transition: color 250ms linear
      +resolution(576, 991)
        font-size: 13px
        margin-right: 10px
      +resolution(992)
        font-size: 14px
        margin-right: 20px
      +resolution(0, 575)
        font-size: 18px

      &:hover
        color: $primary

      &:last-child
        &:hover
          span
            color: $primary

        img
          +resolution(576)
            margin-right: 5px

        span
          color: $grey-dark
          font-size: 14px
          font-family: $a
          font-weight: 700
          letter-spacing: $em
          transition: color 250ms linear

        &::before
          content: ''
          display: block
          width: 1px
          height: 100%
          background-color: $grey-light3
          +resolution(576)
            margin-right: 20px

.mobile-menu
  +resolution(576)
    display: none

  .upper-part
    width: 100%
    height: 74px
    display: flex
    align-items: center

    img
      width: 32px
      height: 32px

    > img
      margin-left: 20px

  .bottom-part
    width: 100%
    position: absolute
    top: 100%
    left: 0
    z-index: 11
    display: flex
    flex-direction: column
    justify-content: center
    background: rgb(24 25 28 / 40%)
    height: 100vh
    justify-content: flex-start

    .bottom-menu
      width: 100%
      padding: 0 15px 32px
      background: $white

    a
      padding: 24px 0
      max-height: 64px
      display: flex
      align-items: center
      font-weight: 700
      font-family: $a
      color: $black
      letter-spacing: $em
      text-decoration: none
      font-size: 18px
      border-bottom: 1px solid $grey-light

  .not__visible
    display: none

  .visible
    display: flex