/*
 *
 * BUI: HEADER
 *
 */

/*
 * Navigation width is 240px
 */

.bui-header-holder
  position: relative
  width: 100%
  height: 112px
  .header-main
    @extend .clear-after
    position: relative
    width: 100%
    height: 100%
    padding: 0 40px
    background-color: $cyan-500
    .main-left-area
      float: left
      color: white
      padding-top: 20px
      line-height: 40px
      .path-label
        font-size: 28px
      .path-breadcrums
    .main-right-area
      @extend .clear-after
      float: right
      padding-top: 20px
      .header-icon-button
        float: left
        font-size: 20px
        line-height: 40px
        padding: 0 2px
        cursor: pointer
        margin-left: 20px
        color: $cyan-900
        &:hover
          color: white
      .header-search-holder
        float: left
        height: 40px
        width: 22px
        overflow: hidden
        margin-left: 20px
        border-radius: 4px
        box-shadow: 0 0 0 rgba(black, 0)
        @include transition( all .185s cubic-bezier(.15,.7,0,1) )
        .header-icon-button
          margin: 0
          width: 22px
        .search-field
          @extend .clear-after
          float: left
          width: 0
          overflow: hidden
          @include transition( width .185s cubic-bezier(.15,.7,0,1) )
          .bui-input-field,
          .search-close-button
            float: left
          .bui-input-field
            width: 160px
            margin: 5px 10px
            .input-underlines
              display: none
          .search-close-button
            width: 0
            text-align: center
            line-height: 20px
            margin: 10px 0
            color: $grey-400
            cursor: pointer
            &:hover
              color: $red-400
        &.is-expanded
          padding: 0 10px
          background-color: white
          width: 242px
          box-shadow: 0 1px 3px rgba(black, .25)
          .search-field
            width: 200px
          .header-icon-button
            cursor: default
            color: $cyan-500
            &:hover
              color: $cyan-500

  &.header-with-tabs
    height: 62px