header
  padding-bottom: 100px

  .logo-account-row
    padding: 85px 0
    +flex(space-between, flex-start)

    .logo
      position: relative
      left: -10px
      width: 280px

      img
        width: 100%
        max-height: 68px

    .account
      +flex(space-between, center)
      padding: 8px 10px
      border: 1px solid rgba($grey, 0.25)
      border-radius: 8px
      background: transparent


      font-size: 0.7rem
      line-height: 1.2
      color: $grey
      text-decoration: none
      transition: color 0.3s, border 0.3s, background 0.3s

      .icon
        position: relative
        margin-right: 8px

        &.login
          top: 1px

      &:hover
        background: rgba($brown, 0.25)

    .button
      +flex(space-between, center)
      height: 40px
      margin-left: auto
      margin-right: 16px
      padding: 8px 18px
      font-size: 0.7rem
      line-height: 1.2
      border-radius: 8px



  .menu
    +flex(space-between, center)

    nav
      width: 640px
      font-size: 1rem
      line-height: 1.2
      font-weight: semibold()

      ul
        +flex(flex-start, center)
        padding: 0
        list-style: none

        li

          + li
            margin-left: 60px

          a
            position: relative
            text-decoration: none
            color: $black

            &:after
              content: ''
              position: absolute
              z-index: -1
              bottom: 0
              left: 0
              width: 100%
              height: 3px
              transform: scale3d(0,1,1)
              transform-origin: 0 50%
              background-color: rgba($black, 0.1)
              transition: transform 0.3s, background-color 0.3s

          &:hover
            a
              &:after
                transform: scale3d(1, 1, 1)

          &.active
            a
              &:after
                transform: scale3d(1,1,1)
                opacity: 1
                background-color: $yellow

          .menu-trigger-button
            +flex(flex-start, center)
            cursor: pointer

            &:after
              display: none

            .icon
              +flex(center, center)
              width: 40px
              height: 40px
              border: 1px solid rgba($grey, 0.25)
              border-radius: 100%
              transition: border 0.3s

              .wrapper
                +flex(center, center)
                span
                  display: inline-block
                  width: 3px
                  height: 3px
                  background-color: $black
                  border-radius: 100%

                  + span
                    margin-left: 2px

            p
              margin: 0 0 0 5px
              color: $black
              font-weight: regular()
              font-size: 0.7rem

            &:hover
              .icon
                border-color: $grey

      +respond-to-width(1250)
        font-size: 0.85rem
        width: 540px

        ul
          li
            + li
              margin-left: 40px

    .search-bar
      width: calc(100% - 660px)
      max-width: 480px
      form
        position: relative
        width: 100%

        .search-input
          display: block
          width: 100%
          +appearance(none)
          border: none
          padding: 20px 50px 15px 25px
          border-radius: 30px
          background-color: rgba($brown, 0.4)

          font-size: 0.75rem
          line-height: 1.2
          color: $black
          font-weight: semibold()

          +placeholder
            color: $black 

          &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active
            transition: 9999s background-color
            -webkit-text-fill-color: $black
            transition-delay: 9999s

          &:focus
            box-shadow: none
            outline: none

        input[type='submit']
          display: none

        .icon
          position: absolute
          z-index: 2
          cursor: pointer
          right: 0
          top: 0
          width: 60px
          height: 100%
          +flex(center, center)

      +respond-to-width(1080)
        width: 280px

  +respond-to-width(1000)
    .logo-account-row
      padding: 60px 0 35px

    .menu
      display: block

      nav
        width: 100%

      .search-bar
        margin-top: 35px
        width: 100%
        max-width: 500px

  +respond-to-width(700)
    padding-bottom: 30px

    .logo-account-row
      width: calc(100% - 40px)
      padding: 30px 0

      .logo
        width: 250px
        left: -8px

        +respond-to-width(500)
          width: 200px

        +respond-to-width(420)
          width: 180px

        +respond-to-width(375)
          width: 160px


    .menu
      nav
        display: none

      .search-bar
        margin-top: 0
        width: 100%
        max-width: none

        form
          .search-input
            border-radius: 0
            font-size: 0.7rem
            padding: 14px 50px 12px 17px