#header
  @extend $block
  background: white
  position: relative
  a, a:visited
    white-space: nowrap
    transition: 0.2s ease
    color: color-default
  a:hover
    color: color-link

$header-block
  height: logo-size
  line-height: logo-size
  padding: ((header-height - logo-size)/2) 15px

$header-block-left
  float: left

$header-block-right
  float: right
  
.header-inner
  height: 100%
  position: relative
  #logo
    @extend $header-block
    @extend $header-block-left
    display: inline-block
    .logo
      display: inline-block
      width: logo-size
      height: logo-size
      margin-right: 5px
    .site-title
      font-size: 16px
      display: inline-block
      vertical-align: top
      font-weight: 600

#header-title
  text-align: center
  height: logo-size
  position: absolute
  top: 50%
  left: 0
  margin-top: logo-size * -0.5
  
.header-sub
  border-top: 1px solid color-border
  ul
    clearfix()
    margin: 0 15px
    li
      float: left
      margin: 0 10px
      a
        display: inline-block
        line-height: header-sub-height
  .main-nav-link
    display: inline-block
    line-height: header-sub-height
    
#header-sub
  @media mq-mobile
    display: none
  @media mq-mini
    display: none

#main-nav
  @extend $header-block
  @extend $header-block-left
  @media mq-mobile
    display: none
  @media mq-mini
    display: none
    
#main-nav-mobile
  @media mq-tablet
    display: none
  @media mq-normal
    display: none
  

$nav-link
  float: left
  display: block
  padding: 0 15px

.nav-icon
  @extend $nav-link
  text-align: center
  font-size: font-size
  width: font-size
  height: font-size
  position: relative
  cursor: pointer
  height: logo-size !important
  line-height: logo-size !important

.main-nav-link
  @extend $nav-link
  font-weight: 300

#sub-nav
  @media mq-normal
    display: none
  @extend $header-block
  @extend $header-block-right
  #profile-nav
    #profile-anchor
      clearfix()
      display: block
      height: logo-size
      line-height: logo-size
    .avatar, .fa
      float: left
    .avatar
      width: logo-size
      height: logo-size
      margin-right: 8px
    .fa
      line-height: logo-size

#search-form-wrap
  @media mq-mini
    display: none
  @extend $header-block
  @extend $header-block-right
  .search-form
    position: relative
    .search-form-input
      width: 100%
      height: logo-size
      padding: 0 30px 0 10px
      line-height: logo-size
      border-radius: ((logo-size + 2)/2)
      &::-webkit-search-results-decoration
      &::-webkit-search-cancel-button
        -webkit-appearance: none
    .search-form-submit
      top: 50%
      right: 15px
      border: none
      cursor: pointer
      margin-top: -7px
      background: none
      position: absolute
      font: 13px font-icon
      font-family: 'FontAwesome'
      &:before
        content: '\f002'
      &:hover, &:focus
        color: #777

.search-form-input
  width: 200px
  outline: none
  appearance: none
  background: none
  box-shadow: none
  color: color-default
  transition: 0.2s ease
  box-sizing: border-box
  font: font-size font-sans
  border: 1px solid color-border
  &:focus
    border-color: color-link

#main-nav-mobile
  overflow-y: hidden
  overflow-x: auto
  .menu
    clearfix()
    margin: 0
    height: header-sub-height
    .search-form-input
      display: none
      @media mq-mini
        display: block
      padding: 0 10px
      margin-right: 15px
      height: header-sub-height - 16
      line-height: header-sub-height - 16
      border-radius: ((header-sub-height - 16)/2)
      &::-webkit-search-results-decoration
      &::-webkit-search-cancel-button
        -webkit-appearance: none