.rate__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
  vertical-align: middle;
}
.rate-star {
  $root: #{&};
  margin: 0;
  padding: 0;
  font-size: nth($rate-size,1);
  display: inline-block;
  margin-right: $rate-star-spacing;
  position: relative;
  transition: all .3s;
  color: $rate-star-color;
  cursor: pointer;
  .rate--small &{
    font-size:nth($rate-sm-size,1);
  }
  .rate__list--disabled &{
    cursor: not-allowed;
  }

  &:hover{
    transform: scale(1.1);
    .rate__list--disabled &{
      transform: scale(1);
    }
  }

  &__bottom,
  &__top{
    user-select: none;
    transition: all .3s;
  }

  &__bottom{
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    #{$root}--no-full &,
    #{$root}--half &{
      color: $rate-active-color;
      opacity: 1;
    }
    #{$root}--half &{
      width:50%;
    }

  }

  &__top{
    #{$root}--full &{
      color: $rate-active-color;
    }

  }
}

@for $i from 1 through 9 {
  .rate-star--#{$i*10} .rate-star__bottom{
    width:10 * $i+%;
  }
}

.rate__text{
  color: $rate-text-color;
  font-size:nth($rate-size,2);
  .rate--small &{
    font-size:nth($rate-sm-size,2);
  }
}


.thumb-up dt{
  float: left;
  margin-right: 5px;
}
.thumb-up dt button{
  height: 40px;
  width:40px;
  padding-left:0;
  padding-right: 0;
  text-align: center;
}
.thumb-up dt i{
  color: $gray-lightest;
  font-size:$font-size-lg;
}
.thumb-up .aid-thumb-up{
  display: none;
}
.thumb-up:hover .aid-thumb-up-outline{
  display: none;
}
.thumb-up:hover .aid-thumb-up{
  display: block;
}
.thumb-up:hover .#{$btn-prefix-cls}:hover{
  box-shadow: none;
  border-color: $btn-secondary-border;
}
.thumb-up dd{
  margin-bottom: 0;
  color: $gray;
  font-size:.875rem;
}