:root {
  --rating-star-color: var(--color-orange);
  --rating-star-active-color: var(--color-midnight);
}

.rating {
  line-height: 1;

  &:is(.htmx-request) {
    pointer-events: none;
  }
}

.rating__text {
  margin-block-end: 1rem;
}

.rating__form {
  display: flex;
  flex-wrap: wrap;
  margin-block-start: 0.25rem;
  margin-inline-start: -0.75rem;
}

.rating__button {
  --rating-star-fill: transparent;
  --rating-star-half-fill: transparent;
  --rating-star-stroke: var(--rating-star-color);

  align-items: center;
  block-size: 4.5rem;
  display: flex;
  inline-size: 4.5rem;
  justify-content: center;

  &:is(.rating__button--filled) {
    --rating-star-fill: var(--rating-star-color);
    --rating-star-half-fill: var(--rating-star-color);
  }

  &:is(.rating__button--half) {
    --rating-star-half-fill: var(--rating-star-color);
  }

  &:is(.rating__button--active) {
    --rating-star-fill: var(--rating-star-active-color);
    --rating-star-stroke: var(--rating-star-active-color);
    --rating-star-half-fill: var(--rating-star-active-color);
  }
}

.rating__icon {
  block-size: 3rem;
  display: block;
  fill: transparent;
  inline-size: 3rem;
  overflow: visible;
}

.rating__icon-half {
  fill: var(--rating-star-half-fill);
  transition-property: fill;
}

.rating__icon-fill {
  fill: var(--rating-star-fill);
  stroke: var(--rating-star-stroke);
  stroke-width: 9.8;
  transition-property: stroke, fill;
}

.rating__status {
  font-weight: var(--font-weight-semibold);
  margin-block-start: 1rem;
}