@import "../../../style/mixin.less";

.@{prefix}-rate {
    display: inline-flex;

    &.disabled {
        cursor: not-allowed;
    }

    &-icon-wrap {
        .use-var(padding, rate-icon-offset);
        .use-var(font-size, rate-icon-size);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    &-icon-wrap,
    &-icon {

        &.active,
        &.half-active {
            .use-var(color, rate-icon-active-color);

            &.disabled {
                .use-var(color, rate-icon-disabled-active-color);
            }
        }

        &.normal {
            .use-var(color, rate-icon-normal-color);
        }
    }

    &-icon {

        &.half-active {
            position: absolute;
            z-index: 1;

            .style-with-rtl({
                transform: scaleX(-1);
            });
        }
    }

    &-icon-click-half {
        width: 50%;
        height: 100%;
        display: inline-block;
        position: absolute;
        z-index: 2;

        &.left {
            left: 0;
        }

        &.right {
            right: 0;
        }
    }
}

/***************************************************
 *                                                 *
 *               Arco Theme Style                  *
 *                                                 *
 ***************************************************/
& when (@use-dark-mode = 1) {
    
  .process-bg-color-with-config,
  .process-custom-icon-bg-color-with-config {
    @{arco-dark-mode-selector} & {
      .use-var(color, dark-steps-process-with-config-item-icon-color);
      .use-var(color, dark-steps-process-with-config-item-icon-color);
    }
  }
  .wait-custom-icon-bg-color-with-config {
    @{arco-dark-mode-selector} & {
      .use-var(background, dark-steps-wait-icon-num-background);
      .use-var(color, dark-sub-info-font-color);
      .use-var(background, dark-steps-wait-icon-num-background);
      .use-var(color, dark-sub-info-font-color);
    }
  }
  .@{prefix}-rate {
    &-icon-wrap,
    &-icon {
      &.active,
      &.half-active {
        &.disabled {
          @{arco-dark-mode-selector} & {
            .use-var(color, dark-rate-icon-disabled-active-color);
          }
        }
      }
      &.normal {
        @{arco-dark-mode-selector} & {
          .use-var(color, dark-rate-icon-normal-color);
        }
      }
    }
  }
}
/********************* End *************************/