.rating-wrap.rating-control {
    display                : inline-flex;
    align-items            : center;
    gap                    : 2px;
    --rating-hover-color   : #facc15;
    --rating-active-color  : var(--rating-hover-color);
    --rating-inactive-color: #9ca3af;
}

.rating-wrap.rating-control .rating-star-btn.btn.ex {
    min-width      : 26px;
    min-height     : 26px;
    border-radius  : 8px;
    border         : 0;
    background     : transparent;
    padding        : 0 !important;
    text-decoration: none !important;
    transition     : transform 0.14s ease;
}

.rating-wrap.rating-control .rating-star-btn.btn.ex .rating-star-icon {
    color     : var(--rating-inactive-color);
    transition: color 0.14s ease, transform 0.14s ease;
}

.rating-wrap.rating-control .rating-star-btn.rating-active .rating-star-icon,
.rating-wrap.rating-control .rating-star-btn.rating-hover-active .rating-star-icon {
    color: var(--rating-active-color);
}

.rating-wrap.rating-control .rating-star-btn.rating-inactive .rating-star-icon {
    color: var(--rating-inactive-color);
}

.rating-wrap.rating-control:not(.rating-readonly) .rating-star-btn.btn.ex:hover .rating-star-icon,
.rating-wrap.rating-control:not(.rating-readonly) .rating-star-btn.btn.ex:focus-visible .rating-star-icon {
    color    : var(--rating-hover-color);
    transform: scale(1.06);
}

.rating-wrap.rating-control:not(.rating-readonly) .rating-star-btn.btn.ex:hover,
.rating-wrap.rating-control:not(.rating-readonly) .rating-star-btn.btn.ex:focus-visible {
    transform: translateY(-1px);
}

.rating-wrap.rating-control .rating-star-btn.btn.ex:focus-visible {
    outline       : 2px solid color-mix(in srgb, var(--rating-hover-color) 55%, #fff);
    outline-offset: 1px;
}

.rating-wrap.rating-control.rating-readonly .rating-star-btn.btn.ex,
.rating-wrap.rating-control .rating-star-btn.btn.ex.disabled {
    cursor: default;
}