.list-item-action {
  overflow: hidden;
  display: inline-flex;
  padding: var(--wds-list-item-action-padding-vertical-medium, var(--wds-space-200)) var(--wds-list-item-action-padding-horizontal-end-medium, var(--wds-space-300)) var(--wds-list-item-action-padding-vertical-medium, var(--wds-space-200)) var(--wds-list-item-action-padding-horizontal-medium, var(--wds-space-200));
  width: 100%;
  align-items: center;
  background-color: var(--wds-list-item-action-fill, var(--wds-color-fill-standard-tertiary));
  cursor: pointer;
  text-align: start;
  /* stylelint-disable-next-line plugin/use-baseline */
  outline: none;
  border: none;
  border-radius: var(--wds-list-item-action-border-radius, var(--wds-border-radius-400));
  text-decoration: none;

  &__text-box {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    margin-inline-start: var(--wds-list-item-action-affix-margin, var(--wds-space-100));
    margin-inline-end: calc(var(--wds-list-item-action-affix-margin, var(--wds-space-100)) + var(--wds-list-item-action-gap, var(--wds-space-50)));
  }

  &#{&}--with-prefix-icon &__text-box {
    margin-inline-start: calc(var(--wds-list-item-action-affix-margin, var(--wds-space-100)) + var(--wds-list-item-action-gap, var(--wds-space-50)));
  }

  &#{&}--with-suffix-icon &__text-box {
    margin-inline-end: calc(var(--wds-list-item-action-affix-margin, var(--wds-space-100)) + var(--wds-list-item-action-gap, var(--wds-space-50)));
  }

  & &__text-overrides {
    --wds-font-weight-regular: var(--wds-list-item-action-title-font-weight, var(--wds-font-weight-medium));
  }

  & &__text-overrides#{&}__text-overrides--size-small {
    --wds-font-size-body-small: var(--wds-list-item-action-label-font-size-small, var(--wds-font-size-body-tiny));
    --wds-font-line-height-body-small: var(--wds-list-item-action-label-font-line-height-small, var(--wsr-text-line-height-small, 18px));
  }

  & &__text-overrides#{&}__text-overrides--size-medium {
    --wds-font-size-body-medium: var(--wds-list-item-action-label-font-size-medium, var(--wds-font-size-body-small));
    --wds-font-line-height-body-medium: var(--wds-list-item-action-label-font-line-height-medium, var(--wsr-text-line-height-medium, 24px));
  }

  &__subtitle-overrides {
    --wds-font-size-body-small: var(--wds-list-item-action-subtitle-font-size, var(--wds-font-size-body-tiny));
    --wds-font-line-height-body-small: var(--wds-list-item-action-subtitle-font-line-height, var(--wds-font-line-height-body-tiny));
  }

  &#{&}--size-medium &__subtitle-overrides {
    margin-block-start: var(--wds-list-item-action-subtitle-offset, -2px);
  }

  &__suffix-box {
    display: flex;
    flex: 0 0 auto;
    max-width: 30%;
    margin-inline-start: var(--wds-space-100, 6px);
  }

  &__suffix {
    display: flex;
    align-items: center;
  }

  &__suffix-icon {
    flex: 0 0 auto;
    margin-inline-start: var(--wds-space-100, 6px);
  }

  &__suffix-icon#{&}__suffix-icon--subtitle {
    margin-block-end: auto;
  }

  &#{&}--ellipsis &__text-box {
    overflow: hidden;
  }

  &#{&}#{&}--skin-standard :is(&__suffix#{&}__suffix, &__suffix-icon) {
    color: var(--wds-list-item-action-suffix-fill, var(--wds-color-text-standard-primary));
  }

  &#{&}--skin-destructive :is(&__text, &__prefix-icon, &__suffix-icon) {
    color: var(--wds-color-text-destructive, var(--wsr-color-R10, #E62214));
  }

  &#{&}--skin-premium :is(&__text, &__prefix-icon, &__suffix-icon) {
    color: var(--wds-color-text-premium, var(--wsr-color-P10, #9A27D5));
  }

  &#{&}--skin-primary :is(&__text, &__prefix-icon, &__suffix-icon) {
    color: var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF));
  }

  &#{&}--skin-destructive :is(&__subtitle#{&}__subtitle, &__suffix#{&}__suffix) {
    color: var(--wds-color-text-placeholder, var(--wsr-color-D40, #868AA5));
  }

  &#{&}#{&}--skin-standard:not(#{&}--disabled) :is(&__text, &__prefix-icon, &__suffix-icon) {
    color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
  }

  &#{&}--skin-dark :is(&__text, &__prefix-icon) {
    color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
  }

  &#{&}--size-small {
    padding: var(--wds-list-item-action-padding-vertical-small, var(--wds-space-200)) var(--wds-list-item-action-padding-horizontal-end-small, var(--wds-space-300)) var(--wds-list-item-action-padding-vertical-small, var(--wds-space-200)) var(--wds-list-item-action-padding-horizontal-small, var(--wds-space-200));
  }

  &#{&}--disabled {
    cursor: default;
    color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)));
  }

  &#{&}#{&}--skin-standard#{&}--disabled :is(&__text, &__subtitle#{&}__subtitle, &__prefix-icon, &__suffix#{&}__suffix, &__suffix-icon) {
    color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)));
  }

  &#{&}--skin-destructive#{&}--disabled :is(&__text, &__subtitle#{&}__subtitle, &__prefix-icon, &__suffix#{&}__suffix, &__suffix-icon) {
    color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)));
  }

  &#{&}--skin-premium#{&}--disabled :is(&__text, &__subtitle#{&}__subtitle, &__prefix-icon, &__suffix#{&}__suffix, &__suffix-icon) {
    color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)));
  }

  &#{&}--skin-primary#{&}--disabled :is(&__text, &__subtitle#{&}__subtitle, &__prefix-icon, &__suffix#{&}__suffix, &__suffix-icon) {
    color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)));
  }

  &#{&}--skin-dark#{&}--disabled :is(&__text, &__prefix-icon, &__suffix-icon) {
    color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)));
  }

  @media (hover: hover) {
    &:where(:not(#{&}--hover-highlight-disabled))#{&}--skin-standard:not(#{&}--disabled):hover {
      background-color: var(--wds-list-item-action-fill-hover, var(--wds-color-black-700));
    }
    &#{&}:where(:not(#{&}--hover-highlight-disabled))#{&}--skin-standard:not(#{&}--disabled):hover :is(&__text, &__prefix-icon, &__suffix-icon) {
      color: var(--wds-color-text-standard-primary, var(--wsr-color-B10, #116DFF));
    }
    &:where(:not(#{&}--hover-highlight-disabled))#{&}--skin-destructive:not(#{&}--disabled):hover {
      background-color: var(--wds-list-item-action-fill-hover-destructive, var(--wds-color-fill-destructive-tertiary-hover, var(--wsr-color-R60, #FDECEB)));
    }
    &:where(:not(#{&}--hover-highlight-disabled))#{&}--skin-destructive:not(#{&}--disabled):hover :is(&__text, &__prefix-icon, &__suffix-icon) {
      color: var(--wds-list-item-action-label-fill-hover-destructive, var(--wds-color-red-0));
    }
    &:where(:not(#{&}--hover-highlight-disabled))#{&}--skin-destructive:not(#{&}--disabled):hover :is(&__subtitle#{&}__subtitle, &__suffix#{&}__suffix) {
      color: var(--wds-list-item-action-subtitle-destructive, var(--wds-color-text-placeholder, var(--wsr-color-D40, #868AA5)));
    }
    &:where(:not(#{&}--hover-highlight-disabled))#{&}--skin-premium:not(#{&}--disabled):hover {
      background-color: var(--wds-color-fill-premium-tertiary-hover, var(--wsr-color-P60, #F7EDFC));
    }
    &:where(:not(#{&}--hover-highlight-disabled))#{&}--skin-premium:not(#{&}--disabled):hover :is(&__text, &__prefix-icon, &__suffix-icon) {
      color: var(--wds-list-item-action-label-fill-hover-premium, var(--wds-color-blue-50));
    }
    &:where(:not(#{&}--hover-highlight-disabled))#{&}--skin-primary:not(#{&}--disabled):hover :is(&__text, &__prefix-icon, &__suffix-icon) {
      color: var(--wds-list-item-action-label-fill-hover-primary, var(--wds-color-blue-50));
    }
    &:where(:not(#{&}--hover-highlight-disabled))#{&}--skin-dark:not(#{&}--disabled):hover {
      background-color: var(--wds-list-item-action-fill-hover, var(--wds-color-black-700));
    }
    &:where(:not(#{&}--hover-highlight-disabled))#{&}--skin-primary:not(#{&}--disabled):hover {
      background-color: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B50, #E7F0FF));
    }
    &:where(:not(#{&}--hover-highlight-disabled))#{&}--skin-dark:not(#{&}--disabled):hover :is(&__text, &__prefix-icon, &__suffix-icon) {
      color: var(--wds-color-text-standard-primary, var(--wsr-color-B10, #116DFF));
    }
    &:where(:not(#{&}--hover-highlight-disabled)):not(#{&}--disabled):hover &__text-overrides {
      --wds-font-weight-regular: var(--wds-list-item-action-title-font-weight-active, var(--wds-font-weight-medium));
    }
  }

  &#{&}--skin-standard:not(#{&}--disabled):active {
    background-color: var(--wds-list-item-action-fill-active, var(--wds-color-black-600));
  }

  &#{&}#{&}--skin-standard:not(#{&}--disabled):active :is(&__text, &__prefix-icon, &__suffix-icon) {
    color: var(--wds-list-item-action-label-fill-active, var(--wds-color-text-standard-primary));
  }

  &#{&}#{&}--skin-standard:not(#{&}--disabled):active :is(&__subtitle#{&}__subtitle, &__suffix#{&}__suffix) {
    color: var(--wds-list-item-action-subtitle-fill-active, var(--wsr-color-D40, #868AA5));
  }

  &#{&}#{&}--skin-standard:not(#{&}--disabled):active :is(&__suffix#{&}__suffix, &__suffix-icon) {
    color: var(--wds-list-item-action-suffix-fill-active, var(--wds-color-text-standard-primary));
  }

  &#{&}--skin-destructive:not(#{&}--disabled):active {
    background-color: var(--wds-color-fill-destructive-tertiary-active, var(--wsr-color-R60, #FDECEB));
  }

  &#{&}--skin-destructive:not(#{&}--disabled):active :is(&__text, &__prefix-icon, &__suffix-icon) {
    color: var(--wds-list-item-action-label-fill-pressed-destructive, var(--wds-color-red-0));
  }

  &#{&}--skin-destructive:not(#{&}--disabled):active :is(&__subtitle#{&}__subtitle, &__suffix#{&}__suffix) {
    color: var(--wds-list-item-action-subtitle-fill-pressed-destructive, var(--wds-color-black-300));
  }

  &#{&}--skin-premium:not(#{&}--disabled):active {
    background-color: var(--wds-color-fill-premium-tertiary-active, var(--wsr-color-P60, #F7EDFC));
  }

  &#{&}--skin-premium:not(#{&}--disabled):active :is(&__text, &__prefix-icon, &__suffix-icon) {
    color: var(--wds-list-item-action-label-fill-pressed-premium, var(--wds-color-blue-50));
  }

  &#{&}--skin-primary:not(#{&}--disabled):active {
    background-color: var(--wds-color-fill-standard-tertiary-active, var(--wsr-color-B50, #E7F0FF));
  }

  &#{&}--skin-primary:not(#{&}--disabled):active :is(&__text, &__prefix-icon, &__suffix-icon) {
    color: var(--wds-list-item-action-label-fill-pressed-primary, var(--wds-color-blue-50));
  }

  &#{&}--skin-standard#{&}--highlighted,
  &#{&}--skin-dark#{&}--highlighted {
    background-color: var(--wds-list-item-action-fill-hover, var(--wds-color-black-700));
  }

  &#{&}#{&}--skin-standard#{&}--highlighted :is(&__text, &__prefix-icon, &__suffix-icon),
  &#{&}--skin-dark#{&}--highlighted :is(&__text, &__prefix-icon, &__suffix-icon) {
    color: var(--wds-color-text-standard-primary, var(--wsr-color-B10, #116DFF));
  }

  &#{&}--skin-destructive#{&}--highlighted {
    background-color: var(--wds-color-fill-destructive-tertiary-hover, var(--wsr-color-R60, #FDECEB));
  }

  &#{&}--skin-premium#{&}--highlighted {
    background-color: var(--wds-color-fill-premium-tertiary-hover, var(--wsr-color-P60, #F7EDFC));
  }

  &#{&}--skin-primary#{&}--highlighted {
    background-color: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
  }

  @media screen and (max-width: 490px) {
    .provider--mobile &#{&}--skin-standard#{&}--highlighted,
    .provider--mobile &#{&}--skin-premium#{&}--highlighted,
    .provider--mobile &#{&}--skin-primary#{&}--highlighted,
    .provider--mobile &#{&}--skin-dark#{&}--highlighted,
    .provider--mobile &#{&}--skin-destructive#{&}--highlighted {
      background-color: var(--wds-list-item-action-fill, var(--wds-color-fill-standard-tertiary));
    }
    .provider--mobile &#{&}--skin-dark#{&}--highlighted :is(&__text, &__prefix-icon, &__suffix-icon),
    .provider--mobile &#{&}#{&}--skin-standard#{&}--highlighted :is(&__text, &__prefix-icon, &__suffix-icon) {
      color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
    }
  }
}