.c-rating {
    $state--natural-color   = #d2d2d2
    $state--selected-color  = $color--main;
    $state--hover-color     = #4c8dff;
    $state--pressed-color   = #385ef6;

    delay-transition(index, to = right) {
        if to == right {
            return ((index - 1) * 0.05)s;
        }
        else {
            return ((5 - index) * 0.05)s;
        }
    }

    font-size: 20px;
    color: $state--natural-color;

    &__input {
        position: absolute;
        opacity: 0;
        pointer-events: none;

        for input in 1..5 {
            &--{input}:checked,
            &--{input}:focus {
                & ~ .c-rating__stars {
                    for star in 1..input {
                        & > .c-rating__stars-item:nth-child({star}) {
                            color: $state--selected-color;
                            transition-delay: delay-transition(star);

                            if star == input {
                                &:before {
                                    content: '';
                                    display: block;
                                    position: absolute;
                                    width: 100%;
                                    height: 100%;
                                    border-radius: 50em;
                                    animation: highlight-star .75s @transition-delay ease-out;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    &__stars {
        display: inline-block;
        
        &:hover {
            & > .c-rating__stars-item {
                color: $state--hover-color;

                for star in 1..5 {
                    &:nth-child({star}) {
                        transition-delay: delay-transition(star);
                    }
                }
            }
        }

        &-item {
            display: inline-block;
            position: relative;
            transition: .2s;
            cursor: pointer;

            for star in 1..5 {
                &:nth-child({star}) {
                    transition-delay: delay-transition(star, left);
                }
            }

            &:hover {
                & ~ .c-rating__stars-item {
                    color: $state--natural-color;
                }
            }
        }
    }
}

@keyframes highlight-star {
    0% {
        transform: scale(1);
        box-shadow: inset 0 0 0 .5em currentColor;
        opacity: .3;
    }
    100% {
        transform: scale(5);
        box-shadow: inset 0 0 0 0 currentColor;
        opacity: 0;
    }
}