@import variables

// Tabs

.tabs-block
  background: transparent
  border-bottom: $border-width solid $gray-lighter
  .col
    text-align: center
    position: relative
    &:last-child
      border-right: 0
    &:hover, &.here
      background: $gray-lighter
      transition: $all
  a
    width: 100%
    display: inline-block
    padding: 0.5em
    color: $text

.tabs
  display: inline-block
  list-style: none
  margin: 1em 0
  padding: 0
  width: 100%
  a
    border-radius: $radius
    border: $border-width solid transparent
    padding: 0.65em 1em
    color: $text
  li
    display: inline-block
    padding: 0 0.5%
    &:hover, &.here
      a
        transition: $all
        background: $gray-lighter
  & ul
    padding: 0
  &.round
    li a
      border-radius: $round

@media screen and (max-width: $phablet)

  .tabs-block, .tabs
    a
      margin: 0.5% 0
      padding: 0.65em 0.5em
      display: block
      text-align: center

  .tabs-block
    border-bottom: 0

  .tabs
    li
      display: block
      padding: 0