.tabs {
  @include padding($zero $space-normal);
  @include border-normal-bottom;
  border-left-width: 0;
  border-right-width: 0;
  border-top-width: 0;
}

.tabs-title {

  .badge {
    background: $color-background;
    border-radius: $space-small;
    color: $color-gray;
    font-size: $font-size-micro;
    font-weight: $font-weight-black;
    margin-left: $space-smaller;
    padding: $space-smaller;
  }

  a,
  .button {
    @include position(relative, 1px null null null);
    border-bottom: 2px solid transparent;
    height: var(--space-large);
    transition: border-color .15s $swift-ease-out-function;
  }

  &.is-active {

    a,
    .button {
      border-bottom-color: $color-woot;
    }

    .badge {
      background: $color-extra-light-blue;
      color: $color-woot;
    }
  }

  // Sleek tabs
  &.smooth {

    a,
    .button {
      border-bottom: 0;
      top: 0;

      .button__content {
        display: inline-flex;
        align-items: center;
      }
    }

    &.is-active {
      .badge {
        background: var(--s-100);
        color: var(--s-600);
      }
    }
  }
}