@import "src/assets/variables";

//need to escape hash to work with svg
$star-yellow: '%23ffe234' !default;
$star-orange: '%23ffa534' !default;
$star-red: '%23ff4545' !default;
$star-blue: '%2340606f' !default;
$star-green: '%2357e32c' !default;
$star-color: $star-orange !default;
$star-background: 'white' !default;

$star-small: 20px !default;
$star-medium: 30px !default;
$star-large: 45px !default;

@mixin star-outline-color($color) {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-40 -40 80 80"><path fill="#{$star-background}" stroke="#{$color}" stroke-width="2"  d="M 0.000 20.000 L 23.511 32.361 L 19.021 6.180 L 38.042 -12.361 L 11.756 -16.180 L 0.000 -40.000 L -11.756 -16.180 L -38.042 -12.361 L -19.021 6.180 L -23.511 32.361 L 0.000 20.000 "/></svg>');
}

@mixin star-color($color) {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"  viewBox="-40 -40 80 80"><path fill="#{$color}" stroke="#{$color}" stroke-width="2"  d="M 0.000 20.000 L 23.511 32.361 L 19.021 6.180 L 38.042 -12.361 L 11.756 -16.180 L 0.000 -40.000 L -11.756 -16.180 L -38.042 -12.361 L -19.021 6.180 L -23.511 32.361 L 0.000 20.000 "/></svg>');
}

.muncher-star {
  width: calc(#{$star-large} * 5);
  height: $star-large;
  background-size: $star-large $star-large;
  position: relative;
  display: inline-block;
  @include star-outline-color($star-color);

}

.muncher-star:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(#{$star-large} * var(--r, 1));
  background-size: $star-large $star-large;
  @include star-color($star-color);

}


.featured-star {
  width: calc(#{$star-large});
  height: $star-large;
  background-size: $star-large $star-large;
  position: relative;
  display: inline-block;
  @include star-outline-color($star-color);
  @include star-color($star-color);
}
.un-featured-star {
  width: calc(#{$star-large});
  height: $star-large;
  background-size: $star-large $star-large;
  position: relative;
  display: inline-block;
  @include star-outline-color($star-color);
}
.featured-star:hover {
  width: calc(#{$star-large});
  height: $star-large;
  background-size: $star-large $star-large;
  position: relative;
  display: inline-block;
  @include star-outline-color($star-color);

}
.un-featured-star:hover {
  width: calc(#{$star-large});
  height: $star-large;
  background-size: $star-large $star-large;
  position: relative;
  display: inline-block;
  @include star-outline-color($star-color);
  @include star-color($star-color);
}

.star-small {
  width: calc(#{$star-small} * 5);
  height: $star-small;
  background-size: $star-small $star-small;
}

.star-small:before {
  width: calc(#{$star-small} * var(--r, 1));
  background-size: $star-small $star-small;
}

.star-medium {
  width: calc(#{$star-medium} * 5);
  height: $star-medium;
  background-size: $star-medium $star-medium;
}

.star-medium:before {
  width: calc(#{$star-medium} * var(--r, 1));
  background-size: $star-medium $star-medium;
}

.star-yellow {
  @include star-outline-color($star-yellow);
}

.star-orange {
  @include star-outline-color($star-orange);
}

.star-red {
  @include star-outline-color($star-red);
}

.star-green {
  @include star-outline-color($star-green);
}

.star-blue {
  @include star-outline-color($star-blue);
}

.star-blue:before {
  @include star-color($star-blue);
}

.star-yellow:before {
  @include star-color($star-yellow);
}

.star-orange:before {
  @include star-color($star-orange);
}

.star-red:before {
  @include star-color($star-red);
}

.star-green:before {
  @include star-color($star-green);
}