/*
 * Choice controls — Figma "checkbox" (4041:106), "radio" (4041:117),
 * "toggle" (4041:112) and "tick" (4257:956).
 *
 * Built on a real <input>, restyled with appearance: none, so keyboard
 * navigation, form submission and screen-reader semantics are the browser's.
 *
 * The maquette marks the selected state with the information blue, not with
 * the primary pink; only "tick" uses the action colour.
 */

.mo-checkbox,
.mo-radio {
    flex: none;
    width: var(--mo-scale-200);
    height: var(--mo-scale-200);
    margin: 0;
    appearance: none;
    border: 1px solid var(--mo-border-default-medium);
    background-color: var(--mo-surface-default-white);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.mo-checkbox {
    border-radius: var(--mo-scale-50);
}

.mo-radio {
    border-radius: var(--mo-radius-round);
}

.mo-checkbox:checked {
    border-color: var(--mo-surface-information);
    background-color: var(--mo-surface-information);
}

.mo-checkbox:checked::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--mo-white);
    /* Tick glyph: the "check" icon exported from the Figma icon set. */
    mask-image: url("../../icons/check-thWV1B3.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 12px 12px;
}

.mo-radio:checked {
    border-color: var(--mo-surface-information);
    background-color: var(--mo-surface-information);
    /* 8px inner dot, as in the exported asset (r=4 on a 16px box). */
    box-shadow: inset 0 0 0 3px var(--mo-white);
}

.mo-checkbox[aria-invalid='true'],
.mo-radio[aria-invalid='true'] {
    border-color: var(--mo-border-error);
}

.mo-checkbox--valid,
.mo-radio--valid {
    border-color: var(--mo-border-success);
}

.mo-checkbox:disabled,
.mo-radio:disabled {
    border-color: var(--mo-border-disabled);
    background-color: var(--mo-surface-disabled);
    cursor: not-allowed;
}

/* Label sitting next to a choice control. */
.mo-choice {
    display: inline-flex;
    align-items: center;
    gap: var(--mo-spacing-xs);
    cursor: pointer;
}

.mo-choice__label {
    font-size: var(--mo-font-size-body-md);
    line-height: var(--mo-line-height-body-md);
}

/* Toggle — 32x16 pill with a 12px knob. */
.mo-toggle {
    position: relative;
    flex: none;
    width: var(--mo-scale-400);
    height: var(--mo-scale-200);
    margin: 0;
    appearance: none;
    border: 1px solid var(--mo-border-default-medium);
    border-radius: var(--mo-radius-round);
    background-color: var(--mo-surface-default-white);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.mo-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    inset-inline-start: 1px;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    border-radius: var(--mo-radius-round);
    background-color: var(--mo-surface-primary);
    transition: inset-inline-start 120ms ease, background-color 120ms ease;
}

.mo-toggle:checked {
    border-color: var(--mo-surface-information);
    background-color: var(--mo-surface-information);
}

.mo-toggle:checked::after {
    inset-inline-start: 17px;
    background-color: var(--mo-white);
}

.mo-toggle:disabled {
    border-color: var(--mo-border-disabled);
    background-color: var(--mo-surface-disabled);
    cursor: not-allowed;
}

/* Tick — the 24px radio of the forms, in the action colour. */
.mo-tick {
    flex: none;
    width: var(--mo-scale-300);
    height: var(--mo-scale-300);
    margin: 0;
    appearance: none;
    border: 1px solid var(--mo-border-default-medium);
    border-radius: var(--mo-radius-round);
    background-color: var(--mo-surface-default-white);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.mo-tick:checked {
    border-color: var(--mo-border-action);
    background-color: var(--mo-surface-action-dark);
    box-shadow: inset 0 0 0 4px var(--mo-white);
}

.mo-tick:disabled {
    border-color: var(--mo-border-disabled);
    background-color: var(--mo-surface-disabled);
    cursor: not-allowed;
}