@import '../../../styles/fills';
@import '../../../styles/mixins';
@import '../../../styles/definitions/typography';
@import '../../../styles/definitions/colors';

$starPositiveColor: $rating-positive-color;
$starSelectedColor: $rating-selected-color;
$starSize: 18px;
$starMargin: 2px;

.rating {

    &_wrapper {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        height: 100%;
    }
    
    &_rating,
    &_caption,
    &_numberOfRatings {
        @include text-6;
        @include color-title($dark-gray);
        line-height: 1;
        word-wrap: break-word;
    }
    &_rating,
    &_caption {
        margin-left: 6px;
        font-weight: bold;
        @include color-darkGray;
    }
    &_numberOfRatings {
        margin-left: 3px;
        @include color-darkGray;
    }
    &_rating {
        line-height: 1;
    }
    &_a11yCaption {
        @extend %sr-only;
    }
    &_numberOfRatings {
        height: 100%;
        line-height: 20px;
    }

    &_score {
        position: relative;
    }

    &_star {
        display: flex;
        align-items: center;

        &--positive {
            position: absolute;
            top: 0;
            left: 0;
        }

        &--selected {
          position: absolute;
          top: 0;
          left: 0;
      }

        &Item {
            width: var(--rating-star-width, #{$starSize});

            path {
                fill: white;
            }

            &--neutral {
                path {
                    stroke: var(--ratingStars, $starPositiveColor);
                }
            }

            &--positive {
                path {
                    fill: var(--ratingStars, $starPositiveColor);
                }
            }

            &--selected {
                path {
                    fill: $starSelectedColor;
                }
            }

            & + & {
                margin-left: $starMargin;
            }
        }
    }

    &_mask {
        --star-final-width: var(--rating-star-width, #{$starSize});
        --margins: calc(var(--rating-fullstars) * #{$starMargin});
        --partial-width: calc(var(--star-final-width) * var(--rating-partialstar));
        --full-width: calc(calc(var(--star-final-width) * var(--rating-fullstars) + var(--margins)));
        --final-width: calc(var(--full-width) + var(--partial-width));
        position: absolute;
        top: 0;
        left: 0;
        width: var(--final-width);
        height: 100%;
        overflow: hidden;
    }
}
