@import "~@cultureamp/kaizen-design-tokens/sass/color";
@import "~@cultureamp/kaizen-component-library/styles/border";
@import "~@cultureamp/kaizen-component-library/styles/color";
@import "~@cultureamp/kaizen-component-library/styles/layout";
@import "~@cultureamp/kaizen-component-library/styles/type";

.container {
  @include ca-margin($bottom: $ca-grid);
  border-bottom: 1px solid $ca-border-color;
  display: flex;
}

.tab {
  @include ca-padding($top: $ca-grid * 0.5, $bottom: $ca-grid * 0.75);
  @include ca-type-ideal-button;
  @include ca-inherit-baseline;
  text-decoration: none;
  color: $kz-color-wisteria-800;
  border-bottom: 4px solid transparent;
  cursor: pointer;

  &:hover {
    color: $kz-color-cluny-500;
    text-decoration: none;
  }
}

.tab + .tab {
  @include ca-margin($start: $ca-grid);
}

.activeTab {
  composes: tab;
  color: $kz-color-cluny-500;
  border-bottom-color: currentColor;
}

.disabledTab {
  composes: tab;
  color: $kz-color-wisteria-300;
  cursor: inherit;

  &:hover {
    color: $kz-color-wisteria-300;
  }
}