.faces-rating-bar {
  &__face-container {
    margin-right: var(--wds-space-200, 8px);
    padding: var(--wds-space-25, 1px);
    background-clip: content-box;
  }

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

  &__face-icon {
    color: var(--wds-color-fill-dark-primary, #151414);
  }

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

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

  &__face-container--type-interactive#{&}__face-container--hovered {
    background-color: var(--wds-color-fill-dark-secondary-hover, #E8E7E7);
  }

  &__face-container--type-interactive#{&}__face-container--selected {
    background-color: var(--wds-color-fill-dark-secondary-active, #DEDEDE);
  }

  &__face-container--type-interactive#{&}__face-container--selected
    &__face-icon {
    color: var(--wds-color-fill-dark-primary, #151414);
  }

  &__face-container--type-interactive#{&}__face-container--hovered
    &__face-icon {
    color: var(--wds-color-fill-dark-primary, #151414);
  }

  &__face-container--type-read-only &__face-icon {
    color: var(
      --wds-color-fill-dark-primary-disabled,
      rgba(19, 23, 32, 0.3)
    );
  }

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

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

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