:root {
    --gl-star-size: 24px
}

@media screen and (min-width: 35em) {
    .gl-star-rating .gl-star-rating--stars > span {
        --gl-star-size: 30px
    }

    .gl-star-rating .gl-star-rating--stars[aria-label]:after {
        --gl-tooltip-padding: .75em 1em
    }
}

@media screen and (min-width: 42em) {
    .gl-star-rating .gl-star-rating--stars > span {
        --gl-star-size: 36px
    }
}

@media screen and (min-width: 50em) {
    .gl-star-rating .gl-star-rating--stars > span {
        --gl-star-size: 42px
    }
}



.gl-star-rating {
    display: none;
}

@media screen and (min-width: 42em) {
    .gl-star-rating {
        display: inherit !important;
    }
}

.gl-star-rating .gl-emote-bg {
    transition: fill .15s ease-in-out
}

.gl-star-rating [data-value]:not(.gl-active) .gl-emote-bg {
    fill: #dcdce6
}

.gl-star-rating .gl-emote {
    transform: scale(.9);
    transition: transform .25s ease-in-out
}

.gl-star-rating .gl-selected .gl-emote {
    transform: scale(1.1)
}

.gl-star-rating {
    opacity: 50%;
    transition: opacity .25s ease-in-out;
}
.gl-star-rating:hover {
    opacity: 100%;
}