@adobe/spectrum-css/dist/components/rating/index-vars.css

The Spectrum CSS top-level backwards compatible package

.spectrum-Rating:hover .spectrum-Rating-icon .spectrum-Rating-starActive,
.spectrum-Rating-icon.is-selected .spectrum-Rating-starActive {
    display: block;
  }

.spectrum-Rating:hover .spectrum-Rating-icon .spectrum-Rating-starInactive,
.spectrum-Rating-icon.is-selected .spectrum-Rating-starInactive {
    display: none;
  }

.spectrum-Rating-icon .spectrum-Rating-starActive,
.spectrum-Rating-icon:hover ~ .spectrum-Rating-icon .spectrum-Rating-starActive {
    display: none;
  }

.spectrum-Rating-icon .spectrum-Rating-starInactive,
.spectrum-Rating-icon:hover ~ .spectrum-Rating-icon .spectrum-Rating-starInactive {
    display: block;
  }

.spectrum-Rating {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;

  width: calc(var(--spectrum-rating-icon-width) * var(--spectrum-rating-icon-count, 5));

  border-radius: var(--spectrum-rating-border-radius, var(--spectrum-alias-border-radius-regular));

  cursor: pointer;
}

.spectrum-Rating.is-disabled,
  .spectrum-Rating.is-readOnly {
    cursor: default;
    pointer-events: none;
  }

.spectrum-Rating-input {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0.0001;
  pointer-events: none;
}

.spectrum-Rating-icon {
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  width: var(--spectrum-rating-icon-width);
  height: var(--spectrum-icon-star-height, var(--spectrum-global-dimension-size-225));
  padding: var(--spectrum-rating-icon-padding-y, var(--spectrum-global-dimension-size-85)) 0;
}

[dir="ltr"] .spectrum-Rating-icon.is-currentValue:after {
      left: calc((var(--spectrum-rating-icon-width) - var(--spectrum-rating-indicator-width)) / 2);
}

[dir="rtl"] .spectrum-Rating-icon.is-currentValue:after {
      right: calc((var(--spectrum-rating-icon-width) - var(--spectrum-rating-indicator-width)) / 2);
}

[dir="ltr"] .spectrum-Rating-icon.is-currentValue:after {
      right: calc((var(--spectrum-rating-icon-width) - var(--spectrum-rating-indicator-width)) / 2);
}

[dir="rtl"] .spectrum-Rating-icon.is-currentValue:after {
      left: calc((var(--spectrum-rating-icon-width) - var(--spectrum-rating-indicator-width)) / 2);
}

.spectrum-Rating-icon.is-currentValue:after {
      border-radius: var(--spectrum-rating-indicator-border-radius, var(--spectrum-alias-border-radius-small));
      content: '';
      height: var(--spectrum-rating-indicator-height, var(--spectrum-global-dimension-size-25));
      position: absolute;
      bottom: var(--spectrum-rating-indicator-offset, var(--spectrum-alias-border-size-thick));
    }

.spectrum-Rating-starActive,
.spectrum-Rating-starInactive {
  width: var(--spectrum-icon-star-width, var(--spectrum-global-dimension-size-225));
  height: var(--spectrum-icon-star-width, var(--spectrum-global-dimension-size-225));
  margin: 0 auto;
}

.spectrum-Rating {
  --spectrum-rating-focus-ring-color: var(--spectrum-alias-focus-ring-color, var(--spectrum-alias-focus-color));
}

.spectrum-Rating.is-focused {
    box-shadow: 0 0 0 var(--spectrum-global-dimension-static-size-25, 2px)
      var(--spectrum-rating-focus-ring-color);
  }

.spectrum-Rating:hover .spectrum-Rating-icon {
      color: var(--spectrum-rating-icon-color-selected, var(--spectrum-alias-icon-color));
    }

.spectrum-Rating:hover .spectrum-Rating-icon:hover {
        color: var(--spectrum-rating-icon-color-hover, var(--spectrum-global-color-gray-800));
      }

.spectrum-Rating:hover .spectrum-Rating-icon:active {
        color: var(--spectrum-rating-icon-color-down, var(--spectrum-alias-icon-color-down));
      }

.spectrum-Rating:hover .spectrum-Rating-icon.is-currentValue:after {
          background: currentColor;
        }

.spectrum-Rating-icon {
  color: var(--spectrum-rating-icon-color, var(--spectrum-alias-icon-color));
}

.spectrum-Rating-icon.is-selected {
    color: var(--spectrum-rating-icon-color-selected, var(--spectrum-alias-icon-color));
  }

.spectrum-Rating-icon:hover ~ .spectrum-Rating-icon {
      color: var(--spectrum-rating-icon-color, var(--spectrum-alias-icon-color));
    }

.spectrum-Rating--emphasized .spectrum-Rating-icon {
    color: var(--spectrum-rating-emphasized-icon-color, var(--spectrum-alias-icon-color));
  }

.spectrum-Rating--emphasized .spectrum-Rating-icon.is-selected {
      color: var(--spectrum-rating-emphasized-icon-color-selected, var(--spectrum-alias-icon-color-selected));
    }

.spectrum-Rating--emphasized .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon {
        color: var(--spectrum-rating-emphasized-icon-color, var(--spectrum-alias-icon-color));
      }

.spectrum-Rating--emphasized:hover .spectrum-Rating-icon {
      color: var(--spectrum-rating-emphasized-icon-color-selected, var(--spectrum-alias-icon-color-selected));
    }

.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover {
        color: var(--spectrum-rating-emphasized-icon-color-hover, var(--spectrum-alias-icon-color-selected-hover));
      }

.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:active {
        color: var(--spectrum-rating-emphasized-icon-color-down, var(--spectrum-alias-icon-color-selected-down));
      }

.spectrum-Rating.is-disabled .spectrum-Rating-icon {
      color: var(--spectrum-rating-icon-color-disabled, var(--spectrum-global-color-gray-400));
    }

.spectrum-Rating.is-disabled .spectrum-Rating-icon.is-selected {
        color: var(--spectrum-rating-icon-color-disabled, var(--spectrum-global-color-gray-400));
      }