/*
 *
 * BUI: NAVIGATION
 *
 */

$navWidth: 200px
$cb: cubic-bezier(.17,.67,0,1)

.bui-navigation-holder
  float: left
  height: 100%
  width: $navWidth
  position: relative
  background-color: white
  border-right:  1px solid $grey-200
  @include transition(width .225s $cb)

  .navigation-logotype
    height: 120px
    background-color: white
    border-bottom: 1px solid $grey-200
    .logotype-big,
    .logotype-small
      position: absolute
      top: 0
      left: 0
      height: 112px
      width: 100%
      padding: 37px 35px
      @include transition(all .225s $cb)
    .logotype-big
      opacity: 1
    .logotype-small
      opacity: 0

  .navigation-search-holder
    position: relative
    margin-top: 20px
    .search-button
      position: relative
      width: calc(100% - 40px)
      margin: 0 20px
      padding: 10px 0
      background-color: $cyan-500
      border-radius: 4px
      text-align: center
      white-space: nowrap
      cursor: pointer
      @include transition(all .225s $cb)
      &:hover
        background-color: $cyan-400
      &:active
        background-color: $cyan-600
      .search-icon,
      .search-label
        display: inline-block
        color: white
        font-size: 14px
        text-transform: uppercase
        font-weight: 600
      .search-icon
        width: 20px
        text-align: center
        @include transition(width .225s $cb)
      .search-label
        opacity: 1
        @include transition(opacity .125s ease)

    /*
     * Search Popup Style
     */

    .search-popup-parent
      position: absolute
      z-index: 5
      top: -10px
      left: 100%
      background-color: white
      box-shadow: 0 2px 8px rgba(black, .125)
      border-radius: 4px
      margin-left: 10px
      cursor: default
      display: none
      //width: 0
      //height: 0
      .popup-holder
        min-width: 240px
        //opacity: 0
        //@include transform(scale(.85))
        //@include transition(transform .125s $cb, opacity .075s ease)
        //transition-delay: .125s
        .popup__search-field
          padding: 13px 20px
          border-bottom: 1px solid $grey-300
          .bui-input-field
            .input-underlines
              display: none
        .popup__empty-state
          position: relative
          height: 260px
          width: 100%
          display: table
          .empty-state-content
            display: table-cell
            vertical-align: middle
            text-align: center
          .empty-state-icon
            font-size: 28px
            color: $grey-300
            margin: 0 8px
          .empty-state-text
            font-size: 14px
            color: $grey-400
            margin-top: 10px
        .popup__result-state
          padding: 20px 20px 10px 20px
          max-height: calc(100vh - 198px)
          overflow: auto
          .bui-action-button
            width: 100%
          .result-item
            @extend .clear-after
            cursor: pointer
            white-space: nowrap
            &:not(:last-of-type)
              margin-bottom: 10px
            &:hover
              .item-type
                background-color: $cyan-500
              .item-name
                color: $grey-800
            .item-type,
            .item-name
              display: inline-block
            .item-type
              vertical-align: top
              background-color: $grey-500
              border-radius: 100%
              width: 30px
              height: 30px
              margin-right: 10px
              text-align: center
              .type-icon
                font-size: 14px
                color: white
                line-height: 30px
            .item-name
              width: calc(100% - 40px)
              overflow: hidden
              text-overflow: ellipsis
              font-size: 14px
              line-height: 30px
              color: $grey-600

      &.is-showing
        display: block
        //width: 240px
        //height: 540px
        .popup-holder
          //opacity: 1
          //@include transform(scale(1))

  .navigation-toggle-button
    position: absolute
    bottom: 0
    width: 100%
    text-align: right
    border-top: 1px solid $grey-200
    cursor: pointer
    &:hover
      background-color: $grey-50
      .toggle-hint
        max-width: 120px
        opacity: 1
    .toggle-icon
      line-height: 40px
      width: 40px
      text-align: center
      font-size: 20px
      color: $grey-700
      @include transition(width .225s $cb)
    .toggle-hint
      position: absolute
      z-index: 5
      left: 100%
      top: 0
      margin: 5px
      line-height: 14px
      white-space: nowrap
      color: white
      font-size: 12px
      font-weight: 500
      padding: 8px
      background-color: rgba(black, .75)
      border-radius: 4px
      overflow: hidden
      max-width: 0
      opacity: 0
      @include transition(all .125s ease)

  .navigation-links
    margin-top: 20px
    .link-row
      @extend .clear-after
      white-space: nowrap
      color: $grey-700
      cursor: pointer
      &:not(:last-of-type)
        margin-bottom: 20px
      &:hover
        color: $grey-900
      .link-icon,
      .link-label
        float: left
        line-height: 20px
      .link-icon
        font-size: 18px
        width: 20px
        margin: 0 20px
        text-align: center
      .link-label
        font-size: 14px
        vertical-align: bottom

      &.active-link
        cursor: default
        .link-label
          font-weight: 500
        .link-icon,
        .link-label
          color: $cyan-500
          &:hover
            color: $cyan-500

  /*
   * Minimized Menu Style
   */

  &.nav-is-minimized
    width: 60px

    .navigation-logotype
      .logotype-big,
      .logotype-small
        padding: 37px 15px
      .logotype-big
        opacity: 0
      .logotype-small
        opacity: 1

    .navigation-search-holder
      .search-button
        width: 40px
        margin: 0 10px
        .search-icon
          width: 40px
        .search-label
          opacity: 0

    .navigation-toggle-button
      .toggle-icon
        width: 60px

    .navigation-links
      .link-label
        opacity: 0