// @import '../_utils.scss';
.#{$rate-prefix-cls} {
  display: inline-block;
  margin: $rate-margin;
  padding: $rate-padding;
  @if $--size-switch == no {
    font-size: $rate-font-size;
  }
  vertical-align: middle;
  font-weight: normal;
  font-style: normal;

  &-disabled &-star {
    &::before,
    &-content::before {
      cursor: default;
    }

    &:hover {
      transform: scale(1);
    }
  }

  &-star-full,
  &-star-zero {
    position: relative;
  }

  &-star-first {
    position: absolute;
    left: $rate-star-first-left;
    width: 50%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    @if $--size-switch == yes {
      top: computed-padding-vertical($--size-height-base, 14px, 0);
    } @else {
      top: $rate-star-first-top;
    }
  }

  &-star-first,
  &-star-second {
    user-select: none;
    transition: all 0.3s ease;
    color: $rate-star-first-color;
    @include theme-font-color($__rate-star_font-color);
    cursor: pointer;
  }

  &-star-chart {
    display: inline-block;
    margin: $rate-star-chart-margin;
    margin-right: $rate-star-chart-margin-right;
    position: relative;
    font-family: Ionicons, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
    transition: all 0.3s ease;
    @if $--size-switch == yes {
      font-size: $rate-font-size;
      vertical-align: middle;
      line-height: 20px;
      padding: ($--size-height-base - 20px) / 2 0;
    } @else {
      padding: $rate-star-chart-padding;
    }

    &:hover {
      transform: scale(1.1);

      //&-star-first, &-star-second {
      //    color: @rate-star-color;
      //}
    }
  }
  &-star-chart.#{$rate-prefix-cls}-star-full &-star-first, &-star-chart.#{$rate-prefix-cls}-star-full &-star-second {
    color: $rate-star-color;
    @include theme-font-color($__rate-star-full_font-color);
  }
  &-star-chart.#{$rate-prefix-cls}-star-half &-star-first {
    opacity: 1;
    color: $rate-star-color;
    @include theme-font-color($__rate-star-half_font-color);
  }

  &-star {
    display: inline-block;
    margin: $rate-star-margin;
    margin-right: $rate-star-margin-right;
    position: relative;
    font-family: iconfont, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
    transition: all 0.3s ease;
    @if $--size-switch == yes {
      font-size: $rate-font-size;
      vertical-align: middle;
      line-height: 20px;
      padding: ($--size-height-base - 20px) / 2 0;
    } @else {
      padding: $rate-star-padding;
    }

    &:hover {
      transform: scale(1.1);
    }

    &::before,
    &-content::before {
      color: $rate-star-before-color;
      cursor: pointer;
      content: "\e63b";
      transition: all $transition-time $ease-in-out;
      display: block;
      @include theme-font-color($__rate-star-before_font-color);
    }

    &-content {
      position: absolute;
      left: 0;
      @if $--size-switch == yes {
        top: computed-padding-vertical($--size-height-base, 14px, 0);
      } @else {
        top: 0;
      }
      width: 50%;
      height: 100%;
      overflow: hidden;

      &::before {
        color: transparent;
        @include theme-font-color($__rate-star-before_transparent_font-color);
      }
    }

    &-half &-content::before,
    &-full::before {
      color: $rate-star-color;
      @include theme-font-color($__rate-star-half-full_font-color);
    }

    &-half:hover &-content::before,
    &-full:hover::before {
      color: tint($rate-star-color, 20%);
      @include theme-font-color($__rate-star-half-full_hover_font-color);
    }
  }

  &-text {
    margin-left: $rate-text-margin-left;
    vertical-align: middle;
    display: inline-block;
    @if $--size-switch == yes {
      font-size: $--size-font-size-base;
      @include computed-height($--size-height-base, 0);
    } @else {
      font-size: $font-size-small;
    }
    @include theme-font-color($__rate-text_font-color);
  }
}