.rating {
    display: flex;
    align-items: center;
    direction: rtl;
    justify-content: flex-end;
}

.rating span {
    position: relative;
}

.rating span input {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
}

.rating span label {
    background-color: var(--#{$variable-prefix}gray-400);
    display: block;
    width: 1rem;
    height: 1rem;
    margin-right: .125rem;
    position: relative;
    top: -.04rem;
    -webkit-mask-image: escape-svg($rating-star);
    mask-image: escape-svg($rating-star);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}

.rating span:hover~span label,
.rating span:hover label,
.rating span.checked label,
.rating span.checked~span label {
    background-color: $warning;
}


.rating-star {
    display: inline-flex;
    align-items: center;

    i {
    margin-right: .125rem;
        display: block;
        width: .875rem;
        height: .875rem;
        position: relative;
        top: -.04rem;
        -webkit-mask-image: escape-svg($rating-star);
        mask-image: escape-svg($rating-star);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
}
