$border-radius-small: 4px;
$border-radius-large: 6px;

.selector {
  display: flex;
  flex-direction: column;

  @media (hover: hover) {
    &:hover {
      background-color: var(
        --wds-selector-list-item-fill-hover,
        var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B50, #E7F0FF))
      );
    }
  }

  /* Virtual focus state (aria-activedescendant) — local focus ring. Doubled
     root class: the fill must outrank the `:hover` rule above (two classes'
     worth of specificity), as the Stylable `.root:isActive` did. */
  &#{&}--is-active {
    position: relative;
    background-color: var(
      --wds-selector-list-item-fill-focus,
      var(--wds-color-blue-500, var(--wsr-color-B50, #E7F0FF))
    );
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: var(--wds-outline-focus-outer, 3px solid var(--wsr-color-B10, #116DFF));
    outline-offset: -8px;
  }

  &--is-active::before {
    content: '';
    position: absolute;
    inset: 5px;
    pointer-events: none;
    border-radius: inherit;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: var(--wds-outline-focus-inner, 1px solid var(--wsr-color-D80, #FFFFFF));
  }

  &--size-small {
    padding: 6px 18px;
  }

  &--size-medium {
    padding: 12px 30px;
  }

  &--size-small &__image {
    margin-left: 14px;
  }

  &--size-medium &__image {
    margin: 0 8px 0 20px;
  }

  &--show-divider {
    border-bottom: 1px solid
      var(--wds-color-black-600, var(--wsr-color-D60, #DFE5EB));
  }

  @media (hover: hover) {
    &:hover:active {
      background-color: var(
        --wds-selector-list-item-fill-active,
        var(--wds-color-fill-standard-tertiary-active, var(--wsr-color-B30, #A8CAFF))
      );
    }
  }

  &__main-part {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  &__main-part--disabled {
    cursor: default;
  }

  &__titles {
    flex: 1 1 auto;
    overflow: hidden;
    margin-left: 12px;
    display: flex;
    flex-flow: column;
  }

  &__image {
    overflow: hidden;
    flex: 0 0 auto;
  }

  &__image--image-size-tiny {
    width: 24px;
    height: 24px;
  }

  &__image--image-size-tiny#{&}__image--image-shape-rectangular {
    border-radius: $border-radius-small;
  }

  &__image--image-size-small {
    width: 42px;
    height: 42px;
  }

  &__image--image-size-small#{&}__image--image-shape-rectangular {
    border-radius: $border-radius-small;
  }

  &__image--image-size-portrait {
    width: 48px;
    height: 60px;
  }

  &__image--image-size-portrait#{&}__image--image-shape-rectangular {
    border-radius: $border-radius-large;
  }

  &__image--image-size-large {
    width: 60px;
    height: 60px;
  }

  &__image--image-size-large#{&}__image--image-shape-rectangular {
    border-radius: $border-radius-large;
  }

  &__image--image-size-cinema {
    width: 102px;
    height: 60px;
  }

  &__image--image-size-cinema#{&}__image--image-shape-rectangular {
    border-radius: $border-radius-large;
  }

  &__image--image-shape-circle {
    border-radius: 50%;
  }

  &__extra {
    flex: 0 0 auto;
    max-width: 180px;
    margin-left: 18px;
    overflow: hidden;
  }

  &__below-section {
    cursor: default;
  }

  &__progress-bar {
    align-items: center;
    display: flex;
  }

  &__progress-bar-track {
    align-items: center;
    background: white;
    display: flex;
    height: 2px;
    margin-inline-start: 6px;
    width: 108px;
  }

  &__progress-bar-value {
    background: var(--wds-color-blue-100, var(--wsr-color-B10, #116DFF));
    height: 100%;
  }

  &__progress-bar-leftover {
    background: var(--wds-color-blue-400, var(--wsr-color-B40, #D6E6FE));
    height: 100%;
  }
}