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

// Tab chat type
.tab--chat-type {
  @include flex;

  .tabs-title {
    a {
      font-size: $font-size-default;
      font-weight: $font-weight-medium;
      padding-bottom: $space-slab;
      padding-top: $space-slab;
    }
  }
}

.tabs-title {
  @include margin($zero $space-slab);

  .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;
  }

  &:first-child {
    margin-left: 0;
  }

  &:last-child {
    margin-right: 0;
  }

  &:hover,
  &:focus {
    a {
      color: darken($medium-gray, 20%);
    }
  }

  a {
    @include position(relative, 1px null null null);
    align-items: center;
    border-bottom: 2px solid transparent;
    color: $medium-gray;
    display: flex;
    flex-direction: row;
    font-size: $font-size-small;
    transition: all .15s $ease-in-out-cubic;
  }

  &.is-active {
    a {
      border-bottom-color: $color-woot;
      color: $color-woot;
    }

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