/// rating.less - Component for Feedback ratings with 5-stars

#ethlance-component-rating {
  primary-color: #color[secondary-accent];
  secondary-color: #color[background-light-accent-1];
  
}

.ethlance-component-rating {
  @small-size: 18px;
  @normal-size: 24px;
  @large-size: 36px;
  @margin-width: 0.5em;
  @num-stars: 5;
  
  // Width Dimensions
  @total-margin: @margin-width * @num-stars;
  @small-width: @small-size * @num-stars;
  @normal-width: @normal-size * @num-stars;
  @large-width: @large-size * @num-stars;

  display: flex;
  flex-direction: row;
  height: @normal-size;
  width: calc(@normal-width + @total-margin);
  align-items: center;

  .star {
    transition: all 0.1s;
    opacity: 0.5;
    margin-right: @margin-width;

    &.active {
      opacity: 1.0;
    }

    &.small {
      height: @small-size;
      width: calc(@small-size + @margin-width);
    }
    
    &.large {
      height: @large-size;
      width: calc(@large-size + @margin-width);
    }
  }

  &.small {
    width: calc(@small-width + @total-margin);
  }

  &.large {
    width: calc(@large-width + @total-margin);
  }
}
