@use "../../../styles/tools/convert";
@use "../../../styles/tokens/breakpoint";
@use "../../../styles/tokens/space";

@layer components {
  .star-rating {
    display: flex;
    margin-bottom: space.get("large");
    width: fit-content;
    gap: convert.to-rem(5px);

    &__icon--filled {
      color: var(--color-icon-brand);
    }

    &__icon--empty {
      color: var(--color-icon-disabled);
    }

    &__icon:not(
        .icon--small,
        .icon--medium,
        .icon--large,
        .icon--xlarge,
        .icon--xxlarge,
        .icon--huge
      ) {
      --icon-size: #{convert.to-rem(24px)};

      @include breakpoint.get(md) {
        --icon-size: #{convert.to-rem(32px)};
      }
    }
  }
}