.mn-rating {
    position: relative;
    display: flex;
    cursor: pointer;
}

.mn-rating .mn-rating-loading {
    display: none;
    opacity: 0.5;
    cursor: no-drop
}

.mn-rating .mn-rating-loading .mn-active-stars {
    animation-name: loading-stars;
    animation-duration: 0.5s;
    animation-direction: alternate;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes loading-stars {
    0% {
        -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%, rgba(0, 0, 0, 0) 100%);
    }

    20% {
        -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
    }

    40% {
        -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    }

    60% {
        -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
    }

    80% {
        -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%);
    }

    100% {
        -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    }

}

.mn-inactive-stars,
.mn-active-stars {
    display: flex;
    overflow: hidden;
}


.mn-rating .mn-rating-star .mn-rating-icon {
    transition: .3s all;
}

.mn-rating:hover .mn-rating-stars .mn-active-stars {
    width: 0 !important;
}

.mn-rating .mn-rating-star .mn-rating-icon,
.mn-rating .mn-rating-stars .mn-rating-star:hover~.mn-rating-star .mn-rating-icon {
    background-image: url("../svg/inactive.svg");
}

/* .mn-inactive-stars .mn-rating-star .mn-rating-icon {
    background-image: url("../svg/inactive.svg");
} */

.mn-active-stars {
    position: absolute;
    top: 0;
}

.mn-active-stars .mn-rating-star .mn-rating-icon {
    background-image: url("../svg/active.svg");
}

.mn-rating:hover .mn-rating-stars .mn-rating-star .mn-rating-icon {
    background-image: url("../svg/selected.svg");
}