@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

$rate-height: () !default;
$rate-height: map.merge(
  (
    'large': 24px,
    'default': 20px,
    'small': 16px,
  ),
  $rate-height
);

$rate: () !default;
$rate: map.merge(
  (
    'void-color': getCssVar('color-neutral-4'),
    'fill-color': getCssVar('color-yellow-3'),
    'disabled-void-color': getCssVar('color-neutral-3'),
    'text-color': getCssVar('color-neutral-9'),
  ),
  $rate
);

@include b(rate) {
  @include set-component-css-var('rate', $rate);
}

@include b(rate) {
  display: inline-flex;
  align-items: center;
  height: map.get($rate-height, 'default');

  &:focus,
  &:active {
    outline-width: 0;
  }

  @include e(item) {
    cursor: pointer;
    display: inline-block;
    position: relative;
    font-size: 0;
    vertical-align: middle;
    color: getCssVar('rate-void-color');
  }

  & .#{bem('rate', 'icon')} {
    position: relative;
    display: inline-block;
    font-size: map.get($rate-height, 'default');
    margin-right: map.get($rate-height, 'default') * 0.25;
    transition: getCssVar('transition-duration');

    &.hover {
      transform: scale(1.15);
    }

    .path2 {
      position: absolute;
      left: 0;
      top: 0;
    }

    @include when(active) {
      color: getCssVar('rate', 'fill-color');
    }
  }

  @include e(decimal) {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    overflow: hidden;
    color: getCssVar('rate', 'fill-color');
  }

  @include e(text) {
    font-size: 14px;
    vertical-align: middle;
    color: getCssVar('rate', 'text-color');
  }

  @each $size in (large, small) {
    @include m($size) {
      height: map.get($rate-height, $size);

      & .#{bem('rate', 'icon')} {
        font-size: map.get($rate-height, $size);
        margin-right: map.get($rate-height, $size) * 0.25;
      }
    }
  }

  @include when(disabled) {
    @include e(item) {
      cursor: auto;
      color: getCssVar('rate', 'disabled-void-color');
    }
  }
}