.vertical-tabs-container
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-color: gainsboro !default
  $base-border-radius: 3px !default
  $base-background-color: white !default
  $base-line-height: 1.5em !default
  $base-spacing: 1.5em !default
  $base-accent-color: #477DCA !default
  $base-link-color: $base-accent-color !default
  $dark-gray: #333 !default
  $medium-screen: em(640) !default
  $base-font-color: $dark-gray !default
  li
    list-style: none
  p
    color: $base-font-color
    line-height: $base-line-height
  a
    text-decoration: none
    color: $base-link-color
  //////////////////////////////////////////////////////////////////////////////////
  $tab-border-color: $base-border-color
  $tab-border: 1px solid $tab-border-color
  $tab-border-radius: $base-border-radius
  $tab-content-background: lighten($tab-border-color, 10%)
  $tab-active-color: $tab-content-background
  $tab-inactive-color: $base-background-color
  $vertical-tabs-height: em(300)
  $vertical-tab-mode: $medium-screen
  +clearfix
  border-radius: $tab-border-radius
  border: $tab-border
  margin-bottom: $base-spacing
  overflow: hidden
  .vertical-tabs
    display: none
    +media($vertical-tab-mode)
      background-color: $tab-inactive-color
      display: inline
      float: left
      height: $vertical-tabs-height
      width: 20%
  .vertical-tab
    +media($vertical-tab-mode)
      border-bottom: $tab-border
      display: block
      font-weight: bold
      margin-right: -1px
      padding: ($base-spacing / 2) ($gutter / 2)
      &.is-active
        background-color: $tab-content-background
        margin-right: -1px
  a.vertical-tab-accordion-heading,
  a.vertical-tab
    color: $dark-gray
  .vertical-tab:focus
    outline: none
  .vertical-tab-content-container
    display: block
    margin: 0 auto
    & a:focus
      outline: none
    +media($vertical-tab-mode)
      +size(80% $vertical-tabs-height)
      background-color: $tab-content-background
      display: inline-block
  .vertical-tab-content
    background-color: $tab-content-background
    padding: $base-spacing $gutter
    +media($vertical-tab-mode)
      border: none
      display: none
  .vertical-tab-accordion-heading
    background-color: $tab-inactive-color
    border-top: $tab-border
    cursor: pointer
    display: block
    font-weight: bold
    padding: ($base-spacing / 2) ($gutter / 2)
    &:focus,
    &:hover
      color: $base-accent-color
    &:first-child
      border-top: none
    &.is-active
      background: $tab-active-color
      border-bottom: none
    +media($vertical-tab-mode)
      display: none

// Based on code by Jett Miller jettmiller.net