@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 {
    &.subtle_star_dark {
      fill: $text_dk_default;
    }
    &.subtle_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_light: (color: $royal),
    primary_star_dark: (color: $active_dark),
    subtle_star_light: (color: $text_lt_default),
    subtle_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;
      }
    }
  }

  // Interactivity 
  path {
    transition: fill 0.2s
  }
  // Rails selected styles
  .interactive-star-icon {
    cursor: pointer;
  }
  .yellow-star-selected {
    color: $yellow; 
  }
  .primary-star-selected {
    color: $royal 
  }
  .subtle-star-selected {
    color: $text_lt_default;
  }
  &.dark {
    .primary-star-selected {
      color: $active_dark; 
    }
    .subtle-star-selected {
      color: $text_dk_default;
    }
  }
  // React selected styles
  &.star-selected {
    path {
      animation: growColor 0.3s forwards;
    }
    .yellow-star-selected {
      color: $yellow; 
    }
    .primary-star-selected {
      color: $royal;
    }
    .subtle-star-selected {
      color: $text_lt_default;
    }
    &.dark {
      .primary-star-selected {
        color: $active_dark; 
      }
      .subtle-star-selected {
        color: $text_dk_default;
      }
    }
  }
  // Hover styles
  .star-hovered {
    path {
      fill: mix($primary, $white, 20%);
    }
  }
  &.dark{
    .star-hovered {
      path {
        fill: mix($active_dark, $bg_dark, 50%);
      }
    }
  }
  // Focus styles
  .pb_custom_icon {
    &:focus {
      outline: none;
    }
    &:focus-visible {
      border-radius: 2px;
      outline: 1px solid $primary;
      outline-offset: 2px;
    }
  }
  &.dark {
    .pb_custom_icon {
      &:focus {
        outline: none;
      }   
      &:focus-visible {
        border-radius: 2px;
        outline: 1px solid $active_dark;
        outline-offset: 2px;
      }
    }
  }
}