$label-line-height-small-inherited: var(
  --wds-tabs-label-line-height-small,
  var(--wds-font-line-height-body-tiny)
);
$label-line-height-small-medium-inherited: var(
  --wds-tabs-label-line-height-small-medium,
  var(--wds-font-line-height-body-tiny)
);
$padding-vertical-small: var(
  --wds-tabs-padding-vertical-small,
  var(--wds-space-300)
);
$padding-horizontal-small: var(
  --wds-tabs-padding-horizontal-small,
  var(--wds-space-300)
);
$padding-vertical-small-medium: var(
  --wds-tabs-padding-vertical-small-medium,
  var(--wds-space-300)
);
$padding-horizontal-small-medium: var(
  --wds-tabs-padding-horizontal-small-medium,
  var(--wds-space-300)
);
$padding-vertical-medium: var(
  --wds-tabs-padding-vertical-medium,
  var(--wds-space-400)
);
$padding-horizontal-medium: var(
  --wds-tabs-padding-horizontal-medium,
  var(--wds-space-400)
);
$item-gap-small: var(--wds-tabs-item-gap-small, var(--wds-space-150));
$item-gap-small-medium: var(
  --wds-tabs-item-gap-small-medium,
  var(--wds-space-150)
);
$item-gap-medium: var(--wds-tabs-item-gap-medium, var(--wds-space-200));
$label-font-size-small: var(
  --wds-tabs-label-font-size-small,
  var(--wds-font-size-body-small)
);
$label-line-height-small: var(
  --wds-tabs-label-line-height-small,
  var(--wds-font-line-height-body-tiny)
);
$label-font-size-small-medium: var(
  --wds-tabs-label-font-size-small-medium,
  var(--wds-font-size-body-small)
);
$label-line-height-small-medium: var(
  --wds-tabs-label-line-height-small-medium,
  var(--wds-font-line-height-body-tiny)
);

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

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

  &--size-small-medium {
    font-size: $label-font-size-small-medium;
    line-height: $label-line-height-small-medium;
  }

  &__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--size-small &__tab-text {
    font-size: $label-font-size-small;
    line-height: $label-line-height-small;
  }

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