$tab-space: rem(12)
.tab__nav
  +clearfix
  display: block
  list-style: none
  padding: 0 $tab-space $tab-space $tab-space
  margin: $tab-space 0 $tab-space*2
  background-color: $secondary-color

.tab__nav-item
  display: block
  float: left
  margin: $tab-space $tab-space 0 0

  &:last-child
    margin-right: 0

  a
    display: block
    background-color: $grey-light
    color: $grey-dark
    padding: $tab-space

    &:hover
      color: $tertiary-color

.tab__panel
  display: none

// ----------------------------------------------------------
// STATES
// ----------------------------------------------------------
.tab__nav-item--active
  a
    background-color: $white
    color: $primary-color

.tab__panel--active
  display: block