$label-line-height-small-inherited: var(
  --wds-tabs-label-line-height-small,
  var(--wds-font-line-height-body-tiny)
) !default;
$padding-vertical-small: var(
  --wds-tabs-padding-vertical-small,
  var(--wds-space-100)
) !default;
$padding-horizontal-small: var(
  --wds-tabs-padding-horizontal-small,
  var(--wds-space-200)
) !default;
$padding-vertical-small-medium: var(
  --wds-tabs-padding-vertical-small-medium,
  var(--wds-space-150)
) !default;
$padding-horizontal-small-medium: var(
  --wds-tabs-padding-horizontal-small-medium,
  var(--wds-space-300)
) !default;
$padding-vertical-medium: var(
  --wds-tabs-padding-vertical-medium,
  var(--wds-space-175)
) !default;
$padding-horizontal-medium: var(
  --wds-tabs-padding-horizontal-medium,
  var(--wds-space-400)
) !default;
$item-gap-small: var(--wds-tabs-item-gap-small, var(--wds-space-150)) !default;
$item-gap-small-medium: var(
  --wds-tabs-item-gap-small-medium,
  var(--wds-space-150)
) !default;
$item-gap-medium: var(
  --wds-tabs-item-gap-medium,
  var(--wds-space-200)
) !default;
$item-fill-hover: var(
  --wds-tabs-item-fill-hover,
  var(--wds-color-fill-dark-secondary)
) !default;
$item-fill-active: var(
  --wds-tabs-item-fill-active,
  var(--wds-color-black-600)
) !default;
$gap-horizontal: var(--wds-tabs-gap-horizontal, var(--wds-space-100)) !default;
$container-padding-horizontal: var(
  --wds-tabs-container-padding-horizontal,
  var(--wds-space-400)
) !default;
$border-radius: var(
  --wds-tabs-border-radius,
  var(--wds-border-radius-300)
) !default;
$label-font-weight: var(
  --wds-tabs-label-font-weight,
  var(--wds-font-weight-medium)
) !default;
$label-font-weight-active: var(
  --wds-tabs-label-font-weight-active,
  var(--wds-font-weight-semi-bold)
) !default;
$label-fill: var(--wds-tabs-label-fill, var(--wds-color-black-300)) !default;
$label-fill-active: var(
  --wds-tabs-label-fill-active,
  var(--wds-color-text-standard-primary)
) !default;
$label-fill-disabled: var(
  --wds-tabs-label-fill-disabled,
  var(--wds-color-text-disabled)
) !default;
$label-font-size-small: var(
  --wds-tabs-label-font-size-small,
  var(--wds-font-size-body-tiny)
) !default;
$label-line-height-small: var(
  --wds-tabs-label-line-height-small,
  var(--wds-font-line-height-body-tiny)
) !default;
$label-font-size-medium: var(
  --wds-tabs-label-font-size-medium,
  var(--wds-font-size-body-small)
) !default;
$label-line-height-medium: var(
  --wds-tabs-label-line-height-medium,
  var(--wds-font-line-height-body-small)
) !default;
$selection-border: var(
  --wds-tabs-selection-border,
  var(--wds-color-black-100-transparent-0)
) !default;

.tabs {
  & &__tab--size-small &__tab-text {
    --wds-font-line-height-body-small: #{$label-line-height-small-inherited};
  }
  &--size-small {
    font-size: $label-font-size-small;
    line-height: $label-line-height-small;
  }

  &--horizontal-padding {
    padding-left: $container-padding-horizontal;
    padding-right: $container-padding-horizontal;
  }

  &__items-container {
    gap: $gap-horizontal;
  }

  &__tab {
    border-radius: $border-radius;
  }

  @media (hover: hover) {
    &__tab:hover:not(#{&}__tab--active):not(#{&}__tab--disabled) {
      background-color: $item-fill-hover;
    }
  }

  &__tab--size-small {
    padding: $padding-vertical-small $padding-horizontal-small
      calc(#{$padding-vertical-small} - 2px);
    gap: $item-gap-small;
  }

  &__tab--size-small-medium {
    padding: $padding-vertical-small-medium $padding-horizontal-small-medium
      calc(#{$padding-vertical-small-medium} - 2px);
    gap: $item-gap-small-medium;
  }

  &__tab--size-medium {
    padding: $padding-vertical-medium $padding-horizontal-medium
      calc(#{$padding-vertical-medium} - 2px);
    gap: $item-gap-medium;
  }

  &__items-container--type-compact-side &__tab:not(:first-child) {
    margin-left: $padding-horizontal-medium;
  }

  &__items-container--type-compact-side &__tab:not(:last-child) {
    margin-right: $padding-horizontal-medium;
  }

  &__tab#{&}__tab &__tab-text {
    color: $label-fill;
  }

  & &__tab &__tab-text {
    --wds-font-weight-regular: #{$label-font-weight};
  }

  &#{&} &__tab--size-small &__tab-text {
    font-size: $label-font-size-small;
    line-height: $label-line-height-small;
  }

  &#{&} &__tab--size-medium &__tab-text {
    font-size: $label-font-size-medium;
    line-height: $label-line-height-medium;
  }

  & &__tab--active &__tab-text {
    --wds-font-weight-regular: #{$label-font-weight-active};
  }

  @media (hover: hover) {
    &__tab#{&}__tab:hover :is(#{&}__tab-text, #{&}__affix) {
      color: $label-fill-active;
    }
  }

  &__tab#{&}__tab--active :is(#{&}__tab-text, #{&}__affix) {
    color: $label-fill-active;
  }

  &__tab--active {
    border-image-source: $selection-border;
    border-image-slice: 1;
    background: $item-fill-active;
  }

  &__tab#{&}__tab--disabled &__tab-text,
  &__tab#{&}__tab--disabled &__affix {
    color: $label-fill-disabled;
  }

  @media (hover: hover) {
    &__tab#{&}__tab--disabled:hover :is(#{&}__tab-text, #{&}__affix) {
      color: $label-fill-disabled;
    }
  }
}