.list-item-select-icon {
  border-radius: var(
    --wds-list-item-select-border-radius,
    var(--wds-border-radius-400)
  );

  & &__content {
    padding: var(
        --wds-list-item-select-icon-padding-vertical-medium,
        var(--wds-space-100, 6px)
      )
      var(
        --wds-list-item-select-icon-padding-horizontal-medium,
        var(--wds-space-300)
      );
  }

  &:not(#{&}--disabled)#{&}--highlighted {
    background-color: var(
      --wds-list-item-select-fill-hover,
      var(--wds-color-fill-dark-secondary)
    );
  }

  &:not(#{&}--disabled):active {
    background-color: var(
      --wds-list-item-select-fill-active,
      var(--wds-color-fill-standard-tertiary)
    );
  }

  &#{&}--disabled {
    background-color: var(
      --wds-list-item-select-fill-disabled,
      var(--wds-color-fill-standard-tertiary)
    );
  }

  &:not(#{&}--disabled)#{&}--selected {
    color: var(
      --wds-list-item-select-active-title,
      var(--wds-color-text-standard-primary)
    );
    background-color: var(
      --wds-list-item-select-active-fill,
      var(--wds-color-black-600)
    );
  }

  &:not(#{&}--disabled)#{&}--selected#{&}--highlighted {
    background-color: var(
      --wds-list-item-select-active-fill-hover,
      var(--wds-color-fill-dark-secondary)
    );
  }

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

  &#{&}--disabled#{&}--selected {
    background-color: var(
      --wds-list-item-select-active-fill-disabled,
      var(--wds-color-fill-standard-tertiary)
    );
  }
}