<commit_before>@charset "UTF-8";

/*VARIABLES
====================================================*/

/*Range*/
$from-numOfStars: 1;
$to-numOfStars: 5;
$fractionSteps: 3;
$fractionSize: $to-numOfStars/$fractionSteps;

/*Spacing*/
$rating-margin-bottom: 5px;
$default-stars-label-margin: 5px;

/*Colors*/
$color-negative-rating: #f03c56 !default;
$color-middle-rating: #ffc058 !default;
$color-positive-rating: #7ed321 !default;
$color-disabled-rating: #999 !default;

/*Sizes*/

//default
$default-star-width: 20px !default;
$default-star-height: 20px !default;

$default-star-font-size: 26px !default;
$default-star-line-height: 21px !default;

$default-label-font-size: 18px !default;
$default-label-line-height: 18px !default;

//small
$small-label-font-size: 9.5px !default;
$small-label-line-height: 9.5px !default;

$small-star-width: 10px !default;
$small-star-height: 9, 5px !default;

$small-star-font-size: 11px !default;
$small-star-line-height: 10px !default;

//medium
$medium-star-width: $default-star-width;
$medium-star-height: $default-star-height;

$medium-label-font-size: $default-star-width;
$medium-label-line-height: $default-star-line-height;

$medium-star-font-size: $default-label-font-size;
$medium-star-line-height: $default-label-line-height;

//large
$large-star-width: 35px !default;
$large-star-height: 33.3px !default;

$large-star-font-size: 36px !default;
$large-star-line-height: 35px !default;

$large-label-font-size: 28px !default;
$large-star-line-height: 28px !default;

/*Animation*/
$default-animation-speed: 0.3s;
$slow-animation-speed: 0.8s;
$immediately-animation-type: none;
$default-animation-type: ease;

/*Icons*/
$default-star-character-empty: "\2606";
$default-star-character-half: "\f089";
$default-star-character-filled: "\2605";

/*Disabled*/
$disabled-opacity: 0.5;

/*
Star Rating

A beautiful ui component for displaying rating values of up to 5 stars with css only.
Options are:
- Value
- Size
- Spread
- Static Color
- Label Position
- Animation Speed
- Disabled

(in this html is additional angular markup to make the showcase interactive)


   markup:
   <div ng-init="data.rating = 0" class="rating padding value-{{data.rating}}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5] track by $index" ng-click="data.rating = $index+1">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
  </div>

   sg-wrapper:
   <div class="phone-simulator padding">
       <sg-wrapper-content/>
   </div>

Styleguide 1.0
*/

/*
Value

Different styles for different rating values. 
Default colors are red for values equal to 2 or below, yellow for 3, and green for 4 or above.

default                 - 0 rating
.value-1                - 1 rating
.value-2                - 2 rating
.value-3                - 3 rating
.value-4                - 4 rating
.value-5                - 5 rating

markup:
<div class="rating {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-half">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>


Styleguide 1.1
*/

/*
Half-Stars

Different styles for different rating values.
Default colors are red for values equal to 2 or below, yellow for 3, and green for 4 or above.

default                  - rating with full stars
.half                   - rating with half stars on the end

markup:
<div class="rating value-0 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-half">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-1 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-half">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-2 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-half">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-3 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-half">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-4 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-half">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-5 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-half">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>


Styleguide 1.2
*/

/*
Size

Different sizes of the stars and the label.
Additional to the default size medium there are more sizes, small and large.


default                  - Default size
.small                   - Small size
.medium                  - Medium size
.large                   - Large size

markup:
<div class="rating value-4 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>

Styleguide 1.3
*/

/*
Spread

Different spread options

default                  - No spread
.spread                  - Stars are spread to the entire container width

markup:
<div class="rating value-4 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>

Styleguide 1.4
*/

/*
Static Color

Overriding default colors of ratings to display the color independent of the rating.

default                  - No static color
.color-default           - Stars are always colored default
.color-positive          - Stars are always colored positive
.color-middle            - Stars are always colored middle
.color-negative          - Stars are always colored negative

markup:
<div class="rating {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-1 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-2 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-3 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-4 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-5 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>


Styleguide 1.5
*/

/*
Label Position

Displays the rating value as text label.

 default                 - Value displayed on the left side
.label-top               - Value displayed on the top
.label-right             - Value displayed on the right side
.label-bottom            - Value displayed on the bottom
.label-left              - Value displayed on the left side


markup:
<div class="rating padding {$modifiers}">
    <div class="label-value">0</div>
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-2 small padding {$modifiers}">
    <div class="label-value">(bad)</div>
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-3 medium padding {$modifiers}">
    <div class="label-value">3.1</div>
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-4 large padding {$modifiers}">
    <div class="label-value">Good</div>
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>

Styleguide 1.6
*/

/*
   Disabled

   Visualizes the disabled state of the rating component. The styles symbolizing that no interaction is possible

   default                   - Stars are un usual style
   .disabled                - Stars are grayed out, no interaction is possible

   markup:
   <div class="rating padding {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-2 small padding {$modifiers}">
    <div class="label-value">(bad)</div>
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-3 medium padding {$modifiers}">
    <div class="label-value">3.1</div>
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-4 large padding {$modifiers}">
    <div class="label-value">Good</div>
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>

   Styleguide 1.7
   */
/*
   Animation Speed

   By default the stars animate (fade) to the new state. These modifiers provide three different durations of the transition.

   default                   - Transition runs in noticeable speed
   .immediately              - No Transition
   .noticeable               - Transition runs in noticeable speed
   .slow                     - Transition runs very slow

   markup:
   <div ng-init="data.rating = 1" class="rating padding value-{{data.rating}} {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5] track by $index" ng-click="data.rating = (data.rating == 1)?5:1">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
  </div>

   Styleguide 1.8
   */

/*
   Star Type

   The stars can be generated oft of three different types. characters, svg's of any icon font

   default                  - The default star type is svg
   .star-img                - Star-Image form the shipped images
   .star-icon               - Star-Characters for default browser font
   .star-svg                - Star-Vectors form the shipped svg images

   markup:
  <div class="rating padding value-3 half {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5] track by $index">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-half">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
            <i class="star-empty fa fa-this-icon"></i>
            <i class="star-half fa fa-half-icon"></i>
            <i class="star-filled fa fa-that-icon"></i>
            <img class="star-empty" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
            <img class="star-half" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
            <img class="star-filled" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
        </div>
    </div>
  </div>

   Styleguide 1.9
*/


/*
Star element
==================================================================*/
.star {
  position: relative;

  svg, i, img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: block;
    font-style: normal;

    &.star-filled {
      opacity: 0;
    }
  }
}

/*
Star Container
==================================================================*/
.star-container {
  display: flex;
  align-items: center;
  flex: 0 0 auto;

  svg {
    z-index: 3;
  }
  i {
    z-index: 2;
  }
  img {
    z-index: 1;
  }
}

  /*Default styles and modifier
  ====================================================*/

  .rating {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: $rating-margin-bottom;

    .star-container {
      + .star {
        margin-left: $default-stars-label-margin;
      }
    }

  /*Rating Value
  ====================================================*/

  @for $i from $from-numOfStars through $to-numOfStars {
    &.value-#{$i} {

      .star-container {
        .star:nth-child(-n+#{$i}) {
          svg, i, img {
            &.star-filled {
              opacity: 1;
            }
          }
        }

        .star {
          svg, i, img {
            @if $i <= 2 {
              fill: $color-negative-rating;
              color: $color-negative-rating;
            }
            @if $i == 3 {
              fill: $color-middle-rating;
              color: $color-middle-rating;
            }
            @if $i >= 4 {
              fill: $color-positive-rating;
              color: $color-positive-rating;
            }
          }
        }
      }
    }
  }

  /*Half stars*/

  //by default half stars are hidden
  svg, i, img {
    &.star-half {
      opacity: 0;
    }
  }

  //if we hals ratings > 0 && < 1 we color the first star
  &.value-0.half {
    .star {
      svg,
      i,
      img {
        fill: $color-negative-rating;
        color: $color-negative-rating;
      }
    }
    .star:nth-child(1) {
      .star-half {
        opacity: 1;
      }
    }
  }

  @for $i from $from-numOfStars through $to-numOfStars {
    &.value-#{$i}.half {

      .star-container {
        @if ($i < $to-numOfStars) {
          .star:nth-child(#{$i+1}) {
            svg, i, img {
              &.star-half {
                opacity: 1;
              }
            }
          }
        }
      }

    }
  }

  /*Rating Position
  ====================================================*/

  &.label-top {
    flex-direction: column;

    .label-value {
      + .star-container {
        margin-left: 0;
        margin-right: 0;
        margin-top: $default-stars-label-margin;
      }
    }
  }

  //Default
  .star-container {
    margin-left: $default-stars-label-margin;
    margin-right: $default-stars-label-margin;
  }

  &.label-left .label-value {
    flex: 0 0 auto;

    + .star-container {
      margin-left: $default-stars-label-margin;
      margin-right: 0;
    }
  }

  &.label-right {
    flex-direction: row-reverse;

    .label-value {
      + .star-container {
        margin-left: 0;
        margin-right: $default-stars-label-margin;
      }
    }
  }

  &.label-bottom {
    flex-direction: column-reverse;

    .label-value {
      + .star-container {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: $default-stars-label-margin;
      }
    }
  }

  /*AnimationSpeed
  ====================================================*/

  //default
  .star {
    transition: all $default-animation-speed $default-animation-type;
    svg, i {
      transition: all $default-animation-speed $default-animation-type;
    }
  }

  &.immediately
  .star {
    transition: $immediately-animation-type;
    svg, i {
      transition: $immediately-animation-type;
    }
  }

  &.noticeable {
    .star {
      transition: all $default-animation-speed $default-animation-type;
      svg, i {
        transition: all $default-animation-speed $default-animation-type;
      }
    }
  }

  &.slow {
    .star {
      transition: all $slow-animation-speed $default-animation-type;
      svg, i {
        transition: all $slow-animation-speed $default-animation-type;
      }
    }
  }

  /* Star Type
  ====================================================*/

  //default
  .star {
    i {
      &.star-empty:before {
        content: $default-star-character-empty;
      }
      &.star-half:before {
        content: $default-star-character-half
      }<commit_msg>fix(scss): added img to animation section<commit_after>@charset "UTF-8";

/*VARIABLES
====================================================*/

/*Range*/
$from-numOfStars: 1;
$to-numOfStars: 5;
$fractionSteps: 3;
$fractionSize: $to-numOfStars/$fractionSteps;

/*Spacing*/
$rating-margin-bottom: 5px;
$default-stars-label-margin: 5px;

/*Colors*/
$color-negative-rating: #f03c56 !default;
$color-middle-rating: #ffc058 !default;
$color-positive-rating: #7ed321 !default;
$color-disabled-rating: #999 !default;

/*Sizes*/

//default
$default-star-width: 20px !default;
$default-star-height: 20px !default;

$default-star-font-size: 26px !default;
$default-star-line-height: 21px !default;

$default-label-font-size: 18px !default;
$default-label-line-height: 18px !default;

//small
$small-label-font-size: 9.5px !default;
$small-label-line-height: 9.5px !default;

$small-star-width: 10px !default;
$small-star-height: 9, 5px !default;

$small-star-font-size: 11px !default;
$small-star-line-height: 10px !default;

//medium
$medium-star-width: $default-star-width;
$medium-star-height: $default-star-height;

$medium-label-font-size: $default-star-width;
$medium-label-line-height: $default-star-line-height;

$medium-star-font-size: $default-label-font-size;
$medium-star-line-height: $default-label-line-height;

//large
$large-star-width: 35px !default;
$large-star-height: 33.3px !default;

$large-star-font-size: 36px !default;
$large-star-line-height: 35px !default;

$large-label-font-size: 28px !default;
$large-star-line-height: 28px !default;

/*Animation*/
$default-animation-speed: 0.3s;
$slow-animation-speed: 0.8s;
$immediately-animation-type: none;
$default-animation-type: ease;

/*Icons*/
$default-star-character-empty: "\2606";
$default-star-character-half: "\f089";
$default-star-character-filled: "\2605";

/*Disabled*/
$disabled-opacity: 0.5;

/*
Star Rating

A beautiful ui component for displaying rating values of up to 5 stars with css only.
Options are:
- Value
- Size
- Spread
- Static Color
- Label Position
- Animation Speed
- Disabled

(in this html is additional angular markup to make the showcase interactive)


   markup:
   <div ng-init="data.rating = 0" class="rating padding value-{{data.rating}}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5] track by $index" ng-click="data.rating = $index+1">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
  </div>

   sg-wrapper:
   <div class="phone-simulator padding">
       <sg-wrapper-content/>
   </div>

Styleguide 1.0
*/

/*
Value

Different styles for different rating values. 
Default colors are red for values equal to 2 or below, yellow for 3, and green for 4 or above.

default                 - 0 rating
.value-1                - 1 rating
.value-2                - 2 rating
.value-3                - 3 rating
.value-4                - 4 rating
.value-5                - 5 rating

markup:
<div class="rating {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-half">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>


Styleguide 1.1
*/

/*
Half-Stars

Different styles for different rating values.
Default colors are red for values equal to 2 or below, yellow for 3, and green for 4 or above.

default                  - rating with full stars
.half                   - rating with half stars on the end

markup:
<div class="rating value-0 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-half">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-1 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-half">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-2 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-half">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-3 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-half">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-4 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-half">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-5 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-half">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>


Styleguide 1.2
*/

/*
Size

Different sizes of the stars and the label.
Additional to the default size medium there are more sizes, small and large.


default                  - Default size
.small                   - Small size
.medium                  - Medium size
.large                   - Large size

markup:
<div class="rating value-4 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>

Styleguide 1.3
*/

/*
Spread

Different spread options

default                  - No spread
.spread                  - Stars are spread to the entire container width

markup:
<div class="rating value-4 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>

Styleguide 1.4
*/

/*
Static Color

Overriding default colors of ratings to display the color independent of the rating.

default                  - No static color
.color-default           - Stars are always colored default
.color-positive          - Stars are always colored positive
.color-middle            - Stars are always colored middle
.color-negative          - Stars are always colored negative

markup:
<div class="rating {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-1 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-2 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-3 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-4 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-5 {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>


Styleguide 1.5
*/

/*
Label Position

Displays the rating value as text label.

 default                 - Value displayed on the left side
.label-top               - Value displayed on the top
.label-right             - Value displayed on the right side
.label-bottom            - Value displayed on the bottom
.label-left              - Value displayed on the left side


markup:
<div class="rating padding {$modifiers}">
    <div class="label-value">0</div>
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-2 small padding {$modifiers}">
    <div class="label-value">(bad)</div>
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-3 medium padding {$modifiers}">
    <div class="label-value">3.1</div>
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-4 large padding {$modifiers}">
    <div class="label-value">Good</div>
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>

Styleguide 1.6
*/

/*
   Disabled

   Visualizes the disabled state of the rating component. The styles symbolizing that no interaction is possible

   default                   - Stars are un usual style
   .disabled                - Stars are grayed out, no interaction is possible

   markup:
   <div class="rating padding {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-2 small padding {$modifiers}">
    <div class="label-value">(bad)</div>
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-3 medium padding {$modifiers}">
    <div class="label-value">3.1</div>
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-4 large padding {$modifiers}">
    <div class="label-value">Good</div>
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5]">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>

   Styleguide 1.7
   */
/*
   Animation Speed

   By default the stars animate (fade) to the new state. These modifiers provide three different durations of the transition.

   default                   - Transition runs in noticeable speed
   .immediately              - No Transition
   .noticeable               - Transition runs in noticeable speed
   .slow                     - Transition runs very slow

   markup:
   <div ng-init="data.rating = 1" class="rating padding value-{{data.rating}} {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5] track by $index" ng-click="data.rating = (data.rating == 1)?5:1">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
  </div>

   Styleguide 1.8
   */

/*
   Star Type

   The stars can be generated oft of three different types. characters, svg's of any icon font

   default                  - The default star type is svg
   .star-img                - Star-Image form the shipped images
   .star-icon               - Star-Characters for default browser font
   .star-svg                - Star-Vectors form the shipped svg images

   markup:
  <div class="rating padding value-3 half {$modifiers}">
    <div class="star-container">
        <div class="star" ng-repeat="i in [1,2,3,4,5] track by $index">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-half">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
            <i class="star-empty fa fa-this-icon"></i>
            <i class="star-half fa fa-half-icon"></i>
            <i class="star-filled fa fa-that-icon"></i>
            <img class="star-empty" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
            <img class="star-half" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
            <img class="star-filled" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
        </div>
    </div>
  </div>

   Styleguide 1.9
*/


/*
Star element
==================================================================*/
.star {
  position: relative;

  svg, i, img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: block;
    font-style: normal;

    &.star-filled {
      opacity: 0;
    }
  }
}

/*
Star Container
==================================================================*/
.star-container {
  display: flex;
  align-items: center;
  flex: 0 0 auto;

  svg {
    z-index: 3;
  }
  i {
    z-index: 2;
  }
  img {
    z-index: 1;
  }
}

  /*Default styles and modifier
  ====================================================*/

  .rating {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: $rating-margin-bottom;

    .star-container {
      + .star {
        margin-left: $default-stars-label-margin;
      }
    }

  /*Rating Value
  ====================================================*/

  @for $i from $from-numOfStars through $to-numOfStars {
    &.value-#{$i} {

      .star-container {
        .star:nth-child(-n+#{$i}) {
          svg, i, img {
            &.star-filled {
              opacity: 1;
            }
          }
        }

        .star {
          svg, i, img {
            @if $i <= 2 {
              fill: $color-negative-rating;
              color: $color-negative-rating;
            }
            @if $i == 3 {
              fill: $color-middle-rating;
              color: $color-middle-rating;
            }
            @if $i >= 4 {
              fill: $color-positive-rating;
              color: $color-positive-rating;
            }
          }
        }
      }
    }
  }

  /*Half stars*/

  //by default half stars are hidden
  svg, i, img {
    &.star-half {
      opacity: 0;
    }
  }

  //if we hals ratings > 0 && < 1 we color the first star
  &.value-0.half {
    .star {
      svg,
      i,
      img {
        fill: $color-negative-rating;
        color: $color-negative-rating;
      }
    }
    .star:nth-child(1) {
      .star-half {
        opacity: 1;
      }
    }
  }

  @for $i from $from-numOfStars through $to-numOfStars {
    &.value-#{$i}.half {

      .star-container {
        @if ($i < $to-numOfStars) {
          .star:nth-child(#{$i+1}) {
            svg, i, img {
              &.star-half {
                opacity: 1;
              }
            }
          }
        }
      }

    }
  }

  /*Rating Position
  ====================================================*/

  &.label-top {
    flex-direction: column;

    .label-value {
      + .star-container {
        margin-left: 0;
        margin-right: 0;
        margin-top: $default-stars-label-margin;
      }
    }
  }

  //Default
  .star-container {
    margin-left: $default-stars-label-margin;
    margin-right: $default-stars-label-margin;
  }

  &.label-left .label-value {
    flex: 0 0 auto;

    + .star-container {
      margin-left: $default-stars-label-margin;
      margin-right: 0;
    }
  }

  &.label-right {
    flex-direction: row-reverse;

    .label-value {
      + .star-container {
        margin-left: 0;
        margin-right: $default-stars-label-margin;
      }
    }
  }

  &.label-bottom {
    flex-direction: column-reverse;

    .label-value {
      + .star-container {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: $default-stars-label-margin;
      }
    }
  }

  /*AnimationSpeed
  ====================================================*/

  //default
    .star-container {
      transition: all $default-animation-speed $default-animation-type;
      .star {
        transition: all $default-animation-speed $default-animation-type;
        svg, i, img{
          transition: all $default-animation-speed $default-animation-type;
        }
      }
    }

  &.immediately
  .star-container {
    transition: all $immediately-animation-type;
    .star {
      transition: $immediately-animation-type;
      svg, i, img {
        transition: $immediately-animation-type;
      }
    }
  }

  &.noticeable {
    .star-container {
      transition: all $default-animation-speed $default-animation-type;
      .star {
        transition: all $default-animation-speed $default-animation-type;
        svg, i, img {
          transition: all $default-animation-speed $default-animation-type;
        }
      }
    }
  }

  &.slow {
    .star-container {
      transition: all $slow-animation-speed $default-animation-type;
      .star {
        transition: all $slow-animation-speed $default-animation-type;
        svg, i, img {
          transition: all $slow-animation-speed $default-animation-type;
        }
      }
    }
  }

  /* Star Type
  ====================================================*/

  //default
  .star {
    i {
      &.star-empty:before {
        content: $default-star-character-empty;
      }
      &.star-half:before {
        content: $default-star-character-half
      }
{'fraction_non_alphanumeric': 0.18080084568137497, 'fraction_numerical': 0.02431333953013651, 'mean_word_length': 2.272965879265092, 'pattern_counts': {'":': 0, '<': 853, '<?xml version=': 0, '>': 851, 'https://': 0, 'lorem ipsum': 0, 'www.': 120, 'xml': 120}, 'pii_count': 0, 'substrings_counts': 6, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5191084', 'n_tokens_mistral': 19503, 'n_tokens_neox': 18255, 'n_words': 3212}