@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';

.#{$hashClassName}.cn-ui-m-rating {
  display: inline-flex;
  user-select: none;
  touch-action: pan-y;
  margin: calc(-1 * #{$m-s-4});
  .cn-ui-m-rating {
    &-box {
      position: relative;
    }

    &-star {
      box-sizing: border-box;
      padding: $m-s-4;
      overflow: hidden;
      color: $m-color-bg-dark;
      font-size: $m-font-size-headline-3;
      line-height: $m-font-lineheight-1;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;

      &-half {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
      }
      &-active {
        color: $m-color-primary;
      }
      &-readonly {
        cursor: unset;
      }
    }
  }

  &-half {
    .cn-ui-m-rating-star-half:not(.cn-ui-m-rating-star-active) {
      color: $m-color-bg-darker1;
    }
  }
}