.starbox-container {
    position: relative;

    display: inline-block;

    width: 5em; /* star size * count */
    height: 1em;

    font-size: 18px !important; /* star size */
}

.starbox-changeable {
    cursor: pointer;
}

.starbox-bar {
    position: absolute;
    top: 0;
    left: 0;

    overflow: hidden;

    width: 100%;
    height: 100%;

    white-space: nowrap;
}

.starbox-star {
    display: inline-block;

    width: 1em;
    height: 1em;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.starbox-active > .starbox-star {
    background-image: url('/assets/website/starbox/star_active.svg');
}

.starbox-shadow > .starbox-star {
    background-image: url('/assets/website/starbox/star_shadow.svg');
}

@media (min-width: 380px) {
    .starbox-container {
        font-size: 24px !important; /* star size */
    }
}