@import "../tokens/colors";
@import "../tokens/opacity";
@import "../tokens/spacing";


[class*=pb_star_rating_kit] {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;

  path {
    &.suble_star_dark {
      fill: $text_dk_default;
    }
    &.suble_star_light {
      fill: $text_lt_default;
    }
    &.outline_star_dark {
      stroke: $text_dk_lighter;
    }
    &.outline_star_light {
      stroke: $text_lt_lighter;
    }
    &.empty_star_dark {
      fill: $border_dark;
    }
    &.empty_star_light {
      fill: $border_light;
    }
  }

  .pb_star_rating_number_xs {
    max-height: 14px;
  }

  .pb_star_rating_number_sm {
    max-height: 14px;
  }

  .pb_star_rating_number_md {
    max-height: 24px;
  }

  .pb_star_rating_number_lg {
    max-height: 40px;
    height: 29px;
  }


  $star-styles: (
    yellow_star: (color: $yellow),
    primary_star: (color: $royal),
    suble_star_light: (color: $text_lt_default),
    suble_star_dark: (color: $text_dk_default),
    empty_star_dark: (color: $border_dark),
    empty_star_light: (color: $border_light),
    outline_empty_star_dark: (color: transparent),
    outline_empty_star_light: (color: transparent)
  );

  @each $class, $styles in $star-styles {
    .#{$class} {
      @each $property, $value in $styles {
        #{$property}: $value;
      }
    }
  }


  $star-styles: (
    pb_star_react_xs: (font-size: $text_small, ),
    pb_star_react_sm: (font-size: $text_base, ),
    pb_star_react_md: (font-size: 24px, ),
    pb_star_react_lg: (font-size: 48px, )
  );

  @each $class, $styles in $star-styles {
    .#{$class} {
      @each $property, $value in $styles {
        #{$property}: $value;
      }
    }
  }

  $star-styles: (
    pb_star_xs: (font-size: $text_small, width: 1em, margin-right: 4px),
    pb_star_sm: (font-size: $text_base, width: 1em, margin-right: 4px),
    pb_star_md: (font-size: 24px, width: 1em, margin-right: 6px),
    pb_star_lg: (font-size: 48px, width: 1em, margin-right: 12px)
  );

  @each $class, $styles in $star-styles {
    .#{$class} {
      @each $property, $value in $styles {
        #{$property}: $value;
      }
    }
  }

  $star-padding: (
    pb_star_padding_xs: (margin-right: 4px),
    pb_star_padding_sm: (margin-right: 4px),
    pb_star_padding_md: (margin-right: 6px),
    pb_star_padding_lg: (margin-right: 12px)
  );

  @each $class, $styles in $star-padding {
    .#{$class} {
      @each $property, $value in $styles {
        #{$property}: $value;
      }
    }
  }
  .yellow-star-selected {
    color: $yellow; 
  }
  .primary-star-selected {
    color: $royal 
  }
  .suble-star-selected {
    color: $text_lt_default;
  }
}