.nut-rate {
  display: flex;

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

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

  &-item {
    display: flex;
    flex-shrink: 0;
    position: relative;
    margin-right: $rate-item-margin;

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

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

    &__icon {
      color: $rate-icon-color;
      cursor: pointer;

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

      &.nut-rate-item__icon.nut-rate-item__icon--half {
        position: absolute;
        // width: 50% !important;
        left: 0;
        top: 0;
        overflow: hidden;
      }

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