$label-text-active: var(
  --wds-vertical-tabs-item-label-text-active,
  var(--wds-color-text-primary)
);
$label-disabled: var(
  --wds-vertical-tabs-item-label-disabled,
  var(--wds-color-text-disabled)
);
$icon-fill: var(--wds-vertical-tabs-icon-fill, var(--wds-color-text-primary));
$icon-fill-hover: var(
  --wds-vertical-tabs-icon-fill-hover,
  var(--wds-color-text-primary)
);
$icon-fill-active: var(
  --wds-vertical-tabs-icon-fill-active,
  var(--wds-color-text-standard-primary)
);
$icon-fill-disabled: var(
  --wds-vertical-tabs-icon-fill-disabled,
  var(--wds-color-text-disabled)
);
$fill-neutral: var(
  --wds-vertical-tabs-item-fill-neutral,
  var(--wds-color-fill-surface-neutral)
);
$fill-neutral-hover: var(
  --wds-vertical-tabs-item-fill-neutral-hover,
  var(--wds-color-fill-dark-secondary-hover)
);
$fill-neutral-active: var(
  --wds-vertical-tabs-item-fill-neutral-active,
  var(--wds-color-fill-standard-tertiary-active)
);
$fill-neutral-disabled: var(
  --wds-vertical-tabs-item-fill-neutral-disabled,
  var(--wds-color-fill-surface-neutral)
);
$fill-standard: var(
  --wds-vertical-tabs-item-fill-standard,
  var(--wds-color-fill-standard-tertiary)
);
$fill-standard-hover: var(
  --wds-vertical-tabs-item-fill-standard-hover,
  var(--wds-color-fill-standard-tertiary-hover)
);
$fill-standard-active: var(
  --wds-vertical-tabs-item-fill-standard-active,
  var(--wds-color-fill-standard-tertiary-active)
);
$fill-standard-disabled: var(
  --wds-vertical-tabs-item-fill-standard-disabled,
  var(--wds-color-fill-standard-light-secondary-disabled)
);

.vertical-tabs-icon-item {
  &--skin-neutral {
    background-color: $fill-neutral;
  }

  &--skin-neutral:focus-visible {
    background-color: $fill-neutral-hover;
  }

  @media (hover: hover) {
    &--skin-neutral:hover {
      background-color: $fill-neutral-hover;
    }
  }

  &--skin-neutral#{&}--selected {
    background-color: $fill-neutral-active;
    color: $label-text-active;
  }

  &--skin-neutral#{&}--disabled {
    background-color: $fill-neutral-disabled;
    color: $label-disabled;
  }

  &--skin-standard {
    background-color: $fill-standard;
    color: $icon-fill;
  }

  &--skin-standard:focus-visible {
    background-color: $fill-standard-hover;
    color: $icon-fill-hover;
  }

  @media (hover: hover) {
    &--skin-standard:hover {
      background-color: $fill-standard-hover;
      color: $icon-fill-hover;
    }
  }

  &--skin-standard#{&}--selected {
    background-color: $fill-standard-active;
    color: $icon-fill-active;
  }

  &--skin-standard#{&}--disabled {
    background-color: $fill-standard-disabled;
    color: $icon-fill-disabled;
  }
}