.component-tab
  background-color: $dark-white
  padding: 30px
  overflow: hidden

.component-tab__list
  +flex(flex-start, flex-end)
  margin: 0
  padding: 0
  list-style: none

.component-tab__list-item
  background-color: lighten($darkerBlue, 15%)
  height: 35px
  line-height: 40px
  border-radius: 4px 4px 0 0
  cursor: pointer
  transition: background-color 0.3s, box-shadow 0.3s

  & + &
    margin-left: 5px

  &:hover
    background-color: lighten($darkerBlue, 10%)

  &.active
    background-color: $white
    a.component-tab__button
      color: $blue

  &.error
    background-color: $brightRed


  a.component-tab__button
    display: block
    height: 100%
    width: 100%
    color: white
    font-size: 0.7rem
    text-decoration: none
    text-transform: uppercase
    padding: 0 20px

.component-tab__container
  position: relative

.component-tab__content
  background-color: white
  position: absolute
  top: 0
  z-index: -1

  &.active
    position: relative
    z-index: 1