$label-text: var(
  --wds-vertical-tabs-item-label-text,
  var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624))
);
$label-text-active: var(
  --wds-vertical-tabs-item-label-text-active,
  var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624))
);
$label-disabled: var(
  --wds-vertical-tabs-item-label-disabled,
  var(--wds-color-text-disabled, #0006244d)
);
$icon-fill: var(
  --wds-vertical-tabs-icon-fill,
  var(--wds-color-text-primary, #116dff)
);
$icon-fill-hover: var(
  --wds-vertical-tabs-icon-fill-hover,
  var(--wds-color-text-primary, #116dff)
);
$icon-fill-active: var(
  --wds-vertical-tabs-icon-fill-active,
  var(--wds-color-text-standard-primary, #000624)
);
$icon-fill-disabled: var(
  --wds-vertical-tabs-icon-fill-disabled,
  var(--wds-color-text-disabled, #0006244d)
);
$fill-light: var(
  --wds-vertical-tabs-item-fill-light,
  var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #ffffff))
);
$fill-light-hover: var(
  --wds-vertical-tabs-item-fill-light-hover,
  var(--wds-color-fill-standard-tertiary-hover, #e7f0ff)
);
$fill-light-active: var(
  --wds-vertical-tabs-item-fill-light-active,
  var(--wds-color-fill-standard-tertiary-active, #d6e6fe)
);
$fill-light-disabled: var(
  --wds-vertical-tabs-item-fill-light-disabled,
  var(
    --wds-color-fill-standard-tertiary-disabled,
    var(--wsr-color-D80, #ffffff)
  )
);
$fill-neutral: var(
  --wds-vertical-tabs-item-fill-neutral,
  var(--wds-color-fill-surface-neutral, #f6f7f9)
);
$fill-neutral-hover: var(
  --wds-vertical-tabs-item-fill-neutral-hover,
  var(--wds-color-fill-standard-tertiary-hover, #e7f0ff)
);
$fill-neutral-active: var(
  --wds-vertical-tabs-item-fill-neutral-active,
  var(--wds-color-fill-standard-tertiary-active, #d6e6fe)
);
$fill-neutral-disabled: var(
  --wds-vertical-tabs-item-fill-neutral-disabled,
  var(--wds-color-fill-surface-neutral, #f6f7f9)
);
$fill-standard: var(
  --wds-vertical-tabs-item-fill-standard,
  var(--wds-color-fill-standard-tertiary-hover, #e7f0ff)
);
$fill-standard-hover: var(
  --wds-vertical-tabs-item-fill-standard-hover,
  var(--wds-color-fill-standard-tertiary-active, var(--wsr-color-B40, #d6e6fe))
);
$fill-standard-active: var(
  --wds-vertical-tabs-item-fill-standard-active,
  var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #ffffff))
);
$fill-standard-disabled: var(
  --wds-vertical-tabs-item-fill-standard-disabled,
  var(--wds-color-fill-standard-light-secondary-disabled, #e7f0ff)
);
$padding-small: var(
    --wds-vertical-tabs-item-padding-vertical-small,
    var(--wds-space-200, 12px)
  )
  var(
    --wds-vertical-tabs-icon-padding-horizontal-small,
    var(--wds-space-200, 12px)
  );
$padding-medium: var(
    --wds-vertical-tabs-item-padding-vertical-medium,
    var(--wds-space-200, 12px)
  )
  var(
    --wds-vertical-tabs-icon-padding-horizontal-medium,
    var(--wds-space-200, 12px)
  );

.vertical-tabs-icon-item {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* stylelint-disable-next-line plugin/use-baseline */
  outline: none;
  border: none;
  color: $label-text;
  background-color: $fill-light;

  &--size-small,
  &--size-tiny {
    width: 18px;
    height: 18px;
    padding: $padding-small;
  }

  &--size-medium {
    width: 24px;
    height: 24px;
    padding: $padding-medium;
  }

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

  &--disabled {
    pointer-events: none;
  }
}