@import "mixins/mixins";
@import "common/var";

@include b(rate) {
  &:focus, &:active {
    outline-width: 0;
  }

  @include e(item) {
    display: inline-block;
    position: relative;
    font-size: 0;
    //line-height: 20px;
    top: 50%;
    //transform: translate(0, -50%);
    text-align: center;
  }
  .item-large {
    width: $--rate-icon-size-large;
    height: $--rate-icon-size-large;
  }
  .item-medium {
    width: $--rate-icon-size-medium;
    height: $--rate-icon-size-medium;
  }
  .item-small {
    width: $--rate-icon-size-small;
    height: $--rate-icon-size-small;
  }
  @include e(icon) {
    position: relative;
    display: inline-block;
    color: $--rate-icon-color;
    // transition: .3s;
    &.hover {
      transform: scale(1.15);
    }

    .path2 {
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  @include e(decimal) {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    overflow: hidden;
    font-weight: $--font-weight-600;
  }

  @include e(text) {
    font-size: $--rate-font-size;
    vertical-align: middle;
  }
  .decimal-large {
    line-height: $--rate-icon-size-large;
    padding-left: 3px;
  }
  .decimal-medium {
    line-height: $--rate-icon-size-medium;
    padding-left: 2.5px;
  }
  .decimal-small {
    line-height: $--rate-icon-size-small;
    padding-left: 2px;
  }
  .el-rate-small {
    width: $--rate-icon-size-small;
    height: $--rate-icon-size-small;
    font-weight: $--font-weight-600;
    text-align: center;
  }
  .el-rate-medium {
    width: $--rate-icon-size-medium;
    height: $--rate-icon-size-medium;
    font-weight: $--font-weight-600;
    text-align: center;
  }
  .el-rate-large {
    width: $--rate-icon-size-large;
    height: $--rate-icon-size-large;
    font-weight: $--font-weight-600;
    text-align: center;
  }
  .el-rate-icon-small {
    font-size: 12px;
    padding: 2px;
    display: inline-block;
    i{
      font-size: 12px;
      padding: 2px;
    }
  }
  .el-rate-icon-medium {
    font-size: 15px;
    padding: 2.5px;
    display: inline-block;
    i {
      font-size: 15px;
      padding: 2.5px;
    }
  }
  .el-rate-icon-large {
    font-size: 18px;
    padding: 3px;
    display: inline-block;
    i {
      font-size: 18px;
      padding: 3px;
    }
  }
  .el-rate-half, .el-rate-full {
    position: relative;
    padding: 0;
    width: unset;
    height: unset;
    &:hover{
      transform: scale(1.15);
    }
    .el-rate__half {
      line-height: unset;
      padding: 0;
      opacity: 1;
    }
  }
  .el-rate-full .el-rate__half {
    opacity: 0;
  }
  .el-rate-disabled {
    transform: scale(1) !important;
  }
  // .el-rate-full {
  //   position: relative;
  //   padding: 0;
  //   width: unset;
  //   height: unset;
  //   .el-rate__half {
  //     line-height: unset;
  //     padding: 0;
  //     opacity: 0;
  //   }
  // }
}