daisyui/components/radio.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.6.3 - MIT License */ @layer utilities{.radio{@layer daisyui.l1.l2.l3{cursor:pointer;appearance:none;vertical-align:middle;border:var(--border) solid var(--input-color,color-mix(in srgb, currentColor 20%, #0000));box-shadow:0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset;--size:calc(var(--size-selector,.25rem) * 6);width:var(--size);height:var(--size);color:var(--input-color,currentColor);border-radius:3.40282e38px;flex-shrink:0;padding:.25rem;display:inline-block;position:relative;&:before{--tw-content:"";content:var(--tw-content);background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);border-radius:3.40282e38px;width:100%;height:100%;display:block}&:focus-visible{outline:2px solid}&:checked,&[aria-checked=true]{background-color:var(--color-base-100);border-color:currentColor;@media (prefers-reduced-motion:no-preference){animation:.2s ease-out radio}&:before{box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1));background-color:currentColor}@media (forced-colors:active){&:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{&:before{outline-offset:-1rem;outline:.25rem solid}}}}}.radio-primary{@layer daisyui.l1.l2{--input-color:var(--color-primary)}}.radio-secondary{@layer daisyui.l1.l2{--input-color:var(--color-secondary)}}.radio-accent{@layer daisyui.l1.l2{--input-color:var(--color-accent)}}.radio-neutral{@layer daisyui.l1.l2{--input-color:var(--color-neutral)}}.radio-info{@layer daisyui.l1.l2{--input-color:var(--color-info)}}.radio-success{@layer daisyui.l1.l2{--input-color:var(--color-success)}}.radio-warning{@layer daisyui.l1.l2{--input-color:var(--color-warning)}}.radio-error{@layer daisyui.l1.l2{--input-color:var(--color-error)}}.radio:disabled{@layer daisyui.l1.l2{cursor:not-allowed;opacity:.2}}.radio-xs{@layer daisyui.l1.l2{padding:.125rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 4)}}}.radio-sm{@layer daisyui.l1.l2{padding:.1875rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 5)}}}.radio-md{@layer daisyui.l1.l2{padding:.25rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 6)}}}.radio-lg{@layer daisyui.l1.l2{padding:.3125rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 7)}}}.radio-xl{@layer daisyui.l1.l2{padding:.375rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 8)}}}@keyframes radio{0%{padding:5px}50%{padding:3px}}@media (width>=640px){.sm\:radio{@layer daisyui.l1.l2.l3{cursor:pointer;appearance:none;vertical-align:middle;border:var(--border) solid var(--input-color,color-mix(in srgb, currentColor 20%, #0000));box-shadow:0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset;--size:calc(var(--size-selector,.25rem) * 6);width:var(--size);height:var(--size);color:var(--input-color,currentColor);border-radius:3.40282e38px;flex-shrink:0;padding:.25rem;display:inline-block;position:relative;&:before{--tw-content:"";content:var(--tw-content);background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);border-radius:3.40282e38px;width:100%;height:100%;display:block}&:focus-visible{outline:2px solid}&:checked,&[aria-checked=true]{background-color:var(--color-base-100);border-color:currentColor;@media (prefers-reduced-motion:no-preference){animation:.2s ease-out radio}&:before{box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1));background-color:currentColor}@media (forced-colors:active){&:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{&:before{outline-offset:-1rem;outline:.25rem solid}}}}}.sm\:radio-primary{@layer daisyui.l1.l2{--input-color:var(--color-primary)}}.sm\:radio-secondary{@layer daisyui.l1.l2{--input-color:var(--color-secondary)}}.sm\:radio-accent{@layer daisyui.l1.l2{--input-color:var(--color-accent)}}.sm\:radio-neutral{@layer daisyui.l1.l2{--input-color:var(--color-neutral)}}.sm\:radio-info{@layer daisyui.l1.l2{--input-color:var(--color-info)}}.sm\:radio-success{@layer daisyui.l1.l2{--input-color:var(--color-success)}}.sm\:radio-warning{@layer daisyui.l1.l2{--input-color:var(--color-warning)}}.sm\:radio-error{@layer daisyui.l1.l2{--input-color:var(--color-error)}}.sm\:radio:disabled{@layer daisyui.l1.l2{cursor:not-allowed;opacity:.2}}.sm\:radio-xs{@layer daisyui.l1.l2{padding:.125rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 4)}}}.sm\:radio-sm{@layer daisyui.l1.l2{padding:.1875rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 5)}}}.sm\:radio-md{@layer daisyui.l1.l2{padding:.25rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 6)}}}.sm\:radio-lg{@layer daisyui.l1.l2{padding:.3125rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 7)}}}.sm\:radio-xl{@layer daisyui.l1.l2{padding:.375rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 8)}}}}@media (width>=768px){.md\:radio{@layer daisyui.l1.l2.l3{cursor:pointer;appearance:none;vertical-align:middle;border:var(--border) solid var(--input-color,color-mix(in srgb, currentColor 20%, #0000));box-shadow:0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset;--size:calc(var(--size-selector,.25rem) * 6);width:var(--size);height:var(--size);color:var(--input-color,currentColor);border-radius:3.40282e38px;flex-shrink:0;padding:.25rem;display:inline-block;position:relative;&:before{--tw-content:"";content:var(--tw-content);background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);border-radius:3.40282e38px;width:100%;height:100%;display:block}&:focus-visible{outline:2px solid}&:checked,&[aria-checked=true]{background-color:var(--color-base-100);border-color:currentColor;@media (prefers-reduced-motion:no-preference){animation:.2s ease-out radio}&:before{box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1));background-color:currentColor}@media (forced-colors:active){&:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{&:before{outline-offset:-1rem;outline:.25rem solid}}}}}.md\:radio-primary{@layer daisyui.l1.l2{--input-color:var(--color-primary)}}.md\:radio-secondary{@layer daisyui.l1.l2{--input-color:var(--color-secondary)}}.md\:radio-accent{@layer daisyui.l1.l2{--input-color:var(--color-accent)}}.md\:radio-neutral{@layer daisyui.l1.l2{--input-color:var(--color-neutral)}}.md\:radio-info{@layer daisyui.l1.l2{--input-color:var(--color-info)}}.md\:radio-success{@layer daisyui.l1.l2{--input-color:var(--color-success)}}.md\:radio-warning{@layer daisyui.l1.l2{--input-color:var(--color-warning)}}.md\:radio-error{@layer daisyui.l1.l2{--input-color:var(--color-error)}}.md\:radio:disabled{@layer daisyui.l1.l2{cursor:not-allowed;opacity:.2}}.md\:radio-xs{@layer daisyui.l1.l2{padding:.125rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 4)}}}.md\:radio-sm{@layer daisyui.l1.l2{padding:.1875rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 5)}}}.md\:radio-md{@layer daisyui.l1.l2{padding:.25rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 6)}}}.md\:radio-lg{@layer daisyui.l1.l2{padding:.3125rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 7)}}}.md\:radio-xl{@layer daisyui.l1.l2{padding:.375rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 8)}}}}@media (width>=1024px){.lg\:radio{@layer daisyui.l1.l2.l3{cursor:pointer;appearance:none;vertical-align:middle;border:var(--border) solid var(--input-color,color-mix(in srgb, currentColor 20%, #0000));box-shadow:0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset;--size:calc(var(--size-selector,.25rem) * 6);width:var(--size);height:var(--size);color:var(--input-color,currentColor);border-radius:3.40282e38px;flex-shrink:0;padding:.25rem;display:inline-block;position:relative;&:before{--tw-content:"";content:var(--tw-content);background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);border-radius:3.40282e38px;width:100%;height:100%;display:block}&:focus-visible{outline:2px solid}&:checked,&[aria-checked=true]{background-color:var(--color-base-100);border-color:currentColor;@media (prefers-reduced-motion:no-preference){animation:.2s ease-out radio}&:before{box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1));background-color:currentColor}@media (forced-colors:active){&:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{&:before{outline-offset:-1rem;outline:.25rem solid}}}}}.lg\:radio-primary{@layer daisyui.l1.l2{--input-color:var(--color-primary)}}.lg\:radio-secondary{@layer daisyui.l1.l2{--input-color:var(--color-secondary)}}.lg\:radio-accent{@layer daisyui.l1.l2{--input-color:var(--color-accent)}}.lg\:radio-neutral{@layer daisyui.l1.l2{--input-color:var(--color-neutral)}}.lg\:radio-info{@layer daisyui.l1.l2{--input-color:var(--color-info)}}.lg\:radio-success{@layer daisyui.l1.l2{--input-color:var(--color-success)}}.lg\:radio-warning{@layer daisyui.l1.l2{--input-color:var(--color-warning)}}.lg\:radio-error{@layer daisyui.l1.l2{--input-color:var(--color-error)}}.lg\:radio:disabled{@layer daisyui.l1.l2{cursor:not-allowed;opacity:.2}}.lg\:radio-xs{@layer daisyui.l1.l2{padding:.125rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 4)}}}.lg\:radio-sm{@layer daisyui.l1.l2{padding:.1875rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 5)}}}.lg\:radio-md{@layer daisyui.l1.l2{padding:.25rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 6)}}}.lg\:radio-lg{@layer daisyui.l1.l2{padding:.3125rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 7)}}}.lg\:radio-xl{@layer daisyui.l1.l2{padding:.375rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 8)}}}}@media (width>=1280px){.xl\:radio{@layer daisyui.l1.l2.l3{cursor:pointer;appearance:none;vertical-align:middle;border:var(--border) solid var(--input-color,color-mix(in srgb, currentColor 20%, #0000));box-shadow:0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset;--size:calc(var(--size-selector,.25rem) * 6);width:var(--size);height:var(--size);color:var(--input-color,currentColor);border-radius:3.40282e38px;flex-shrink:0;padding:.25rem;display:inline-block;position:relative;&:before{--tw-content:"";content:var(--tw-content);background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);border-radius:3.40282e38px;width:100%;height:100%;display:block}&:focus-visible{outline:2px solid}&:checked,&[aria-checked=true]{background-color:var(--color-base-100);border-color:currentColor;@media (prefers-reduced-motion:no-preference){animation:.2s ease-out radio}&:before{box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1));background-color:currentColor}@media (forced-colors:active){&:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{&:before{outline-offset:-1rem;outline:.25rem solid}}}}}.xl\:radio-primary{@layer daisyui.l1.l2{--input-color:var(--color-primary)}}.xl\:radio-secondary{@layer daisyui.l1.l2{--input-color:var(--color-secondary)}}.xl\:radio-accent{@layer daisyui.l1.l2{--input-color:var(--color-accent)}}.xl\:radio-neutral{@layer daisyui.l1.l2{--input-color:var(--color-neutral)}}.xl\:radio-info{@layer daisyui.l1.l2{--input-color:var(--color-info)}}.xl\:radio-success{@layer daisyui.l1.l2{--input-color:var(--color-success)}}.xl\:radio-warning{@layer daisyui.l1.l2{--input-color:var(--color-warning)}}.xl\:radio-error{@layer daisyui.l1.l2{--input-color:var(--color-error)}}.xl\:radio:disabled{@layer daisyui.l1.l2{cursor:not-allowed;opacity:.2}}.xl\:radio-xs{@layer daisyui.l1.l2{padding:.125rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 4)}}}.xl\:radio-sm{@layer daisyui.l1.l2{padding:.1875rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 5)}}}.xl\:radio-md{@layer daisyui.l1.l2{padding:.25rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 6)}}}.xl\:radio-lg{@layer daisyui.l1.l2{padding:.3125rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 7)}}}.xl\:radio-xl{@layer daisyui.l1.l2{padding:.375rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 8)}}}}@media (width>=1536px){.\32 xl\:radio{@layer daisyui.l1.l2.l3{cursor:pointer;appearance:none;vertical-align:middle;border:var(--border) solid var(--input-color,color-mix(in srgb, currentColor 20%, #0000));box-shadow:0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset;--size:calc(var(--size-selector,.25rem) * 6);width:var(--size);height:var(--size);color:var(--input-color,currentColor);border-radius:3.40282e38px;flex-shrink:0;padding:.25rem;display:inline-block;position:relative;&:before{--tw-content:"";content:var(--tw-content);background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);border-radius:3.40282e38px;width:100%;height:100%;display:block}&:focus-visible{outline:2px solid}&:checked,&[aria-checked=true]{background-color:var(--color-base-100);border-color:currentColor;@media (prefers-reduced-motion:no-preference){animation:.2s ease-out radio}&:before{box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1));background-color:currentColor}@media (forced-colors:active){&:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{&:before{outline-offset:-1rem;outline:.25rem solid}}}}}.\32 xl\:radio-primary{@layer daisyui.l1.l2{--input-color:var(--color-primary)}}.\32 xl\:radio-secondary{@layer daisyui.l1.l2{--input-color:var(--color-secondary)}}.\32 xl\:radio-accent{@layer daisyui.l1.l2{--input-color:var(--color-accent)}}.\32 xl\:radio-neutral{@layer daisyui.l1.l2{--input-color:var(--color-neutral)}}.\32 xl\:radio-info{@layer daisyui.l1.l2{--input-color:var(--color-info)}}.\32 xl\:radio-success{@layer daisyui.l1.l2{--input-color:var(--color-success)}}.\32 xl\:radio-warning{@layer daisyui.l1.l2{--input-color:var(--color-warning)}}.\32 xl\:radio-error{@layer daisyui.l1.l2{--input-color:var(--color-error)}}.\32 xl\:radio:disabled{@layer daisyui.l1.l2{cursor:not-allowed;opacity:.2}}.\32 xl\:radio-xs{@layer daisyui.l1.l2{padding:.125rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 4)}}}.\32 xl\:radio-sm{@layer daisyui.l1.l2{padding:.1875rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 5)}}}.\32 xl\:radio-md{@layer daisyui.l1.l2{padding:.25rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 6)}}}.\32 xl\:radio-lg{@layer daisyui.l1.l2{padding:.3125rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 7)}}}.\32 xl\:radio-xl{@layer daisyui.l1.l2{padding:.375rem;&[type=radio]{--size:calc(var(--size-selector,.25rem) * 8)}}}}}