:root {
    --nb-rating-show-stars-inactive-color: var(--nb-color-gray-300);
    --nb-rating-show-stars-active-color: var(--nb-color-yellow);
}

.nb-rating-show {
    position: relative;
    max-width: max-content;
}

.nb-rating-show-stars-inactive,
.nb-rating-show-stars-active {
    display: flex;
}

.nb-rating-show-stars-inactive {
    color: var(--nb-rating-show-stars-inactive-color);
}

.nb-rating-show-stars-active {
    width: 0;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.3s ease-in-out;
    color: var(--nb-rating-show-stars-active-color);
}