/* ============================================================
   Onesown Blazor Components – RadioButtonList
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */

.oo-radio-list {
    position: relative;
    outline: none;
    display: flex;
}

.oo-radio-list--vertical  { 
    flex-direction: column; 
}

.oo-radio-list--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.oo-radio-list.invalid .oo-radio--fake-input {
    outline: 1px solid var(--oo-danger);
}

/* ── Radio Item ──────────────────────────────────────────── */

.oo-radio-item {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 0.5rem;
    margin: 0;
    user-select: none;
}

.oo-radio-item input[type="radio"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ── Fake Radio Circle ───────────────────────────────────── */

.oo-radio--fake-input {
    flex-shrink: 0;
    position: relative;
    width: 1rem;
    height: 1rem;
    background: var(--oo-color-surface);
    border: 1.5px solid var(--oo-color-border-strong);
    border-radius: 50%;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}

.oo-radio-item input[type="radio"]:checked ~ .oo-radio--fake-input {
    background: var(--oo-primary);
    border-color: var(--oo-primary);
}

.oo-radio-item input[type="radio"]:disabled ~ .oo-radio--fake-input {
    background: var(--oo-gray-200);
    border-color: var(--oo-color-border-strong);
    cursor: not-allowed;
    opacity: 0.6;
}

.oo-radio-item input[type="radio"]:disabled:checked ~ .oo-radio--fake-input {
    background: var(--oo-gray-400);
    border-color: var(--oo-gray-400);
}

/* ── Innerer Punkt ───────────────────────────────────────── */

.oo-radio--fake-input::after {
    content: "";
    display: none;
    position: absolute;
    border-radius: 50%;
    background: var(--oo-primary-on);
    width: 40%;
    height: 40%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.oo-radio-item input[type="radio"]:checked ~ .oo-radio--fake-input::after {
    display: block;
}

/* ── Validation Tooltip ──────────────────────────────────── */

.oo-radio-list.invalid:hover .oo-validation-tooltip {
    display: block;
}