// Add styles here so it can be injected first via vue.config.js.
@use '@justeat/fozzie/src/scss/fozzie' as f;

.c-rating {
    display: flex;
    align-items: center;

    &.c-rating--alignLeft {
      flex-direction: row-reverse;
    }
}

.c-rating-stars {
    margin: 0;
    padding: 0;
    position: relative;
    display: inline-block;
}

.c-rating-stars-icons,
.c-rating-stars-icon {
    display: flex;
}

// There are four sizes available, the default size (small) starts at 20px. See readme prop `starRatingSize` for more info.
.c-rating-star {
  fill: f.$color-support-brand-01;
}

.c-rating-star--xsmall {
  width: 16px;
}

.c-rating-star--small {
  width: 20px;
}

.c-rating-star--medium {
  width: 24px;
}

.c-rating-star--large {
  width: 32px;
}
