/* ============================================================
   Onesown Blazor Components – RadioButtonList
   Tokens: _shared/theme.css (Dark: themes/dark.css)
   ============================================================ */

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

.oo-radio-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-1);
    min-width: 0;
    max-width: 100%;
}

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

.oo-radio-list__items {
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-1);
    min-width: 0;
}

.oo-radio-list--horizontal .oo-radio-list__items {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: var(--oo-space-4);
    row-gap: var(--oo-space-1);
}

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

.oo-radio-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--oo-space-2);
    min-width: 0;
    min-height: 1.5rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.oo-radio-list--disabled .oo-radio-item {
    cursor: not-allowed;
}

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

.oo-radio--label-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.oo-radio-list--disabled .oo-radio--label-text {
    color: var(--oo-color-text-disabled);
}

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

.oo-radio--fake-input {
    flex-shrink: 0;
    position: relative;
    width: 1.1rem;
    height: 1.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 var(--oo-transition), background var(--oo-transition);
}

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

.oo-radio-item input[type="radio"]:focus-visible ~ .oo-radio--fake-input {
    outline: 2px solid var(--oo-primary);
    outline-offset: 2px;
}

.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);
    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 ──────────────────────────────────────────── */

.oo-radio-list.invalid .oo-radio--fake-input {
    border-color: var(--oo-danger);
}

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

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

.oo-radio-list.oo-size-xs .oo-radio--fake-input {
    width: 0.85rem;
    height: 0.85rem;
}

.oo-radio-list.oo-size-sm .oo-radio--fake-input {
    width: 1rem;
    height: 1rem;
}

.oo-radio-list.oo-size-lg .oo-radio--fake-input {
    width: 1.35rem;
    height: 1.35rem;
}

.oo-radio-list.oo-size-xl .oo-radio--fake-input {
    width: 1.6rem;
    height: 1.6rem;
}