:root {
    --main-color: #3a3a3a;
    --line: #ffffff66;
    --light-text: #aaa9a9;
    --feedback: #606060;
    --datestats: #5d5d5d;
    --win: #5ee790;
    --lose: #e4485d;
    --game: #484848;
}

.stars svg {
    cursor: pointer;
}

.stars svg:hover path,
.stars svg:first-child:hover path,
.stars svg:has(+ :hover) path,
.stars svg:has(+ * + :hover) path,
.stars svg:has(+ * + * + :hover) path,
.stars svg:has(+ * + * + * + :hover) path {
    fill-opacity: 1;
}

.stars svg:focus {
    outline: none;
}

.stars {
    display: inline-block;
    font-size: 1rem;
}

.stars:after {
    content: "";
    display: table;
    clear: both;
}

input[type="radio"] {
    display: none;
}

input[type="radio"]::before {
    content: '';
    width: 23px;
    height: 23px;
    display: inline-block;
    transform: translate(0, 0);
}

.star-rating__wrap:after {
    content: "";
    display: table;
    clear: both;
}

.star-rating__ico {
    float: right;
    padding-left: 2px;
    cursor: pointer;
}

.star-rating__ico:last-child {
    padding-left: 0;
}

.star-rating__input {
    display: none;
}

.star-rating__ico:hover:before,
.star-rating__ico:hover ~ .star-rating__ico:before,
.star-rating__input:checked ~ .star-rating__ico:before {
    content: "\f005";
}