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

@include b(rate) {
  display: inline-block;
  // 表单居中
  height: $--rate-height;
  line-height: $--rate-height;
  &:focus-visible {
    outline-offset: 1px;
    outline: 1px solid $--color-primary;
  }

  @include e(item) {
    display: inline-block;
    position: relative;
    font-size: 0;
    // 表单居中
    // vertical-align: middle;
    line-height: 1;
  }

  @include e(icon) {
    position: relative;
    display: inline-block;
    font-size: $--rate-icon-size;
    margin-right: $--rate-icon-margin;
    color: $--rate-icon-color;
    transition: .3s;
    &.hover {
      transform: scale(1.2);
      transform-origin: 50% 60%;
    }

    .path2 {
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  @include e(decimal) {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    overflow: hidden;
  }

  @include e(text) {
    font-size: $--rate-font-size;
    // vertical-align: middle;
  }

  @include m(medium) {
    height: calc(#{$--rate-height} - 2px);
    line-height: calc(#{$--rate-height} - 2px);
    @include e(icon) {
      font-size: 16px;
    }
  }
  @include m(small) {
    height: calc(#{$--rate-height} - 4px);
    line-height: calc(#{$--rate-height} - 4px);
    @include e(icon){
      font-size: 14px;
    }
    @include e(text) {
      font-size: 12px;
    }
  }
  @include m(mini) {
    height: calc(#{$--rate-height} - 6px);
    line-height: calc(#{$--rate-height} - 6px);
    @include e(icon){
      font-size: 12px;
    }
    @include e(text) {
      font-size: 12px;
    }
  }
}