.tabs {
  @if $shadows == 1 {
    @include shadow(1);
  } @else {
    border: solid darken($color-white, 10%);
    border-width: 1px 0;
  }
  background: rgba($color-black, .02);
  display: flex;
  font-family: $font-family;
  list-style: none;
  margin: 0;
  padding: 1em 0 0;

  li {
    color: rgba($color-black, .5);
    cursor: pointer;
    flex: 1 1 auto;
    padding: .5em .5em 1em;
    text-align: center;
    text-transform: uppercase;

    &:hover {
      color: $color-black;
    }
  }

  .visible {
    border-bottom: 2pt solid $color-primary;
    color: $color-primary;
  }
}