$sb-grey: #f2f2f2
$sb-font-size: 14px

.tile--sidebar
  height: auto
  padding: 0.6em 0.5em
  margin-bottom: .46rem
  background-color: $white
  border-radius: 0
  border-left: 8px solid
  li:last-child &
    margin-bottom: 0

  h2, p
    margin: 0
    font-size: $sb-font-size
    font-weight: 400
  h2
    position: relative
    display: inline-block
    margin-bottom: .7em
    @media #{$medium-up}
      width: 75%
      white-space: nowrap
      overflow: hidden
      &:after
        @include fadeOut(right, -90deg, $white)
  p.tile-title
    width: 10%
    @media #{$medium-up}
      width: 25%
      white-space: nowrap
      overflow: hidden
    @media #{$xlarge-up}
      width: 22%
  a:hover
    text-decoration: underline
  .icon
    width: 1.3em
    height: 1.4em
    margin-right: .1em

.tabnav--sidebar
  font-size: $sb-font-size
  border-bottom: solid 2px $sb-grey
  width: 90%
  margin: auto

  .active a:after,
  a:hover:after
    bottom: -3px

  .icon--plus
    &:after
      transform: translateX(35%)
      display: inline-block
  #tab_new
    a:hover
      .icon--plus:after
        color: $teal-light
      &:after
        bottom: -2px

  @media (min-width: #{lower-bound($large-range)})
    ul
        height: 2em
    li
      padding-right: 1em

  @media #{$xxlarge-up}
    li
      padding-right: 2em

  @media (max-width: #{lower-bound($large-range)})
    li
      display: block !important
      float: none
    a
      padding: 0 0 .35em
      margin-bottom: .8em


.sidebar-list
  margin-top: 1.4rem
  color: $grey-medium
  ul
    @include resetul
    border-bottom: .46rem solid #FAF9F7
    background-color: #FAF9F7

.sidebar-seperator
  width: 90%
  margin: 1rem auto
  border: none
  border-bottom: solid 2px #f2f2f2
