@layer env.components {
  .env-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--env-space-2);
  }
  .env-rating-value {
    min-inline-size: 3ch;
    font-variant-numeric: tabular-nums;
  }
  .env-rating-stars {
    display: inline-flex;
    gap: calc(var(--env-space-1) / 2);
    color: var(--env-color-border-default);
  }
  .env-rating-star {
    --env-rating-star-size: 1.125rem;
    position: relative;
    display: inline-flex;
    inline-size: var(--env-rating-star-size);
    block-size: var(--env-rating-star-size);
  }
  .env-rating-star svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    fill: currentColor;
  }
  .env-rating-star[data-fill='full'] {
    color: var(--env-color-fg-rating-star);
  }
  .env-rating-star-half {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 50%;
    overflow: hidden;
    color: var(--env-color-fg-rating-star);
  }
  .env-rating-star-half svg {
    inline-size: var(--env-rating-star-size);
    max-inline-size: none;
  }
  @media (forced-colors: active) {
    .env-rating-star[data-fill='full'],
    .env-rating-star-half {
      color: Highlight;
    }
  }
}