@import '../../style/core/index';

@include b(rate) {
  @include define(size, 20px);
  @include define(color, #eee);
  @include define(active-color, #fadb14);
  @include define(gap, 4px);

  display: inline-flex;
  user-select: none;
  flex-wrap: wrap;
  cursor: pointer;

  @include e(item) {
    line-height: 1;
    position: relative;
    color: var(--color);
    font-size: var(--size);

    &:not(:last-child) {
      margin-right: var(--gap);
    }

    @include b(icon) {
      @include define(color, var(--color));

      font-size: var(--size);
    }

    @include m(active) {
      color: var(--active-color);

      @include b(icon) {
        @include define(color, var(--active-color));
      }
    }

    @include m(half) {
      @include b(rate) {
        @include e(character__half) {
          color: var(--active-color);

          @include b(icon) {
            color: var(--active-color);
          }
        }
      }
    }
  }

  @include e(character__half) {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
  }

  @include m(readonly) {
    cursor: default;
  }
}