// Bar
.nav-brands
  background: $dark-grey
  +grid-margin($top: 1)

  // Bar
  // ==========================================================================

  .bar
    position: relative
    +grid-line-height
    +grid-padding-s($left: 1)
    +border-right-radius($border-radius)
    font-size: 1.4em
    color: #fff

    @extend %clearfix

    .title,
    ul,
    li
      display: block
      float: left

    .title
      +grid-padding($right: .5)
      border-right: 1px solid #787878
      color: #fff
      letter-spacing: .02em
      width: 25%

    .nav-brands-buttons
      li
        +grid-padding-s($left: .25, $right: .25)
        +grid-width-s(1.5)
        border-right: 1px solid #787878
        cursor: pointer
        text-align: center
        white-space: nowrap

        &:hover
          background: #111111

        &.active
          background: $blue

    .btn
      top: 50%
      +grid-position-s($right: .25)
      +grid-margin-s(-.375)
      +linear-gradient(#646464 0%,#4F4F4F 25%,#3D3D3D 100% )
      border-color: #787878
      font-size: 1em
      +grid-height-s(.75)
      +grid-line-height-s(.65)

      &::before
        padding-right: 0

      &:hover
        +linear-gradient(#262626 0%,#262626 55%,#262626 100% )
        border-color: #000


  // Holder
  // ==========================================================================

  .nav-brands-group-holder
    position: relative
    background: #373737
    +border-bottom-radius($border-radius)
    overflow: hidden

    .group
      position: absolute
      top: 0
      left: 0
      overflow: hidden
      width: 100%
      +opacity(0)
      +border-bottom-radius($border-radius)

      +transition(opacity 300ms ease-out)

      &.show
        +opacity(1)
        z-index: 10

      .inner
        +grid-padding-s(1,1,1,1)
        @extend %clearfix

        ul
          width: 25%
          float: left
          font-size: 1.4em
          line-height: 1.5

          a
            color: rgba(255,255,255,0.8)

            &:hover
              color: $blue