.stars {
    display: inline-flex;
    gap: 4px;
}
.stars input {
    position: absolute;
    opacity: 0;
}
.stars label:hover {
    cursor: pointer;
}
.stars label {
    border: 2px solid transparent;
}

/* Star shape */
.star-inner {
    width: 20px;
    height: 20px;
    display: block;
    background: #FFF6EC;

    clip-path: polygon(
            50% 0%,
            61% 35%,
            98% 35%,
            68% 57%,
            79% 91%,
            50% 70%,
            21% 91%,
            32% 57%,
            2% 35%,
            39% 35%
    );
}


/* Focus */
.stars input:focus + label {
    border: 2px solid #FFF6EC;
}

.star.filled .star-inner,
.star.selected .star-inner {
    background: #FFF124;
}

#rating-form {
    opacity: 0;
    pointer-events: none;
}
#rating-form.active {
    opacity: 1;
    pointer-events: auto;
}