.tabs--container {
  display: flex;
}

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

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

.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: var(--font-size-default);
      font-weight: var(--font-weight-medium);
      padding-bottom: var(--space-slab);
      padding-top: var(--space-slab);
    }
  }
}

.tabs-title {
  flex-shrink: 0;
  margin: 0 var(--space-small);

  .badge {
    background: var(--color-background);
    border-radius: var(--space-small);
    color: var(--color-gray);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-black);
    margin: 0 var(--space-smaller);
    padding: var(--space-smaller);
  }

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

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

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

  a {
    align-items: center;
    border-bottom: 2px solid transparent;
    color: $medium-gray;
    display: flex;
    flex-direction: row;
    font-size: var(--font-size-small);
    position: relative;
    top: 1px;
    transition: border-color 0.15s $swift-ease-out-function;
  }

  &.is-active {
    a {
      border-bottom-color: var(--color-woot);
      color: var(--color-woot);
    }

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