
.tabnav
  color: $grey-light
  font-size: $font-size-sm
  ul
    @include resetul
    width: 100%
    clear: both
    @media #{$small-only}
      margin-top: 2em
  li
    @media #{$small-only}
      margin-bottom: .8em
  a
    @extend %inline-block
    width: 100%
    color: $grey-light
    padding: .2em 0

  .active a,
  a:hover
    position: relative
    color: $teal-dark
    &:after
      content: ""
      position: absolute
      left: 0
      bottom: -0.25em
      width: 100%
      height: 2px
      background-color: $teal-dark
  .active a
    font-weight: 600

  @media #{$medium-up}
    ul
      display: block
    li
      float: left
      padding-right: 2em

// todo: switch to icon
#tab_build
  position: relative
  padding-left: 1em
  &:before
    content: ""
    display: block
    position: absolute
    color: $grey-lighter
    top: 0.4em
    left: -0.7em
    width: .7em
    height:  1.3em
    background:
      size: 100%
      repeat: no-repeat
    @extend .icon-tab-arrow


.tabbody
  position: relative
  .tabnav-sub
    @include resetul
    @extend %inline-block
    overflow: visible
    a
      color: $grey-light
      padding: .5em 0
    .active
      color: $teal-dark

    @media #{$medium-up}
      border-bottom: solid $cream-dark 2px
      li
        float: left
        margin-right: 1em


#main
  .tabs
    border-bottom: 3px solid #f5f5f6
    li
      height: 29px
      background-color: #f5f5f6
      margin-right: 0
      overflow: hidden
      &:hover
        background-color: #e1e8eb
    a
      text-decoration: none

    .active
      display: block
      background-color: $tab-active-bg
      border-bottom-color: $tab-active-bg
      &:hover
        background-color: $tab-active-bg
      a
        color: #6c878e
      @media #{$medium-up}
        display: inline-block

  #builds
    a
      display: inline

.tabs--main
  #tab_build,
  #tab_job,
  #tab_request,
  #tab_requests,
  #tab_caches,
  #tab_settings
    display: none
    &.active
      display: inline-block

#profile
  #main
    .tab
      margin: 30px 0 0 12px
