.app-tabs
  user-select: none
  width: $app-tab-width
  height: 100%
  background: hsl(0,0,95)
  // background: #fff
  position: fixed
  left: $sidebar-width
  top: 0
  box-sizing: border-box
  // border-right: 1px solid rgba(#000, 0.05)
  // box-shadow: 1px 0px 2px rgba(#000, 0.15)
  z-index: 4
  border-right: 1px solid rgba(#000, 0.1)
  border-left: 7px solid $darker-blue

  a
    display: block
    width: 100%
    height: $app-tab-height
    // border-bottom: 1px solid hsl(0,0,90)
    border-bottom: 1.5px solid #fff
    transition: background 0.15s ease-out
    box-sizing: border-box
    position: relative
    left: 1px

    span
      display: block
      text-align: center
      position: relative
      top: 50%
      transform: translateY(-50%)

    img
      display: block
      margin: 0 auto
      margin-bottom: 7px
      pointer-events: none

    &, &:visited
      text-decoration: none
      label
        color: $dark-blue
        font-size: 13.5px
        font-family: $condensed-font
        font-weight: 400
        display: inline-block
        width: 100%
        white-space: nowrap
        letter-spacing: 0.2px
        cursor: pointer

        +safari-only
          +retina
            font-weight: 400
          +non-retina
            font-weight: 600

    &:hover
      // background: hsl(0,0,99)
      background: hsla(195, 73%, 77%, 0.15)


    &.selected
      $border-color: rgba($dark-blue, 0.7)
      // background: hsl(0,0,96)
      background: #fff //rgba($dark-blue, 0.09)
      pointer-events: none
      border-top: 1px solid $border-color
      border-bottom: 1px solid $border-color
      border-right: 1px solid $border-color
      // border-right: 1px solid hsl(0,0,95)
      // box-shadow: 0px 0px 2px rgba(#000, 0.25)
      box-shadow: inset 0px 0px 4px rgba($light-blue, 0.3)

      position: relative
      top: -1px
      width: calc(100% + 1px)
      height: $app-tab-height + 1px

      &:first-of-type
        border-top: none



