.oo-rating-input {
    display: inline-flex;
    flex-direction: column;
    gap: var(--oo-space-1);
    position: relative;
}

.oo-rating-input__label {
    font-size: var(--oo-font-size-sm);
    color: var(--oo-color-text-subtle);
    font-weight: 500;
}

.oo-rating-input__symbols {
    display: inline-flex;
    gap: var(--oo-space-1);
    align-items: center;
}

.oo-rating-input__symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--oo-color-border-strong);
    transition: var(--oo-transition);
    border-radius: var(--oo-radius-sm);
    outline: none;
    user-select: none;
    font-size: 1.75rem;
}

.oo-rating-input__symbol .oo-icon {
    font-size: inherit;
}

.oo-rating-input__symbol:focus-visible {
    outline: 2px solid var(--oo-primary);
    outline-offset: 2px;
}

.oo-rating-input__symbol--aktiv {
    color: var(--oo-warning);
}

.oo-rating-input__symbol--hover {
    color: var(--oo-warning-light);
    transform: scale(1.15);
}

.oo-rating-input__symbol--readonly,
.oo-rating-input--readonly .oo-rating-input__symbol {
    cursor: default;
    pointer-events: none;
}

.oo-rating-input__symbol--disabled,
.oo-rating-input--disabled .oo-rating-input__symbol {
    cursor: not-allowed;
    color: var(--oo-color-text-disabled);
    pointer-events: none;
}

/* ── Validierung ─────────────────────────────────────────── */

.oo-rating-input.invalid .oo-rating-input__label {
    color: var(--oo-danger);
}

.oo-rating-input.invalid .oo-rating-input__symbol:not(.oo-rating-input__symbol--aktiv) {
    color: var(--oo-danger-light);
}

.oo-rating-input.invalid:hover .oo-validation-tooltip {
    display: block;
}

/* ── Size-Varianten ──────────────────────────────────────── */

.oo-rating-input.oo-size-xs .oo-rating-input__symbol,
.oo-rating-input.oo-size-xs .oo-rating-input__symbol .oo-icon { font-size: 1.1rem; }

.oo-rating-input.oo-size-sm .oo-rating-input__symbol,
.oo-rating-input.oo-size-sm .oo-rating-input__symbol .oo-icon { font-size: 1.4rem; }

.oo-rating-input.oo-size-lg .oo-rating-input__symbol,
.oo-rating-input.oo-size-lg .oo-rating-input__symbol .oo-icon { font-size: 2.25rem; }

.oo-rating-input.oo-size-xl .oo-rating-input__symbol,
.oo-rating-input.oo-size-xl .oo-rating-input__symbol .oo-icon { font-size: 3rem; }