.tabs--container {
  display: flex;
}

.tabs--container--with-border {
  @include border-normal-bottom;
}

.tabs {
  @include padding($zero $space-normal);
  border-left-width: 0;
  border-right-width: 0;
  border-top-width: 0;
  display: flex;
  min-width: var(--space-mega);
}

.tabs--with-scroll {
  max-width: calc(100% - 64px);
  overflow: hidden;
  padding: 0 var(--space-smaller);
}

.tabs--scroll-button {
  align-items: center;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  height: auto;
  justify-content: center;
  min-width: var(--space-large);
}

// 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);
  flex-shrink: 0;

  .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: border-color .15s $swift-ease-out-function;
  }

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

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