@import "src/assets/variables";
//need to escape hash to work with svg

$star-blue: '%2340606f' !default;
$star-color: $star-blue !default;
$star-background: 'white' !default;
$star-size: 20px !default;

.span-featured {
  cursor: pointer;
  @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>');
  }

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

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

}