$header-height: 50px !default

.header
  +clearfix
  background: $white
  display: flex
  line-height: 24px
  min-height: $header-height
  position: relative
  text-align: center
  z-index: 2
  .container
    align-items: stretch
    display: flex
    min-height: $header-height
    width: 100%
  // Modifiers
  &.has-shadow
    box-shadow: 0 2px 3px rgba($black, 0.1)
  // Responsiveness
  +mobile
    .container
      flex-direction: column
  +tablet
    height: $header-height

.header-toggle
  @extend .hamburger
  position: absolute
  right: 0
  top: 0
  // Responsiveness
  +tablet
    display: none

// Elements

.header-item
  align-items: center
  display: flex
  padding: 10px
  a
    flex-grow: 1
  img
    max-height: 24px
  .button + .button
    margin-left: 10px
  .fa
    font-size: 21px
    line-height: 24px
  .tag
    &:first-child
      margin-right: 5px
    &:last-child
      margin-left: 5px
  // Responsiveness
  +mobile
    text-align: left

.header-item a,
a.header-item
  color: $text
  &:hover
    color: $link-hover
  // Modifiers
  &.is-active
    color: $link-active

.header-tab
  align-items: center
  border-bottom: 1px solid transparent
  color: $text
  display: block
  height: $header-height
  line-height: 24px
  padding: 13px 15px
  &:hover
    border-bottom: 1px solid $link
  // Modifiers
  &.is-active
    border-bottom: 3px solid $link
    color: $link

// Containers

.header-left
  align-items: stretch
  display: flex
  flex: 1
  overflow: hidden
  overflow-x: auto
  white-space: nowrap
  // Responsiveness
  +mobile
    height: $header-height
  +desktop
    margin-left: -10px

.header-right
  align-items: stretch
  // Responsiveness
  +tablet
    display: flex
  +desktop
    margin-right: -10px

.header-full
  align-items: stretch
  display: flex
  justify-content: center
  text-align: center
  width: 100%
  & > .header-item
    align-items: stretch
    display: flex
    flex: 1
    justify-content: center
    padding: 0
    & > a
      align-items: center
      display: flex
      justify-content: center
      width: 100%

.header-menu
  // Responsiveness
  +mobile
    box-shadow: 0 4px 7px rgba($black, 0.1)
    display: none
    .header-item
      border-top: 1px solid rgba($border, 0.5)
      padding: 10px
    // Modifiers
    &.is-active
      display: block

// States

.header.is-centered
  justify-content: center
  .header-left,
  .header-right
    justify-content: center

.header.is-small
  background: $background
  box-shadow: none
  height: 40px
  z-index: 1
  .container
    height: 40px
  .header-tab
    font-size: 13px
    height: 40px
    padding: 8px 10px
    &:hover,
    &.is-active
      border-bottom-width: 2px