@use '../../theme/styles' as theme;

.wr-rating {
  --wr-rating-size: 1.25rem;
  --wr-rating-gap: 0.125rem;
  --wr-rating-empty: var(--wr-color-light);
  --wr-rating-filled: var(--wr-color-warning, #ffba00);

  display: inline-flex;
  font-family: var(--wr-font-family-base);

  &__row {
    display: inline-flex;
    align-items: center;
    gap: var(--wr-rating-gap);
    outline: 0;

    &:focus-visible {
      @include theme.focus-ring;
      border-radius: var(--wr-border-radius-sm);
    }
  }

  &__slot {
    position: relative;
    display: inline-block;
    width: var(--wr-rating-size);
    height: var(--wr-rating-size);
    line-height: 0;
    color: var(--wr-rating-empty);

    &--interactive {
      cursor: pointer;
    }
  }

  &__icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  &__icon--fg {
    color: var(--wr-rating-filled);
    // `--wr-rating-fill` is set per-slot from the component (0..1).
    clip-path: inset(0 calc((1 - var(--wr-rating-fill, 0)) * 100%) 0 0);
    transition: clip-path var(--wr-transition-base);
  }

  // Sizes — scale the icon glyph + the gap between slots.
  &--sm {
    --wr-rating-size: 1rem; // 16px
    --wr-rating-gap: 0.0625rem;
  }

  &--lg {
    --wr-rating-size: 1.5rem; // 24px
    --wr-rating-gap: 0.1875rem;
  }

  &--readonly &__slot {
    cursor: default;
  }

  &--disabled {
    opacity: 0.6;

    .wr-rating__slot {
      cursor: not-allowed;
    }
  }
}