.iconWrapper_x37cD {
    display: flex;
    align-items: center;
    justify-content: center;

    --background-color-inactive: var(--color-background-mid);
    --background-color-ok: var(--color-warning-main);
    --background-color-good: var(--color-success-main);
    --background-color-bad: var(--color-danger-main);
    --background-color: var(--background-color-inactive);
    background-color: var(--background-color);
    color: var(--color-text-mid);

    /* Size dependent styles, the .iconWrapper component should provide the --rating-size property */
    width: var(--rating-size);
    height: var(--rating-size);
    border-radius: var(--rating-size);
}

.icon_TnMUQ {
    /* Size dependent styles, the .iconWrapper component should provide the --rating-size property */
    width: calc(0.75 * var(--rating-size));
    height: calc(0.75 * var(--rating-size));
}

.active_CllGx.ok_V1sO-,
.interactive_B2TwX.ok_V1sO-:focus,
.interactive_B2TwX.ok_V1sO-:hover {
    --background-color: var(--background-color-ok);
}
.active_CllGx.good_nqe9w,
.interactive_B2TwX.good_nqe9w:focus,
.interactive_B2TwX.good_nqe9w:hover {
    --background-color: var(--background-color-good);
}
.active_CllGx.bad_pz0f3,
.interactive_B2TwX.bad_pz0f3:focus,
.interactive_B2TwX.bad_pz0f3:hover {
    --background-color: var(--background-color-bad);
}

.active_CllGx .icon_TnMUQ,
.interactive_B2TwX:focus .icon_TnMUQ,
.interactive_B2TwX:hover .icon_TnMUQ {
    color: var(--color-text-primary-text-inside);
}