star-rating {
    display: inline-block;

    --star-color: #f5b301;
    --star-empty-color: #cccccc;

    box-sizing: border-box;
}


star-rating .star-rating-control {

    display: flex;

    width: max-content;

    height: 100%;

    box-sizing: border-box;
}


star-rating .star-rating-star {

    display: block;

    width: auto;
    height: 100%;

    margin: 0;
    padding: 0 3px;

    border: none;

    background: transparent;

    color: var(--star-empty-color);

    font-size: 2rem;
    line-height: 1;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        color 0.1s ease,
        transform 0.1s ease;
}


star-rating .star-rating-star:hover {

    transform: scale(1.05);
}


star-rating .star-rating-star.selected {

    color: var(--star-color);
}


star-rating .star-rating-star:focus {

    outline: 2px solid var(--star-color);

    outline-offset: 2px;
}


star-rating
.star-rating-star:focus:not(:focus-visible) {

    outline: none;
}