@import './styles/<!--partnerName--settings-->';
@import './styles/tools';

.c-star-rating-selector__rating-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-direction: row;
}

.c-star-rating-selector__rating-option {
    border: 0 none $grey-middle;
    position: relative;
    width: 20px;
    padding: 6px 2px;
    box-sizing: content-box;
    cursor: pointer;
}

    .c-star-rating-selector__rating-option--selected,
    .c-star-rating-selector__rating-list:hover > .c-star-rating-selector__rating-option {
        border-color: orange;
    }
    .c-star-rating-selector__rating-option:hover ~ .c-star-rating-selector__rating-option {
        border-color: $grey-middle;
    }

    $starRatingPopoverColor: rgba(0, 0, 0, 0.8);
    .c-star-rating-selector__rating-option--tooltip:hover {
        &::before {
            content: attr(data-rating);
            display: inline-flex;
            justify-content: center;
            align-items: center;
            background: $starRatingPopoverColor;
            color: white;
            position: absolute;
            bottom: calc(100% + 12px);
            left: 50%;
            width: 24px;
            height: 24px;
            text-align: center;
            border-radius: 2px;
            font-size: 12px;
            transform: translateX(-50%);
        }
        &::after {
            content: '';
            display: block;
            position: absolute;
            bottom: calc(100% + 4px);
            left: 50%;
            width: 0;
            height: 0;
            border: 4px solid;
            border-color: $starRatingPopoverColor transparent transparent;
            transform: translateX(-50%);
        }
    }


.c-star-rating-selector__rating-option:hover > .c-star-rating-selector__rating-star {
    border-bottom-color: inherit;
    &::before,
    &::after {
        border-bottom-color: inherit;
    }
}
.c-star-rating-selector__rating-option:hover ~ .c-star-rating-selector__rating-option > .c-star-rating-selector__rating-star {
    border-bottom-color: inherit;
    &::before,
    &::after {
        border-bottom-color: inherit;
    }
}


    %commonStarPsuedoElementStyles {
        content: '';
        position: absolute;
        height: 0;
        width: 0;
    }
    .c-star-rating-selector__rating-star {
        position: relative;
        width: 0;
        height: 0;
        border-right: 10px solid transparent;
        border-bottom: 7px solid;
        border-bottom-color: inherit;
        border-left: 10px solid transparent;
        transform: rotate(35deg);
        &::before {
            @extend %commonStarPsuedoElementStyles;
            top: -5px;
            left: -7px;
            border-bottom: 8px solid;
            border-bottom-color: inherit;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            transform: rotate(-35deg);
        }
        &::after {
            @extend %commonStarPsuedoElementStyles;
            top: 0;
            left: -11px;
            border-right: 10px solid transparent;
            border-bottom: 7px solid;
            border-bottom-color: inherit;
            border-left: 10px solid transparent;
            transform: rotate(-70deg);
        }
    }