.faces-rating-bar {
  &__button-wrapper {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
    min-width: 0;
    border: none;
    padding: 0;
    background: none;
    font-size: 0;
  }

  &__face-container {
    margin-right: 12px;
    width: 22px;
    height: 22px;
    border-radius: 22px;
  }

  &__button-wrapper:last-child &__face-container {
    margin-right: 0;
  }

  &__face-icon {
    color: var(
      --wds-color-text-standard-secondary,
      var(--wsr-color-D20, #333853)
    );
  }

  &__face-glyph--weight-rounded {
    display: none;
  }

  &__face-container--type-interactive#{&}__face-container--selected {
    background-color: var(
      --wds-color-fill-standard-secondary,
      var(--wsr-color-B40, #D6E6FE)
    );
  }

  &__face-container--type-interactive#{&}__face-container--selected
    &__face-icon {
    color: var(
      --wds-color-fill-standard-primary,
      var(--wsr-color-B10, #116DFF)
    );
  }

  &__face-container--type-interactive#{&}__face-container--hovered {
    cursor: pointer;
  }

  &__face-container--type-interactive#{&}__face-container--hovered
    &__face-icon {
    color: var(
      --wds-color-fill-standard-primary,
      var(--wsr-color-B10, #116DFF)
    );
  }

  &__face-container--type-read-only &__face-icon {
    color: var(
      --wds-color-text-disabled,
      var(--wsr-color-D10-20, rgba(0, 6, 36, 0.20))
    );
  }

  &__face-container--type-read-only#{&}__face-container--selected#{&}__face-container--icon-type-disapointed {
    background-color: var(
      --wds-color-fill-destructive-secondary,
      var(--wsr-color-R40, #FBD0CD)
    );
  }

  &__face-container--type-read-only#{&}__face-container--selected#{&}__face-container--icon-type-disapointed
    &__face-icon {
    color: var(
      --wds-color-fill-destructive-primary,
      var(--wsr-color-R05, #D0180B)
    );
  }

  &__face-container--type-read-only#{&}__face-container--selected#{&}__face-container--icon-type-frowning {
    background-color: var(
      --wds-color-fill-destructive-secondary,
      var(--wsr-color-R40, #FBD0CD)
    );
  }

  &__face-container--type-read-only#{&}__face-container--selected#{&}__face-container--icon-type-frowning
    &__face-icon {
    color: var(
      --wds-color-fill-destructive-primary,
      var(--wsr-color-R05, #D0180B)
    );
  }

  &__face-container--type-read-only#{&}__face-container--selected#{&}__face-container--icon-type-neutral {
    background-color: var(
      --wds-color-fill-warning-secondary,
      var(--wsr-color-Y40, #FFE2A5)
    );
  }

  &__face-container--type-read-only#{&}__face-container--selected#{&}__face-container--icon-type-neutral
    &__face-icon {
    color: var(--wds-color-fill-warning-primary, var(--wsr-color-Y05, #E7A600));
  }

  &__face-container--type-read-only#{&}__face-container--selected#{&}__face-container--icon-type-smiling {
    background-color: var(
      --wds-color-fill-success-secondary,
      var(--wsr-color-G50, #E1F4EB)
    );
  }

  &__face-container--type-read-only#{&}__face-container--selected#{&}__face-container--icon-type-smiling
    &__face-icon {
    color: var(--wds-color-fill-success-primary, var(--wsr-color-G05, #229954));
  }

  &__face-container--type-read-only#{&}__face-container--selected#{&}__face-container--icon-type-grining {
    background-color: var(
      --wds-color-fill-success-secondary,
      var(--wsr-color-G50, #E1F4EB)
    );
  }

  &__face-container--type-read-only#{&}__face-container--selected#{&}__face-container--icon-type-grining
    &__face-icon {
    color: var(--wds-color-fill-success-primary, var(--wsr-color-G05, #229954));
  }
}