.accordion-tabs
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-color: gainsboro !default
  $base-border-radius: 3px !default
  $base-background-color: white !default
  $base-spacing: 1.5em !default
  $base-accent-color: #0277BD !default
  $base-link-color: $base-accent-color !default
  $dark-gray: #333 !default
  $light-gray: #DDD !default
  $medium-screen: em(640) !default
  //////////////////////////////////////////////////////////////////////////////////
  $tab-border: 1px solid $base-border-color
  $tab-content-background: lighten($light-gray, 10)
  $tab-active-background: $tab-content-background
  $tab-inactive-color: $base-background-color
  $tab-inactive-hover-color: darken($light-gray, 5)
  $tab-mode: $medium-screen
  +clearfix
  line-height: 1.5
  margin-bottom: $base-spacing
  padding: 0
  +media(max-width $tab-mode)
    border-radius: $base-border-radius
    border: $tab-border

  .tab-header-and-content
    list-style: none
    +media($tab-mode)
      display: inline

    &:first-child .tab-link
      border-top-left-radius: $base-border-radius
      border-top-right-radius: $base-border-radius
      +media(max-width $tab-mode)
        border-top: 0
    &:last-child .tab-link
      +media(max-width $tab-mode)
        border-bottom-left-radius: $base-border-radius
        border-bottom-right-radius: $base-border-radius
  .tab-link
    background-color: $tab-inactive-color
    border-top: $tab-border
    color: $dark-gray
    display: block
    font-weight: bold
    padding: ($base-spacing / 2) ($gutter / 2)
    text-decoration: none
    +media($tab-mode)
      +inline-block
      border-top-left-radius: $base-border-radius
      border-top-right-radius: $base-border-radius
      border-top: 0

    &:hover
      color: $base-link-color
    &:focus
      outline: none
    &.is-active
      background-color: $tab-active-background
      +media($tab-mode)
        background-color: $tab-active-background
        border: $tab-border
        border-bottom-color: $tab-active-background
        margin-bottom: -1px
  .tab-content
    background: $tab-content-background
    display: none
    padding: $base-spacing $gutter
    width: 100%
    +media($tab-mode)
      border-bottom-left-radius: $base-border-radius
      border-bottom-right-radius: $base-border-radius
      border-top-right-radius: $base-border-radius
      border: $tab-border
      float: left