@import './../theme/vars.scss';

$ratePrefixCls: #{$vender-prefix}-rate;

.#{$ratePrefixCls} {
  display: inline-block;
  font-size: 20px;
  color: $rate-color;
  vertical-align: middle;
  list-style: none;

  li {
    position: relative;
    display: inline-block;
    margin: 0;
    cursor: pointer;

    & + li {
      margin-left: 8px;
    }

    .half-on {
      width: 50%;
      overflow: hidden;
    }

    &.#{$ratePrefixCls}-disabled {
      cursor: not-allowed;
    }
  }

  &-hight {
    position: absolute;
    transition: color 0.3s, width 0.3s;
  }

  &-hight.star-on {
    position: absolute;
    color: $rate-on-color;
  }
}