@class-prefix-rate: ~'adm-rate';

.@{class-prefix-rate} {
  --star-size: 24px;
  --active-color: var(--adm-color-yellow);
  --inactive-color: var(--adm-color-border);
  --inactive-color-half: var(--adm-color-border);

  display: inline-flex;
  touch-action: pan-y;
  user-select: none;
  &-box {
    position: relative;
  }

  &-star {
    padding: 0.125em;
    line-height: var(--star-size);
    font-size: var(--star-size);
    color: var(--inactive-color);
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.3s;
    &-half {
      padding-right: 0;
      width: 50%;
      position: absolute;
      left: 0;
      top: 0;
    }
    &-active {
      color: var(--active-color);
    }
    &-readonly {
      cursor: unset;
    }
  }

  &&-half {
    .@{class-prefix-rate}-star-half:not(.@{class-prefix-rate}-star-active) {
      color: var(--inactive-color-half);
    }
  }
}