$label-text: var(
  --wds-vertical-tabs-item-label-text,
  var(--wds-color-text-standard-secondary)
);
$label-text-active: var(
  --wds-vertical-tabs-item-label-text-active,
  var(--wds-color-text-standard-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-standard-secondary)
);
$icon-fill-hover: var(
  --wds-vertical-tabs-icon-fill-hover,
  var(--wds-color-text-standard-secondary)
);
$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-light: var(
  --wds-vertical-tabs-item-fill-light,
  var(--wds-color-white-transparent-0)
);
$fill-light-hover: var(
  --wds-vertical-tabs-item-fill-light-hover,
  var(--wds-color-fill-dark-tertiary-hover)
);
$fill-light-active: var(
  --wds-vertical-tabs-item-fill-light-active,
  var(--wds-color-fill-dark-tertiary-active)
);
$fill-light-disabled: var(
  --wds-vertical-tabs-item-fill-light-disabled,
  var(--wds-color-white-transparent-0)
);
$fill-neutral: var(
  --wds-vertical-tabs-item-fill-neutral,
  var(--wds-color-white-transparent-0)
);
$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-dark-tertiary-active)
);
$fill-neutral-disabled: var(
  --wds-vertical-tabs-item-fill-neutral-disabled,
  var(--wds-color-white-transparent-0)
);
$fill-standard: var(
  --wds-vertical-tabs-item-fill-standard,
  var(--wds-color-white-transparent-0)
);
$fill-standard-hover: var(
  --wds-vertical-tabs-item-fill-standard-hover,
  var(--wds-color-fill-dark-tertiary-hover)
);
$fill-standard-active: var(
  --wds-vertical-tabs-item-fill-standard-active,
  var(--wds-color-fill-dark-tertiary-active)
);
$fill-standard-disabled: var(
  --wds-vertical-tabs-item-fill-standard-disabled,
  var(--wds-color-white-transparent-0)
);

.vertical-tabs-icon-item {
  color: $label-text;
  background-color: $fill-light;

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

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

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

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

  &--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;
  }

  &--skin-light#{&}--selected#{&}--disabled {
    background-color: $fill-light-active;
  }

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

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