@import '../common.scss';
@import '../typography-helpers';

.container {
  @include Text($weight: normal, $size: medium);
  display: flex;
  max-width: 100%;
  border-bottom: 1px solid transparent;
}

.itemsContainer {
  min-width: 628px;
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tab {
  position: relative;
  padding: 18px 18px 16px;
  margin: 0 0 -1px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;

  .compact & {
    $side-padding: 0;
    padding-right: $side-padding;
    padding-left: $side-padding;

    $side-margin: 30px;
    margin-right: $side-margin;
    margin-left: $side-margin;
  }

  .uniformFull & {
    flex: 1;
  }

  .compactSide & {
    $side-padding: 0;
    padding-left: $side-padding;
    padding-right: $side-padding;

    $side-margin: 18px;

    &:not(:first-child) {
      margin-left: $side-margin;
    }

    &:not(:last-child) {
      margin-right: $side-margin;
    }
  }

  &:hover {
    @include TextColor($link: true);
  }
}

.active {
  @include TextColor($link: true);
  border-color: $B10;
}

.hasDivider {
  border-color: $D60;
}

.sideContent {
  max-width: 314px;
  overflow: hidden;
  margin-left: 24px;
  flex-shrink: 0;
}