.stars-rating-bar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wds-space-100, 6px) var(--wds-space-300, 18px);

  &__stars-container {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
  }

  &__star-container {
    display: flex;
    position: relative;
    flex: 0 0 auto;
  }

  /* ring/band come from the shared wds-focus-ring class (forced from JS) */
  &__star#{&}__star {
    border-radius: 2px;
  }

  &__star {
    color: var(
      --wds-stars-rating-bar-unfilled-star-color,
      var(--wds-color-black-500, var(--wsr-color-D10-20, rgba(0, 6, 36, 0.20)))
    );
  }

  &__star--filled {
    color: var(
      --wds-color-text-standard-primary,
      var(--wsr-color-Y10, #FFB700)
    );
  }

  &:not(&--read-only) &__star {
    cursor: pointer;
    color: var(--wds-color-text-standard-primary, var(--wsr-color-Y10, #FFB700));
  }

  &:not(&--read-only)
    &__star-container:not(:last-child)
    &__star {
    margin-inline-end: var(--wds-space-100, 6px);
  }

  &__rate-caption {
    display: inline-block;
    flex: 0 0 auto;
  }
}