$prefix-rate: lg-rate;
$rate-star-color: #fcc80e;
$font-size-base: 13px;

.#{$prefix-rate} {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 18px;
  display: inline-block;
  vertical-align: middle;
  font-weight: normal;
  font-style: normal;
  outline: none;

  &-disabled &-star {
    &:before,
    &-content:before {
      cursor: default;
    }
    &:hover {
      transform: scale(1);
    }
  }
  div {
    outline: none;
  }

  &-star {
    color: #e9e9e9;
    &-first,
    &-second {
      height: 100%;
      transition: all 0.3s;
    }

    &-first {
      position: absolute;
      left: 0;
      top: 0;
      width: 50%;
      overflow: hidden;
      opacity: 0;
    }

    &-half &-first,
    &-half &-second {
      opacity: 1;
    }

    &-half &-first,
    &-full &-second {
      color: $rate-star-color;
    }

    &-half:hover &-first,
    &-full:hover &-second {
      color: tint($rate-star-color, 30%);
    }
  }
}