@use 'sass:color';
@use 'sass:list';
@use '../theme.scss' as *;

.be-rate {
  font-size: inherit;
  display: inline-flex;
  align-items: center;
  height: 1em;
  padding: 10px 0;
  .rate-item {
    display: inline-block;
    position: relative;
    width: 1em;
    aspect-ratio: 1;
    transition: transform 500ms ease;
    & > i {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      color: #d6d6d6;
    }
    i:first-child {
      z-index: 0;
    }
    i:last-child {
      display: none;
    }
    &:hover {
      // font-size: 1.2em;
      transform: scale(1.2);
      i:last-child {
        display: inline-block;
      }
    }
    &.check {
      // i:first-child {
      //   color: var(--be-orange-color);

      // }
      i:last-child {
        color: var(--be-yellow-color);
        text-shadow: 0 0 2px var(--be-orange-color);
        display: inline-block;
      }
    }
    &.half {
      i:last-child {
        width: 50%;
        overflow: hidden;
      }
    }
    & + .rate-item {
      margin-left: 0.3em;
    }
  }
  &.border {
    i:first-child {
      z-index: 1;
    }
    .check {
      i:first-child {
        color: var(--be-orange-color);
      }
    }
  }
  &.readonly {
    pointer-events: none;
  }
  &.disabled {
    pointer-events: none;
    .rate-item {
      i {
        color: #f2f2f2;
      }
    }
  }
}

@each $color, $value in $colors {
  $hoverColor: color.adjust($value, $lightness: -10%);
  $textColor: $white;
  .be-rate {
    &.#{$color} {
      &.disabled,
      &[disabled],
      &:disabled {
        cursor: default;
        //opacity: 0.5;
        color: #c4c4c4 !important;
        border-color: #c4c4c4 !important;
        background-color: #f2f2f2 !important;
        pointer-events: none;
        box-shadow: none;
      }
      .rate-item.check {
        i {
          color: $value;
          text-shadow: 0 0 2px $value;
        }
        i:first-child {
          color: color.adjust($value, $lightness: -10%);
        }
      }
    }
    &.light {
    }
  }
}