livewire-material/resources/css/components/radio.css

/*
 * <x-radio>: M3's radio buttons (resources/views/components/radio.blade.php), on the row the
 * selection controls share (components/selection.css).
 *
 * RadioButtonTokens (androidx Compose Material 3, Apache-2.0): a 20px ring with a 2px
 * on-surface-variant outline, primary once chosen, and a 10px primary dot that grows in on the fast
 * spatial spring; the state layer a 40px circle around it. With the server's error the ring and
 * the dot are error. Disabled, both are on-surface at 38%. Beside a hint the ring drops 2px, to sit
 * on the label's first line.
 *
 * The group is a <fieldset> whose legend (label-large, on-surface-variant, 12px above the options)
 * is the question. The options stack 16px apart, as M3 lays radio buttons out; `data-md-inline`
 * lays them in a wrapping row 24px apart from `medium` (600px), and compact always stacks. The
 * hint, or the errors in its place, sits 8px under the options.
 *
 *   [data-md-radio]                 the <fieldset>; `class` and `style` land here; data-md-inline
 *     [data-md-radio-legend]
 *     [data-md-radio-options]
 *       [data-md-selection-row]
 *         [data-md-radio-button]    the ring: input, [data-md-radio-dot]
 *     [data-md-selection-support]   the hint, or the errors
 */

@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

@import './selection.css';

@layer material.components {
    [data-md-radio] {
        min-width: 0;
    }

    [data-md-radio-legend] {
        margin-bottom: 12px;
        color: var(--md-sys-color-on-surface-variant);
        font: var(--md-sys-typescale-label-lg);
        letter-spacing: var(--md-sys-typescale-label-lg-tracking);
        font-variation-settings: normal;
    }

    [data-md-radio-options] {
        display: grid;
        gap: var(--md-sys-measurement-space200);
    }

    /* M3 stacks radio buttons and cautions against a row at any width; `inline` is for two or three
       short labels, and only from medium. */
    @media (width >= 600px) {
        [data-md-radio][data-md-inline] [data-md-radio-options] {
            display: flex;
            flex-wrap: wrap;
            column-gap: var(--md-sys-measurement-space300);
        }
    }

    [data-md-radio] [data-md-selection-support] {
        margin-top: var(--md-sys-measurement-space100);
        color: var(--md-sys-color-on-surface-variant);
        font: var(--md-sys-typescale-body-sm);
        letter-spacing: var(--md-sys-typescale-body-sm-tracking);
        font-variation-settings: normal;
    }

    [data-md-radio] [data-md-selection-support][role='alert'] {
        color: var(--md-sys-color-error);
    }

    [data-md-radio-button] {
        position: relative;
        display: grid;
        flex: none;
        place-items: center;
        width: 20px;
        height: 20px;
    }

    [data-md-radio-button] > * {
        grid-area: 1 / 1;
    }

    [data-md-selection-row]:has([data-md-selection-hint]) [data-md-radio-button] {
        margin-top: var(--md-sys-measurement-space25);
    }

    [data-md-radio-button]::before {
        inset: -10px;
    }

    [data-md-radio-button]:has(input:focus-visible)::before {
        outline: 3px solid var(--md-sys-color-secondary);
    }

    [data-md-radio-button] input {
        width: 20px;
        height: 20px;
        border: 2px solid var(--md-sys-color-on-surface-variant);
        border-radius: var(--md-sys-shape-corner-full);
    }

    [data-md-radio-button] [data-md-radio-dot] {
        width: 10px;
        height: 10px;
        border-radius: var(--md-sys-shape-corner-full);
        background-color: var(--md-sys-color-primary);
        scale: 0;
        pointer-events: none;
        transition: scale var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);
    }

    [data-md-radio-button] input:checked {
        border-color: var(--md-sys-color-primary);
    }

    [data-md-radio-button] input:checked ~ [data-md-radio-dot] {
        scale: 1;
    }

    [data-md-selection-row][data-md-invalid] [data-md-radio-button] input {
        border-color: var(--md-sys-color-error);
    }

    [data-md-selection-row][data-md-invalid] [data-md-radio-button] [data-md-radio-dot] {
        background-color: var(--md-sys-color-error);
    }

    [data-md-radio-button] input:disabled {
        border-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
    }

    [data-md-radio-button] input:disabled ~ [data-md-radio-dot] {
        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
    }
}