@import './var.less';

@rate-prefix-cls:  ~"@{css-prefix}-rate";

.@{rate-prefix-cls} {
  &-item {
    transition: @transition-quick;
    display: inline-block;
    position: relative;
    margin: 0 2px;
    cursor: pointer;
    user-select: none;

    span {
      color: @color-unactive;
    }

    div {
      display: inline-block;
    }

    .@{rate-prefix-cls}-first-child {
    }

    .@{rate-prefix-cls}-last-child {
      width: 50%;
      overflow: hidden;
      position: absolute;
      left: 0;
      top: 0;
    }

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

  &-hover {
    span {
      color: @primary-color;
    }
  }
}