$dark-background: #23263c;
$dark-hovered: #2e3149;
$dark-selected: #3b3f57;
$white: var(--wds-color-white, var(--wsr-color-D80, #ffffff));
$light-text: var(--wds-color-black-200, var(--wsr-color-D20, #333853));
$light-selected-text: var(--wds-color-blue-0, var(--wsr-color-B00, #084ebd));
$light-selected: var(--wds-color-blue-400, var(--wsr-color-B40, #d6e6fe));
$light-hovered: var(--wds-color-blue-500, var(--wsr-color-B50, #e7f0ff));

.sidebar-section-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 0 20px;
  width: 100%;
  min-height: 32px;
  box-sizing: border-box;
  border: none;

  /* not supported in IE11 & Edge; 'left' as fallback */
  text-align: left;
  text-align: start;

  /* Basic */
  &--skin-dark {
    background-color: $dark-background;
    color: $white;
  }

  /* the root is repeated so these outrank Text's own skin colour, the way the
     Stylable `.root:skin(dark) .text` selector did */
  &#{&}#{&}--skin-dark &__text,
  &#{&}--skin-dark &__chevron {
    color: var(--wds-color-black-550, var(--wsr-color-D55, #cfd1dc));
  }

  &--skin-neutral {
    background-color: $dark-background;
    color: var(--wds-color-black-100, var(--wsr-color-D10, #000624));
  }

  &--skin-light {
    background-color: $white;
    color: $light-text;
  }

  /* Selected */
  &--skin-dark#{&}--selected {
    background-color: $dark-selected;
    color: $white;
  }

  &#{&}--skin-dark#{&}--selected &__text,
  &--skin-dark#{&}--selected &__chevron {
    color: $white;
  }

  &--skin-neutral#{&}--selected {
    background-color: $dark-background;
    color: $light-selected-text;
  }

  &--skin-light#{&}--selected {
    background-color: $light-selected;
    color: $light-selected-text;
  }

  &#{&}--skin-light#{&}--selected &__text {
    color: $light-selected-text;
  }

  @media (hover: hover) {
    /* Hovered */
    &:hover,
    &:hover#{&}--selected:not(#{&}--disabled) {
      background-color: $dark-hovered;
      cursor: pointer;
    }

    &--skin-light:hover,
    &--skin-light:hover#{&}--selected:not(#{&}--disabled) {
      background-color: $light-hovered;
    }
  }

  /* Disabled: doubled so it keeps outranking the `:hover` rule above, which
     is what the Stylable state selector did */
  &#{&}--disabled {
    background-color: $dark-background;
    pointer-events: none;
  }

  &--skin-light#{&}--disabled {
    background-color: $white;
  }

  &--skin-dark#{&}--disabled#{&}--selected {
    background-color: $dark-selected;
  }

  &--skin-light#{&}--disabled#{&}--selected {
    background-color: $light-selected;
  }

  &--skin-neutral#{&}--disabled#{&}--selected {
    background-color: $dark-background;
  }

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

  &--drillable &__chevron {
    opacity: 0;
  }

  &--drillable#{&}--always-display-chevron &__chevron {
    opacity: 0.6;
  }

  &--drillable:focus-visible &__chevron {
    position: static;
    opacity: 1;
    transition: all 0.5s;
  }

  @media (hover: hover) {
    &--drillable:hover &__chevron {
      position: static;
      opacity: 1;
      transition: all 0.5s;
    }
  }

  &--suffix {
    padding: 0 18px 0 20px;
  }

  &--drillable {
    padding: 0 18px 0 20px;
  }

  & &__prefix {
    margin-right: 12px;
  }

  & &__text-wrapper {
    flex: 1 1 auto;
  }

  & &__text {
    display: block;
    /* stylelint-disable-next-line plugin/use-baseline */
    word-break: break-word;
    margin: 7px 0 7px 0;
  }

  & &__suffix {
    display: flex;
    flex: 1 0 auto;
    justify-content: flex-end;
    min-width: 24px;
    max-width: 30%;
    margin-left: 6px;
  }
}