
// @require core/widget/widget.scss
// @require widgets/icon/icon.scss

//FIXME: Only do the rating stuff if .ratable
//TODO: Add support for setting custom icons (rename `star`, use a more generic name)

/* RATER */

.rater {

  @extend %widget;
  display: inline-flex; // Instead of `flex`, so that when we are hovering it we are also actually overing a star, with `flex` it will expand and we may hover no stars but still trigger the styling

  /* STAR */

  &-star {

    cursor: pointer;

    /* BEFORE (ICON) */

    &:before {
      @extend %icon-base;
      content: $star-off-icon;
      margin-bottom: 0;
    }

    /* ACTIVE */

    &.active {

      /* BEFORE (ICON) */

      &:before {
        content: $star-on-icon;
        color: $rater-star-active-color;
      }

    }

    /* HALF ACTIVE */

    &.half-active {

      /* BEFORE (ICON) */

      &:before {
        content: $star-half-icon;
        color: $rater-star-active-color;
      }

    }

  }

  /* ENABLED */

  &:not(.disabled) {

    /* HOVER / ACTIVE */

    &:hover,
    &:active {

      /* STAR */

      .rater-star {

        /* BEFORE (ICON) */

        &:before {
          content: $star-on-icon;
          color: $rater-star-active-color;
        }

        /* NEXT STARS */

        &:hover ~ .rater-star,
        &:active ~ .rater-star {

          /* BEFORE (ICON) */

          &:before {
            content: $star-off-icon;
            color: inherit;
          }

        }

      }

    }

  }

}
