frutjam/dist/components/radio.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;.radio-disabled{cursor:not-allowed;opacity:.3;pointer-events:none}.radio{--radius-radio:calc(var(--border-radius)*1.5);--color-radio:var(--color-base-soft);--color-on-radio:var(--color-on-base);--color-radio-active:var(--color-base-active);--color-radio-soft:var(--color-base-active);--color-on-radio-soft:var(--color-on-base-soft);padding:var(--radio--padding,.3125rem);width:var(--radio--width,1.25rem);height:var(--radio--height,1.25rem);aspect-ratio:1/1;flex-shrink:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;vertical-align:middle;cursor:pointer;position:relative;background-color:transparent;border-radius:var(--radio--radius,var(--radius-radio));outline-color:var(--color-radio-active);outline-style:solid;outline-width:1px;box-shadow:var(--radio--box-shadow);transition:background-color .2s ease,box-shadow .2s ease,opacity .2s ease;&:before{content:var(--tw-content);content:"";position:absolute;inset:4px;border-radius:50%;clip-path:circle(50%);background-color:var(--color-radio-active);opacity:0;transform:scale(.4);transition:transform .2s cubic-bezier(.4,0,.2,1),opacity .2s linear}&:focus-visible{outline-width:2px;outline-style:solid;outline-color:light-dark(var(--color-base-950,currentColor),var(--color-base-50,currentColor));outline-offset:3px}&:checked,&[aria-checked=true]{background-color:transparent;&:before{content:var(--tw-content);content:"";opacity:1;transform:scale(1)}}&:is(:disabled,[disabled],.radio-disabled){cursor:not-allowed;opacity:.3}}.radio-accent{--color-radio:var(--color-accent-soft);--color-on-radio:var(--color-on-accent);--color-radio-active:var(--color-accent-active);--color-radio-soft:var(--color-accent-soft);--color-on-radio-soft:var(--color-on-accent-soft)}.radio-error{--color-radio:var(--color-error-soft);--color-on-radio:var(--color-on-error);--color-radio-active:var(--color-error-active);--color-radio-soft:var(--color-error-soft);--color-on-radio-soft:var(--color-on-error-soft)}.radio-info{--color-radio:var(--color-info-soft);--color-on-radio:var(--color-on-info);--color-radio-active:var(--color-info-active);--color-radio-soft:var(--color-info-soft);--color-on-radio-soft:var(--color-on-info-soft)}.radio-neutral{--color-radio:var(--color-neutral-soft);--color-on-radio:var(--color-on-neutral);--color-radio-active:var(--color-neutral-active);--color-radio-soft:var(--color-neutral-soft);--color-on-radio-soft:var(--color-on-neutral-soft)}.radio-primary{--color-radio:var(--color-primary-soft);--color-on-radio:var(--color-on-primary);--color-radio-active:var(--color-primary-active);--color-radio-soft:var(--color-primary-soft);--color-on-radio-soft:var(--color-on-primary-soft)}.radio-secondary{--color-radio:var(--color-secondary-soft);--color-on-radio:var(--color-on-secondary);--color-radio-active:var(--color-secondary-active);--color-radio-soft:var(--color-secondary-soft);--color-on-radio-soft:var(--color-on-secondary-soft)}.radio-success{--color-radio:var(--color-success-soft);--color-on-radio:var(--color-on-success);--color-radio-active:var(--color-success-active);--color-radio-soft:var(--color-success-soft);--color-on-radio-soft:var(--color-on-success-soft)}.radio-warning{--color-radio:var(--color-warning-soft);--color-on-radio:var(--color-on-warning);--color-radio-active:var(--color-warning-active);--color-radio-soft:var(--color-warning-soft);--color-on-radio-soft:var(--color-on-warning-soft)}.radio-2xl{--radio--padding:0.5rem;--radio--width:2rem;--radio--height:2rem}.radio-lg{--radio--padding:0.375rem;--radio--width:1.5rem;--radio--height:1.5rem}.radio-md{--radio--padding:0.3125rem;--radio--width:1.25rem;--radio--height:1.25rem}.radio-sm{--radio--padding:0.25rem;--radio--width:1rem;--radio--height:1rem}.radio-xl{--radio--padding:0.4375rem;--radio--width:1.75rem;--radio--height:1.75rem}.radio-xs{--radio--padding:0.1875rem;--radio--width:0.75rem;--radio--height:0.75rem}.radio-circle{--radio--radius:9999px}.radio-rounded{--radio--radius:calc(var(--border-radius)*4)}.radio-square{--radio--radius:calc(var(--border-radius)*2)}@property --tw-content{syntax:"*";initial-value:"";inherits:false}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-content:""}}}