.nut-rate {
  display: flex;
  touch-action: pan-x;

  &.disabled {
    .nut-rate-item-icon {
      cursor: not-allowed;
    }
  }

  &.readonly {
    .nut-rate-item-icon {
      cursor: default;
    }
  }

  &-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;

    &-half {
      position: absolute;
      height: 100%;
      width: 50% !important;
      left: 0;
      top: 0;
      overflow: hidden;

      .nut-icon {
        flex-shrink: 0;
      }
    }

    &-normal {
      margin-left: $rate-item-margin;
      .nut-icon {
        height: $rate-icon-size;
        width: $rate-icon-size;
      }
    }

    &-large {
      margin-left: calc($rate-item-margin * 2);
      .nut-icon {
        height: calc($rate-icon-size + 8px);
        width: calc($rate-icon-size + 8px);
      }
    }

    &-small {
      margin-left: calc($rate-item-margin / 2);
      .nut-icon {
        height: calc($rate-icon-size - 4px);
        width: calc($rate-icon-size - 4px);
      }
    }

    &-normal,
    &-large,
    &-small {
      &:first-child {
        margin-left: 0;
      }
    }

    &-icon {
      display: flex;
      align-items: center;
      cursor: pointer;

      .nut-icon {
        color: $rate-icon-color;
      }

      &-disabled {
        .nut-icon {
          color: $rate-icon-inactive-color;
        }
      }

      &.nut-rate-item-icon.nut-rate-item-icon-half {
        position: absolute;
        left: 0;
        top: 0;
        overflow: hidden;
      }

      &.nut-rate-item-icon::before {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
      }
    }
  }

  &-score {
    /* #ifdef dynamic*/
    display: flex;
    /* #endif */
    /* #ifndef dynamic*/
    display: inline-flex;
    /* #endif */
    align-items: center;
    color: $rate-font-color;
    font-family: 'JDZH-Regular';
    line-height: 1;

    &-normal {
      padding-left: $rate-item-margin;
      font-size: $rate-font-size;
    }

    &-large {
      font-size: calc($rate-font-size + 6px);
      padding-left: calc($rate-item-margin * 2);
    }

    &-small {
      font-size: calc($rate-font-size - 2px);
      padding-left: calc($rate-item-margin / 2);
    }

    &-disabled {
      color: $rate-icon-inactive-color;
    }
  }
}

[dir='rtl'] .nut-rate,
.nut-rtl .nut-rate {
  &-item {
    margin-left: 0;
    &:first-child {
      margin-right: 0;
    }

    &-normal {
      margin-right: $rate-item-margin;
    }

    &-large {
      margin-right: calc($rate-item-margin * 2);
    }

    &-small {
      margin-right: calc($rate-item-margin - 2px);
    }

    &:last-child {
      margin-left: 0;
    }

    &-half {
      left: auto;
      right: 0;
    }

    &-icon {
      &.nut-rate-item-icon.nut-rate-item-icon-half {
        left: auto;
        right: 0;
      }

      &.nut-rate-item-icon::before {
        left: auto;
        right: auto;
      }
    }
  }

  &-score {
    padding-left: 0;

    &-large {
      padding-right: calc($rate-item-margin * 2);
    }

    &-normal {
      padding-right: $rate-item-margin;
    }

    &-small {
      padding-right: calc($rate-item-margin - 2px);
    }
  }
}