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

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

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

  &-horizontal {
    flex-direction: row;
    align-items: center;
  }

  &-vertical {
    flex-direction: column;
    align-items: center;
  }

  &-list {
    display: flex;
    align-items: center;
  }

  &-label {
    color: $rate-label-color;
    white-space: nowrap;
  }

  &-labels {
    display: flex;
    width: 100%;

    &-item {
      flex: 1;
      text-align: center;
      color: $rate-label-color;
    }
  }

  &-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;
      }
    }

    &-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;
      }

      &-animate {
        animation: nut-rate-bounce 0.3s ease-in-out;
      }
    }
  }

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

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

  // horizontal layout
  &-horizontal {
    .nut-rate-item {
      margin-left: $rate-item-margin;
      &:first-child {
        margin-left: 0;
      }
    }

    // 12DP - star gap 2px
    .nut-rate-item-small {
      margin-left: scale-px(2px);
      &:first-child {
        margin-left: 0;
      }
      .nut-icon {
        height: scale-font-px(12px);
        width: scale-font-px(12px);
      }
    }

    .nut-rate-item-normal {
      .nut-icon {
        height: scale-font-px(16px);
        width: scale-font-px(16px);
      }
    }

    .nut-rate-item-large {
      .nut-icon {
        height: scale-font-px(20px);
        width: scale-font-px(20px);
      }
    }

    .nut-rate-label-small {
      font-size: $font-size-s;
      margin-right: scale-px(4px);
    }

    .nut-rate-label-normal {
      font-size: $font-size-s;
      margin-right: scale-px(12px);
    }

    .nut-rate-label-large {
      font-size: $font-size-base;
      margin-right: scale-px(12px);
    }

    .nut-rate-score-small {
      padding-left: scale-px(4px);
      font-size: $font-size-s;
      line-height: $line-height-s;
    }

    .nut-rate-score-normal {
      padding-left: scale-px(12px);
      font-size: $font-size-s;
      line-height: $line-height-s;
    }

    .nut-rate-score-large {
      padding-left: scale-px(12px);
      font-size: $font-size-base;
      line-height: $line-height-base;
    }
  }

  // vertical layout
  &-vertical {
    .nut-rate-list {
      justify-content: center;
      width: 100%;
    }

    .nut-rate-item {
      margin-left: $rate-item-margin;
      &:first-child {
        margin-left: 0;
      }
    }

    .nut-rate-item-small,
    .nut-rate-item-normal {
      .nut-icon {
        height: scale-font-px(20px);
        width: scale-font-px(20px);
      }
    }

    .nut-rate-item-large {
      flex: 1;
      justify-content: center;

      .nut-icon {
        height: scale-font-px(28px);
        width: scale-font-px(28px);
      }
    }

    .nut-rate-label-small,
    .nut-rate-label-normal {
      font-size: $font-size-xs;
      margin-top: scale-px(6px);
    }

    .nut-rate-label-large {
      font-size: $font-size-s;
      margin-top: scale-px(8px);
    }

    .nut-rate-labels {
      width: 100%;
    }

    .nut-rate-labels-small,
    .nut-rate-labels-normal {
      margin-top: scale-px(6px);

      .nut-rate-labels-item {
        font-size: $font-size-xs;
      }
    }

    .nut-rate-labels-large {
      margin-top: scale-px(8px);

      .nut-rate-labels-item {
        font-size: $font-size-s;
      }
    }

    .nut-rate-score-small,
    .nut-rate-score-normal {
      font-size: $font-size-xs;
      line-height: $line-height-xs;
      margin-top: scale-px(6px);
    }

    .nut-rate-score-large {
      font-size: $font-size-s;
      line-height: $line-height-s;
      margin-top: scale-px(8px);
    }
  }
}

@keyframes nut-rate-bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

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

      &:first-child {
        margin-right: 0;
      }
    }

    .nut-rate-item-small {
      margin-left: 0;
      margin-right: scale-px(2px);

      &:first-child {
        margin-right: 0;
      }
    }

    .nut-rate-label {
      margin-right: 0;
    }

    .nut-rate-label-small {
      margin-left: scale-px(4px);
    }

    .nut-rate-label-normal {
      margin-left: scale-px(12px);
    }

    .nut-rate-label-large {
      margin-left: scale-px(12px);
    }

    .nut-rate-score {
      padding-left: 0;
    }

    .nut-rate-score-small {
      padding-right: scale-px(4px);
    }

    .nut-rate-score-normal {
      padding-right: scale-px(12px);
    }

    .nut-rate-score-large {
      padding-right: scale-px(12px);
    }
  }

  &-vertical {
    .nut-rate-item {
      margin-left: 0;
      margin-right: $rate-item-margin;

      &:first-child {
        margin-right: 0;
      }
    }
  }

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

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

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