$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-light-premium: var(
  --wds-vertical-tabs-item-fill-light-premium,
  var(--wds-color-white-transparent-0)
);
$fill-light-premium-hover: var(
  --wds-vertical-tabs-item-fill-light-premium-hover,
  var(--wds-color-fill-premium-tertiary-hover)
);
$fill-light-premium-active: var(
  --wds-vertical-tabs-item-fill-light-premium-active,
  var(--wds-color-fill-premium-tertiary-active)
);
$fill-light-premium-disabled: var(
  --wds-vertical-tabs-item-fill-light-premium-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-neutral-premium: var(
  --wds-vertical-tabs-item-fill-neutral-premium,
  var(--wds-color-white-transparent-0)
);
$fill-neutral-premium-hover: var(
  --wds-vertical-tabs-item-fill-neutral-premium-hover,
  var(--wds-color-fill-premium-light-primary-hover)
);
$fill-neutral-premium-active: var(
  --wds-vertical-tabs-item-fill-neutral-premium-active,
  var(--wds-color-fill-premium-tertiary-active)
);
$fill-neutral-premium-disabled: var(
  --wds-vertical-tabs-item-fill-neutral-premium-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)
);
$fill-standard-premium: var(
  --wds-vertical-tabs-item-fill-standard-premium,
  var(--wds-color-white-transparent-0)
);
$fill-standard-premium-hover: var(
  --wds-vertical-tabs-item-fill-standard-premium-hover,
  var(--wds-color-fill-standard-tertiary-hover)
);
$fill-standard-premium-active: var(
  --wds-vertical-tabs-item-fill-standard-premium-active,
  var(--wds-color-fill-standard-tertiary-active)
);
$fill-standard-premium-disabled: var(
  --wds-vertical-tabs-item-fill-standard-premium-disabled,
  var(--wds-color-white-transparent-0)
);
$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-text-premium: var(
  --wds-vertical-tabs-item-label-text-premium,
  var(--wds-color-text-premium)
);
$label-text-premium-active: var(
  --wds-vertical-tabs-item-label-text-premium-active,
  var(--wds-color-text-premium)
);
$label-disabled: var(
  --wds-vertical-tabs-item-label-disabled,
  var(--wds-color-text-disabled)
);
$label-font-weight: var(
  --wds-vertical-tabs-item-label-font-weight,
  var(--wds-font-weight-medium)
);
$label-font-weight-active: var(
  --wds-vertical-tabs-item-label-font-weight-active,
  var(--wds-font-weight-semi-bold)
);
$gaps-vertical: var(--wds-vertical-tabs-gaps-vertical, var(--wds-space-50));
$gaps-horizontal: var(
  --wds-vertical-tabs-gaps-horizontal,
  var(--wds-space-300)
);
$action-radius: var(
  --wds-vertical-tabs-action-radius,
  var(--wds-border-radius-400)
);
$pad-v-medium: var(
  --wds-vertical-tabs-item-padding-vertical-medium,
  var(--wds-space-200)
);
$pad-h-medium: var(--wds-vertical-tabs-item-padding-horizontal-medium, 30px);
$pad-v-small: var(
  --wds-vertical-tabs-item-padding-vertical-small,
  var(--wds-space-200)
);
$pad-h-small: var(
  --wds-vertical-tabs-item-padding-horizontal-small,
  var(--wds-space-300)
);
$pad-h-small-suffix: var(
  --wds-vertical-tabs-item-padding-horizontal-small,
  var(--wds-space-300)
);
$pad-v-tiny: var(
  --wds-vertical-tabs-item-padding-vertical-tiny,
  var(--wds-space-100)
);
$pad-h-tiny: var(
  --wds-vertical-tabs-item-padding-horizontal-tiny,
  var(--wds-space-300)
);
$offset-medium: var(
  --wds-vertical-tabs-item-padding-horizontal-medium-offset,
  24px
);
$offset-small: var(
  --wds-vertical-tabs-item-padding-horizontal-small-offset,
  9px
);
$offset-tiny: var(
  --wds-vertical-tabs-item-padding-horizontal-tiny-offset,
  10px
);
$title-pt-medium: var(
  --wds-vertical-tabs-section-title-padding-top-medium,
  var(--wds-space-600)
);
$title-pt-small: var(
  --wds-vertical-tabs-section-title-padding-top-small,
  var(--wds-space-400)
);
$title-pt-tiny: var(
  --wds-vertical-tabs-section-title-padding-top-tiny,
  var(--wds-space-100)
);

.vertical-tabs-item {
  background-color: $fill-light;
  padding: $gaps-vertical $gaps-horizontal;
  pointer-events: none;

  &:focus-visible {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
  }

  & &__item {
    border-radius: $action-radius;
  }

  &__item {
    display: flex;
    padding: $pad-v-medium $pad-h-medium;
    align-items: center;
    background-color: $fill-light;
    cursor: pointer;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
    border: none;
    pointer-events: auto;
  }

  &__item--size-tiny {
    padding: $pad-v-tiny $pad-h-tiny;
  }

  &__item--size-small {
    padding: $pad-v-small $pad-h-small;
  }

  &__item--kind-title {
    cursor: default;
    padding-top: $title-pt-medium;
  }

  &__item--size-tiny#{&}__item--kind-title {
    padding-top: $title-pt-tiny;
  }

  &__item--size-small#{&}__item--kind-title {
    padding-top: $title-pt-small;
  }

  &__item--size-tiny#{&}__item--kind-title,
  &__item--size-small#{&}__item--kind-title {
    height: 18px;
  }

  &__item--kind-selectable#{&}__item--skin-premium,
  &--skin-premium {
    background-color: $fill-light-premium;
  }

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

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

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

    &__item--kind-selectable#{&}__item--skin-premium:hover {
      background-color: $fill-light-premium-hover;
    }
  }

  &__item--kind-selectable#{&}__item--selected {
    background-color: $fill-light-active;
  }

  &__item--kind-selectable#{&}__item--selected#{&}__item--skin-premium {
    background-color: $fill-light-premium-active;
  }

  &__item--kind-selectable#{&}__item--disabled {
    pointer-events: none;
    background-color: $fill-light-disabled;
  }

  &__item--kind-selectable#{&}__item--disabled#{&}__item--selected {
    background-color: $fill-light-active;
  }

  &__item--kind-selectable#{&}__item--disabled#{&}__item--skin-premium {
    background-color: $fill-light-premium-disabled;
  }

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

  &__item--base-skin-neutral,
  &--base-skin-neutral {
    background-color: $fill-neutral;
  }

  &__item--base-skin-neutral#{&}__item--kind-selectable#{&}__item--skin-premium {
    background-color: $fill-neutral-premium;
  }

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

  &#{&}--base-skin-neutral#{&}--skin-premium:focus-visible &__item {
    background-color: $fill-neutral-premium-hover;
  }

  @media (hover: hover) {
    &__item--base-skin-neutral#{&}__item--kind-selectable:hover {
      background-color: $fill-neutral-hover;
    }

    &__item--base-skin-neutral#{&}__item--kind-selectable#{&}__item--skin-premium:hover {
      background-color: $fill-neutral-premium-hover;
    }
  }

  &__item--base-skin-neutral#{&}__item--kind-selectable#{&}__item--selected {
    background-color: $fill-neutral-active;
  }

  &__item#{&}__item--base-skin-neutral#{&}__item--kind-selectable#{&}__item--skin-premium#{&}__item--selected {
    background-color: $fill-neutral-premium-active;
  }

  &__item--base-skin-neutral#{&}__item--kind-selectable#{&}__item--disabled {
    background-color: $fill-neutral-disabled;
  }

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

  &__item#{&}__item--base-skin-neutral#{&}__item--kind-selectable#{&}__item--disabled#{&}__item--skin-premium {
    background-color: $fill-neutral-premium-disabled;
  }

  &__item#{&}__item--base-skin-neutral#{&}__item--kind-selectable#{&}__item--disabled#{&}__item--selected#{&}__item--skin-premium {
    background-color: $fill-neutral-premium-active;
  }

  &__item--base-skin-standard#{&}__item--kind-selectable {
    background-color: $fill-standard;
  }

  &__item--base-skin-standard#{&}__item--kind-selectable#{&}__item--skin-premium {
    background-color: $fill-standard-premium;
  }

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

  &#{&}--base-skin-standard#{&}--skin-premium:focus-visible &__item {
    background-color: $fill-standard-premium-hover;
  }

  @media (hover: hover) {
    &__item--base-skin-standard#{&}__item--kind-selectable:hover {
      background-color: $fill-standard-hover;
    }

    &__item--base-skin-standard#{&}__item--kind-selectable#{&}__item--skin-premium:hover {
      background-color: $fill-standard-premium-hover;
    }
  }

  &__item--base-skin-standard#{&}__item--kind-selectable#{&}__item--selected {
    background-color: $fill-standard-active;
  }

  &__item#{&}__item--base-skin-standard#{&}__item--kind-selectable#{&}__item--skin-premium#{&}__item--selected {
    background-color: $fill-standard-premium-active;
  }

  &__item--base-skin-standard#{&}__item--kind-selectable#{&}__item--disabled,
  &--base-skin-standard#{&}--disabled {
    background-color: $fill-standard-disabled;
  }

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

  &__item#{&}__item--base-skin-standard#{&}__item--kind-selectable#{&}__item--disabled#{&}__item--skin-premium {
    background-color: $fill-standard-premium-disabled;
  }

  &__item#{&}__item--base-skin-standard#{&}__item--kind-selectable#{&}__item--disabled#{&}__item--selected#{&}__item--skin-premium {
    background-color: $fill-standard-premium-active;
  }

  &__text {
    margin-right: auto;
  }

  &__item--kind-title &__text {
    color: var(
      --wds-color-text-placeholder,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
  }

  &__item#{&}__item--kind-selectable &__text {
    color: $label-text;
  }

  &#{&} &__item--kind-selectable &__text {
    font-weight: $label-font-weight;
  }

  &__item#{&}__item--kind-selectable#{&}__item--selected &__text {
    color: $label-text-active;
  }

  &#{&} &__item--kind-selectable#{&}__item--selected &__text {
    font-weight: $label-font-weight-active;
  }

  &__item#{&}__item--kind-selectable#{&}__item--skin-premium &__text {
    color: $label-text-premium;
  }

  &__item#{&}__item--kind-selectable#{&}__item--skin-premium#{&}__item--selected &__text {
    color: $label-text-premium-active;
  }

  &__item#{&}__item--kind-selectable#{&}__item--disabled &__text,
  &__item#{&}__item--kind-selectable#{&}__item--skin-premium#{&}__item--disabled &__text {
    color: $label-disabled;
  }

  &__text-button {
    margin-right: auto;
  }

  &__prefix-icon {
    margin-right: var(--wds-space-100, 6px);
    margin-left: calc((#{$pad-h-medium} * -1) + #{$offset-medium});
    color: $label-text;
  }

  &__item--size-tiny &__prefix-icon {
    margin-left: calc((#{$pad-h-tiny} * -1) + #{$offset-tiny});
  }

  &__item--size-small &__prefix-icon {
    margin-left: calc((#{$pad-h-small} * -1) + #{$offset-small});
  }

  &__suffix-icon {
    margin-left: var(--wds-space-100, 6px);
    margin-right: calc((#{$pad-h-medium} * -1) + 6px);
    color: $label-text;
  }

  &__item--size-tiny &__suffix-icon {
    margin-right: calc((#{$pad-h-tiny} * -1) + 6px);
  }

  &__item--size-small &__suffix-icon {
    margin-right: calc((#{$pad-h-small-suffix} * -1) + 6px);
  }

  &__prefix-icon,
  &__suffix-icon {
    flex-shrink: 0;
  }

  &__prefix-icon--action {
    color: var(
      --wds-color-fill-standard-primary,
      var(--wsr-color-B10, #116dff)
    );
  }
}