$header-height: $base-line-height * 1.8em

.main-header
  +clearfix
  background: $dark-purple
  line-height: $header-height
  padding: 0 $base-spacing
  color: #fff
  position: relative

  .logo
    +transform(translate(-50%, -50%))
    display: inline-block
    background: url(/images/logo.png) 0 0 no-repeat
    background-size: contain
    height: 32px
    width: 110px
    position: absolute
    top: 50%
    left: 50%


  nav
    float: left
    margin: 0
    padding: 0

    &.right
      float: right

    ul
      list-style: none
      display: inline-block
      margin: 0
      -webkit-margin-before: 0
      -webkit-padding-start: 0
      li
        display: inline-block

        a
          +transition
          color: rgba(#fff, .5)
          background: rgba(#fff, .15)
          border-radius: $base-border-radius
          padding: .3em .5em
          line-height: 1em

          &.current-user
            position: relative
            overflow: hidden
            padding-left: 35px
            margin-right: .5em

            .react-gravatar
              width: 30px
              height: 30px
              border-radius: $base-border-radius
              margin-right: .5em
              position: absolute
              top: 50%
              margin-top: -15px
              left: 0



          .fa
            color: #fff

          &:hover
            color: #fff

    &#boards_nav
      > ul > li
        position: relative

        a
          display: block

        .dropdown
          position: absolute
          display: block
          z-index: 99
          background: #fff
          border-radius: $base-border-radius
          left: 0
          margin-top: .5em
          color: $base-font-color
          width: 15em
          padding: .3em
          box-shadow: 0 3px 6px rgba(0,0,0,.4)
          animation-duration: .3s
          animation-name: fadeIn

          header
            padding: 0 .5em
            color: $gray

          ul
            display: block
            position: relative
            max-height: 15em
            overflow-y: auto

            li
              display: block
              margin-bottom: .3em

              a
                +transition
                color: $base-font-color
                font-weight: bold
                display: block
                padding: .7em .5em
                background: rgba($purple, .2)

                &:hover
                  background: rgba($purple, .5)

            &.options
              margin-top: 1em
              li
                a
                  background: #fff
                  text-decoration: underline
                  font-weight: normal
                  color: $dark-gray

                  &:hover
                    background: $light-gray
