.list-item-select {
  background-color: var(--wds-list-item-select-fill, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF)));
  display: inline-flex;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--wds-list-item-select-border-radius, var(--wds-border-radius-0, 0));

  @media (hover: hover) {
    &:where(:not(#{&}--hover-highlight-disabled))#{&}--checkbox#{&}--selected:not(#{&}--disabled):hover,
    &:where(:not(#{&}--hover-highlight-disabled)):not(#{&}--disabled):hover {
      background-color: var(--wds-list-item-select-fill-hover, var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B50, #E7F0FF)));
    }
    &:where(:not(#{&}--hover-highlight-disabled))#{&}--selected:not(#{&}--disabled):hover {
      background-color: var(--wds-list-item-select-active-fill-hover, var(--wds-color-fill-standard-primary-hover, var(--wsr-color-B20, #5999FF)));
    }
  }

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

  &:not(#{&}--disabled)#{&}--selected:active {
    background-color: var(--wds-list-item-select-active-fill-active, var(--wds-color-fill-standard-primary-active, var(--wsr-color-B20, #5999FF)));
  }

  &#{&}--selected {
    background-color: var(--wds-list-item-select-active-fill, var(--wds-color-fill-standard-primary, var(--wsr-color-B10, #116DFF)));
  }

  &#{&}--checkbox#{&}--selected {
    background-color: var(--wds-list-item-select-fill, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--disabled {
    pointer-events: none;
    cursor: initial;
  }

  &#{&}--size-medium {
    align-items: center;
  }

  &:where(#{&}--size-medium) {
    min-height: var(--wds-list-item-select-min-height-medium, auto);
  }

  &:not(#{&}--checkbox) {
    padding-inline-start: var(--wds-list-item-select-padding-horizontal-medium, var(--wds-space-300, 18px));
    padding-inline-end: var(--wds-list-item-select-padding-right-medium, var(--wds-space-300, 24px));
  }

  &:not(#{&}--checkbox)#{&}--size-small {
    padding-inline-start: var(--wds-list-item-select-padding-horizontal-small, var(--wds-space-300, 18px));
    padding-inline-end: var(--wds-list-item-select-padding-right-small, var(--wds-space-300, 24px));
  }

  &__full-width-content label {
    margin-inline-start: var(--wds-list-item-select-padding-horizontal-medium, var(--wds-space-300, 18px));
    margin-inline-end: var(--wds-list-item-select-padding-right-medium, var(--wds-space-300, 24px));
  }

  &#{&}--size-small &__full-width-content label {
    margin-inline-start: var(--wds-list-item-select-padding-horizontal-small, var(--wds-space-300, 18px));
    margin-inline-end: var(--wds-list-item-select-padding-right-small, var(--wds-space-300, 24px));
  }

  &__full-width-content,
  &__full-width-content label {
    width: 100%;
  }

  &__texts-wrapper > :not(#{&}__title-wrapper) {
    margin-top: var(--wds-list-item-select-padding-vertical-medium, var(--wds-space-100, 0));
    margin-bottom: var(--wds-list-item-select-padding-vertical-medium, var(--wds-space-100, 0));
    flex-shrink: 0;
    max-width: 30%;
  }

  &#{&}--size-small &__texts-wrapper > :not(#{&}__title-wrapper) {
    margin-top: var(--wds-list-item-select-padding-vertical-small, var(--wds-space-100, 0));
    margin-bottom: var(--wds-list-item-select-padding-vertical-small, var(--wds-space-100, 0));
  }

  &__title-wrapper {
    line-height: initial;
    font-size: initial;
    display: grid;
    margin: var(--wds-list-item-select-padding-vertical-medium, var(--wds-space-100, 6px)) calc(var(--wds-list-item-select-affix-margin, var(--wds-space-100, 6px)) + var(--wds-list-item-select-gap, var(--wds-space-0, 0px)));
  }

  &#{&}--size-small &__title-wrapper {
    margin: var(--wds-list-item-select-padding-vertical-small, var(--wds-space-100, 6px)) calc(var(--wds-list-item-select-affix-margin, var(--wds-space-100, 6px)) + var(--wds-list-item-select-gap, var(--wds-space-0, 0px)));
  }

  &__title-wrapper#{&}__title-wrapper--subtitle {
    margin: var(--wds-list-item-select-padding-vertical-medium, var(--wds-space-100, 9px)) calc(var(--wds-list-item-select-affix-margin, var(--wds-space-100, 6px)) + var(--wds-list-item-select-gap, var(--wds-space-0, 0px)));
  }

  &#{&}--size-small &__title-wrapper#{&}__title-wrapper--subtitle {
    margin: var(--wds-list-item-select-padding-vertical-small, var(--wds-space-100, 9px)) calc(var(--wds-list-item-select-affix-margin, var(--wds-space-100, 6px)) + var(--wds-list-item-select-gap, var(--wds-space-0, 0px)));
  }

  &:not(#{&}--with-prefix) &__title-wrapper,
  &:not(#{&}--with-prefix) &__title-wrapper#{&}__title-wrapper--subtitle {
    margin-inline-start: var(--wds-list-item-select-affix-margin, var(--wds-space-100, 6px));
  }

  &__title-override-wrapper,
  &__subtitle-override-wrapper {
    display: grid;
  }

  &#{&}--size-medium &__title#{&}__title,
  & &__title-override-wrapper .popover .popover__element {
    font-size: var(--wds-list-item-select-label-font-size-medium, var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, 16px)));
    line-height: var(--wds-list-item-select-label-font-line-height-medium, var(--wds-font-line-height-body-medium, var(--wsr-text-line-height-medium, 24px)));
    font-weight: var(--wds-list-item-select-label-font-weight-medium, var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400)));
  }

  &#{&} &__subtitle#{&}__subtitle,
  & &__subtitle-override-wrapper .popover .popover__element {
    font-size: var(--wds-list-item-select-subtitle-font-size-medium, var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px)));
    line-height: var(--wds-list-item-select-subtitle-font-line-height-medium, var(--wds-font-line-height-body-small, var(--wsr-text-line-height-small, 18px)));
    font-weight: var(--wds-list-item-select-subtitle-font-weight-medium, var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400)));
  }

  &#{&}--size-small &__title#{&}__title,
  &#{&}--size-small &__title-override-wrapper .popover .popover__element {
    font-size: var(--wds-list-item-select-label-font-size-small, var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px)));
    line-height: var(--wds-list-item-select-label-font-line-height-small, var(--wds-font-line-height-body-small, var(--wsr-text-line-height-small, 18px)));
  }

  &#{&}#{&}--selected#{&}--size-medium &__title#{&}__title,
  &#{&}--selected#{&}--size-medium &__title-override-wrapper .popover .popover__element {
    font-weight: var(--wds-list-item-select-label-font-weight-active, var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400)));
  }

  &#{&}#{&}--size-small &__subtitle#{&}__subtitle,
  &#{&}--size-small &__subtitle-override-wrapper .popover .popover__element {
    font-size: var(--wds-list-item-select-label-font-size-small, var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px)));
    line-height: var(--wds-list-item-select-label-font-line-height-small, var(--wds-font-line-height-body-small, var(--wsr-text-line-height-small, 18px)));
  }

  @media (hover: hover) {
    &#{&}#{&}--size-medium:hover &__title,
    &#{&}--size-medium:hover &__title-override-wrapper .popover .popover__element {
      font-weight: var(--wds-list-item-select-label-font-weight-medium, var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400)));
    }
  }

  &#{&}:not(#{&}--disabled) &__title {
    color: var(--wds-list-item-select-title, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)));
  }

  &#{&}#{&}--disabled &__title {
    color: var(--wds-list-item-select-title-disabled, var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
  }

  &#{&}--selected:not(#{&}--checkbox) &__title {
    color: var(--wds-list-item-select-active-title, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--selected#{&}--disabled:not(#{&}--checkbox) &__title {
    color: var(--wds-list-item-select-active-title-disabled, var(--wds-color-text-disabled-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &__prefix {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__prefix#{&}__prefix--subtitle {
    margin-inline: 0 var(--wds-list-item-select-prefix-subtitle-margin, var(--wds-space-100, 6px));
  }

  &__suffix {
    pointer-events: all;
    cursor: auto;
    margin-inline: auto 0;
    margin-block: auto;
  }

  &#{&}--size-medium :is(&__suffix#{&}__suffix, &__prefix#{&}__prefix) {
    font-size: var(--wds-list-item-select-label-font-size-medium, var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, 16px)));
    line-height: var(--wds-list-item-select-label-font-line-height-medium, var(--wds-font-line-height-body-medium, var(--wsr-text-line-height-medium, 24px)));
  }

  &#{&}--size-small &__prefix#{&}__prefix {
    font-size: var(--wds-list-item-select-label-font-size-small, var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px)));
    line-height: var(--wds-list-item-select-label-font-line-height-small, var(--wds-font-line-height-body-small, var(--wsr-text-line-height-small, 18px)));
  }

  &#{&}--size-small &__suffix#{&}__suffix {
    font-size: var(--wds-list-item-select-label-font-size-small, var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px)));
    line-height: var(--wds-list-item-select-suffix-font-line-height-small, var(--wds-font-line-height-body-small, var(--wsr-text-line-height-small, 18px)));
  }

  &#{&}:not(#{&}--disabled):not(#{&}--selected) :is(&__subtitle, &__suffix),
  &#{&}:not(#{&}--disabled)#{&}--checkbox :is(&__subtitle, &__suffix) {
    color: var(--wds-list-item-select-subtitle, var(--wds-color-text-placeholder, var(--wsr-color-D40, #868AA5)));
  }

  &#{&}:not(#{&}--disabled) &__suffix#{&}__suffix {
    color: var(--wds-list-item-select-suffix, var(--wds-color-text-placeholder, var(--wsr-color-D40, #868AA5)));
  }

  &#{&}:active:not(#{&}--disabled) &__suffix#{&}__suffix {
    color: var(--wds-list-item-select-suffix-pressed, var(--wds-color-text-placeholder, var(--wsr-color-D40, #868AA5)));
    font-weight: var(--wds-list-item-select-suffix-active-font-weight, var(--wds-font-weight-regular, 400));
  }

  &#{&}#{&}--disabled :is(&__subtitle, &__prefix, &__suffix) {
    color: var(--wds-list-item-select-subtitle-disabled, var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
  }

  &#{&}#{&}--selected:not(#{&}--checkbox) :is(&__subtitle, &__prefix, &__suffix) {
    color: var(--wds-list-item-select-active-subtitle, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}#{&}--selected#{&}--disabled:not(#{&}--checkbox) :is(&__subtitle, &__prefix, &__suffix) {
    color: var(--wds-list-item-select-active-subtitle-disabled, var(--wds-color-text-disabled-light, var(--wsr-color-D80, #FFFFFF)));
  }

  &#{&}--selected#{&}--size-small &__suffix {
    font-weight: var(--wds-list-item-select-suffix-active-font-weight, var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400)));
  }

  &#{&}--selected#{&}--size-medium &__suffix {
    font-weight: var(--wds-list-item-select-suffix-active-font-weight, var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400)));
  }

  @media screen and not (max-width: 490px) {
    &#{&}--checkbox#{&}--selected#{&}--highlighted,
    &#{&}--highlighted {
      background-color: var(--wds-list-item-select-fill-hover, var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B50, #E7F0FF)));
    }
    &#{&}--selected#{&}--highlighted {
      background-color: var(--wds-list-item-select-active-fill-hover, var(--wds-color-fill-standard-primary-hover, var(--wsr-color-B20, #5999FF)));
    }
    &#{&}--selected#{&}--disabled:not(#{&}--checkbox) {
      background-color: var(--wds-list-item-select-active-fill-disabled, var(--wds-color-fill-standard-primary-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
    }
  }

  @media screen and (max-width: 490px) {
    .provider--mobile &:active {
      background-color: var(--wds-list-item-select-active-fill-screen-small, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF)));
    }
    .provider--mobile &:active:not(#{&}--selected):not(#{&}--disabled) &__title {
      color: var(--wds-list-item-select-active-title-screen-small, var(--wds-color-text-primary, var(--wsr-color-B20, #5999FF)));
    }
    .provider--mobile &#{&}:active:not(#{&}--selected):not(#{&}--disabled) :is(&__subtitle, &__prefix, &__suffix) {
      color: var(--wds-list-item-select-active-subtitle-screen-small, var(--wds-color-text-primary, var(--wsr-color-B20, #5999FF)));
    }
    .provider--mobile &#{&}--selected:not(#{&}--checkbox) {
      background-color: var(--wds-list-item-select-active-fill-screen-small, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF)));
    }
    .provider--mobile &#{&}--selected:not(#{&}--checkbox) &__title {
      color: var(--wds-list-item-select-active-title-screen-small, var(--wds-color-text-primary, var(--wsr-color-B20, #5999FF)));
    }
    .provider--mobile &#{&}#{&}--selected:not(#{&}--checkbox) :is(&__subtitle, &__prefix, &__suffix) {
      color: var(--wds-list-item-select-active-subtitle-screen-small, var(--wds-color-text-primary, var(--wsr-color-B20, #5999FF)));
    }
    .provider--mobile &#{&}--selected {
      background-color: var(--wds-list-item-select-active-fill-screen-small, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF)));
    }
    .provider--mobile &#{&}--checkbox#{&}--selected {
      background-color: var(--wds-list-item-select-active-fill-screen-small, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF)));
    }
    .provider--mobile &#{&}--selected:active {
      background-color: var(--wds-list-item-select-active-fill-active-screen-small, var(--wds-color-fill-standard-tertiary-active, var(--wsr-color-B20, #5999FF)));
    }
    .provider--mobile &#{&}--selected#{&}--disabled {
      background-color: var(--wds-list-item-select-fill, var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF)));
    }
    .provider--mobile &#{&}--selected#{&}--disabled &__title {
      color: var(--wds-list-item-select-active-title-disabled-screen-small, var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
    }
    .provider--mobile &#{&}#{&}--selected#{&}--disabled :is(&__subtitle, &__prefix, &__suffix) {
      color: var(--wds-list-item-select-active-subtitle-disabled-screen-small, var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30))));
    }
  }
}