.tabs {
  @if $shadows == 1 {
    @include shadow(1);
  } @else {
    border: solid darken($color-white, 10%);
    border-width: 1px 0;
  }
  background: transparentize($color-black, .98);
  display: flex;
  display: -webkit-flex; // sass-lint:disable-line no-vendor-prefixes no-duplicate-properties
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    -webkit-flex: 1 1 auto; // sass-lint:disable-line no-vendor-prefixes
    color: transparentize($color-black, .5);
    cursor: pointer;
    flex: 1 1 auto;
    padding: 1.3em .5em 1em;
    text-align: center;
    text-transform: uppercase;

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

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