daisyui/components/toggle.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.7.17 - MIT License */ @layer utilities{@layer daisyui.l1.l2.l3{.toggle{border:var(--border) solid currentColor;color:var(--input-color);cursor:pointer;appearance:none;vertical-align:middle;-webkit-user-select:none;user-select:none;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)));padding:var(--toggle-p);box-shadow:0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset;--input-color:color-mix(in oklab, var(--color-base-content) 50%, #0000);--toggle-p:calc(var(--size) * .125);--size:calc(var(--size-selector,.25rem) * 6);width:calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2);height:var(--size);flex-shrink:0;grid-template-columns:0fr 1fr 1fr;place-content:center;transition:color .3s,grid-template-columns .2s;display:inline-grid;position:relative}.toggle>*{z-index:1;cursor:pointer;appearance:none;background-color:#0000;border:none;grid-column:2/span 1;grid-row-start:1;height:100%;padding:.125rem;transition:opacity .2s,rotate .4s;&:focus{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline-offset:2px;outline:2px solid #0000}}&:nth-child(2){color:var(--color-base-100);rotate:0deg}&:nth-child(3){color:var(--color-base-100);opacity:0;rotate:-15deg}}.toggle:has(:checked)>:nth-child(2){opacity:0;rotate:15deg}.toggle:has(:checked)>:nth-child(3){opacity:1;rotate:0deg}.toggle:before{aspect-ratio:1;border-radius:var(--radius-selector);--tw-content:"";content:var(--tw-content);width:100%;height:100%;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 color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000);background-color:currentColor;background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);grid-row-start:1;grid-column-start:2;transition:background-color .1s,translate .2s,inset-inline-start .2s;position:relative;inset-inline-start:0;translate:0}@media (forced-colors:active){.toggle:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{.toggle:before{outline-offset:-1rem;outline:.25rem solid}}.toggle:focus-visible,.toggle:has(:focus-visible){outline-offset:2px;outline:2px solid}.toggle:checked,.toggle[aria-checked=true],.toggle:has(>input:checked){background-color:var(--color-base-100);--input-color:var(--color-base-content);grid-template-columns:1fr 1fr 0fr;&:before{background-color:currentColor}@starting-style{&:before{opacity:0}}}.toggle:indeterminate{grid-template-columns:.5fr 1fr .5fr}.toggle:disabled{cursor:not-allowed;opacity:.3;&:before{border:var(--border) solid currentColor;background-color:#0000}}}@layer daisyui.l1.l2{.toggle-primary:checked,.toggle-primary[aria-checked=true]{--input-color:var(--color-primary)}.toggle-secondary:checked,.toggle-secondary[aria-checked=true]{--input-color:var(--color-secondary)}.toggle-accent:checked,.toggle-accent[aria-checked=true]{--input-color:var(--color-accent)}.toggle-neutral:checked,.toggle-neutral[aria-checked=true]{--input-color:var(--color-neutral)}.toggle-success:checked,.toggle-success[aria-checked=true]{--input-color:var(--color-success)}.toggle-warning:checked,.toggle-warning[aria-checked=true]{--input-color:var(--color-warning)}.toggle-info:checked,.toggle-info[aria-checked=true]{--input-color:var(--color-info)}.toggle-error:checked,.toggle-error[aria-checked=true]{--input-color:var(--color-error)}.toggle-xs[type=checkbox],.toggle-xs:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 4)}.toggle-sm[type=checkbox],.toggle-sm:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 5)}.toggle-md[type=checkbox],.toggle-md:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 6)}.toggle-lg[type=checkbox],.toggle-lg:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 7)}.toggle-xl[type=checkbox],.toggle-xl:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 8)}}@media (width>=640px){@layer daisyui.l1.l2.l3{.sm\:toggle{border:var(--border) solid currentColor;color:var(--input-color);cursor:pointer;appearance:none;vertical-align:middle;-webkit-user-select:none;user-select:none;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)));padding:var(--toggle-p);box-shadow:0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset;--input-color:color-mix(in oklab, var(--color-base-content) 50%, #0000);--toggle-p:calc(var(--size) * .125);--size:calc(var(--size-selector,.25rem) * 6);width:calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2);height:var(--size);flex-shrink:0;grid-template-columns:0fr 1fr 1fr;place-content:center;transition:color .3s,grid-template-columns .2s;display:inline-grid;position:relative}.sm\:toggle>*{z-index:1;cursor:pointer;appearance:none;background-color:#0000;border:none;grid-column:2/span 1;grid-row-start:1;height:100%;padding:.125rem;transition:opacity .2s,rotate .4s;&:focus{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline-offset:2px;outline:2px solid #0000}}&:nth-child(2){color:var(--color-base-100);rotate:0deg}&:nth-child(3){color:var(--color-base-100);opacity:0;rotate:-15deg}}.sm\:toggle:has(:checked)>:nth-child(2){opacity:0;rotate:15deg}.sm\:toggle:has(:checked)>:nth-child(3){opacity:1;rotate:0deg}.sm\:toggle:before{aspect-ratio:1;border-radius:var(--radius-selector);--tw-content:"";content:var(--tw-content);width:100%;height:100%;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 color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000);background-color:currentColor;background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);grid-row-start:1;grid-column-start:2;transition:background-color .1s,translate .2s,inset-inline-start .2s;position:relative;inset-inline-start:0;translate:0}@media (forced-colors:active){.sm\:toggle:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{.sm\:toggle:before{outline-offset:-1rem;outline:.25rem solid}}.sm\:toggle:focus-visible,.sm\:toggle:has(:focus-visible){outline-offset:2px;outline:2px solid}.sm\:toggle:checked,.sm\:toggle[aria-checked=true],.sm\:toggle:has(>input:checked){background-color:var(--color-base-100);--input-color:var(--color-base-content);grid-template-columns:1fr 1fr 0fr;&:before{background-color:currentColor}@starting-style{&:before{opacity:0}}}.sm\:toggle:indeterminate{grid-template-columns:.5fr 1fr .5fr}.sm\:toggle:disabled{cursor:not-allowed;opacity:.3;&:before{border:var(--border) solid currentColor;background-color:#0000}}}@layer daisyui.l1.l2{.sm\:toggle-primary:checked,.sm\:toggle-primary[aria-checked=true]{--input-color:var(--color-primary)}.sm\:toggle-secondary:checked,.sm\:toggle-secondary[aria-checked=true]{--input-color:var(--color-secondary)}.sm\:toggle-accent:checked,.sm\:toggle-accent[aria-checked=true]{--input-color:var(--color-accent)}.sm\:toggle-neutral:checked,.sm\:toggle-neutral[aria-checked=true]{--input-color:var(--color-neutral)}.sm\:toggle-success:checked,.sm\:toggle-success[aria-checked=true]{--input-color:var(--color-success)}.sm\:toggle-warning:checked,.sm\:toggle-warning[aria-checked=true]{--input-color:var(--color-warning)}.sm\:toggle-info:checked,.sm\:toggle-info[aria-checked=true]{--input-color:var(--color-info)}.sm\:toggle-error:checked,.sm\:toggle-error[aria-checked=true]{--input-color:var(--color-error)}.sm\:toggle-xs[type=checkbox],.sm\:toggle-xs:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 4)}.sm\:toggle-sm[type=checkbox],.sm\:toggle-sm:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 5)}.sm\:toggle-md[type=checkbox],.sm\:toggle-md:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 6)}.sm\:toggle-lg[type=checkbox],.sm\:toggle-lg:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 7)}.sm\:toggle-xl[type=checkbox],.sm\:toggle-xl:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 8)}}}@media (width>=768px){@layer daisyui.l1.l2.l3{.md\:toggle{border:var(--border) solid currentColor;color:var(--input-color);cursor:pointer;appearance:none;vertical-align:middle;-webkit-user-select:none;user-select:none;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)));padding:var(--toggle-p);box-shadow:0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset;--input-color:color-mix(in oklab, var(--color-base-content) 50%, #0000);--toggle-p:calc(var(--size) * .125);--size:calc(var(--size-selector,.25rem) * 6);width:calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2);height:var(--size);flex-shrink:0;grid-template-columns:0fr 1fr 1fr;place-content:center;transition:color .3s,grid-template-columns .2s;display:inline-grid;position:relative}.md\:toggle>*{z-index:1;cursor:pointer;appearance:none;background-color:#0000;border:none;grid-column:2/span 1;grid-row-start:1;height:100%;padding:.125rem;transition:opacity .2s,rotate .4s;&:focus{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline-offset:2px;outline:2px solid #0000}}&:nth-child(2){color:var(--color-base-100);rotate:0deg}&:nth-child(3){color:var(--color-base-100);opacity:0;rotate:-15deg}}.md\:toggle:has(:checked)>:nth-child(2){opacity:0;rotate:15deg}.md\:toggle:has(:checked)>:nth-child(3){opacity:1;rotate:0deg}.md\:toggle:before{aspect-ratio:1;border-radius:var(--radius-selector);--tw-content:"";content:var(--tw-content);width:100%;height:100%;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 color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000);background-color:currentColor;background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);grid-row-start:1;grid-column-start:2;transition:background-color .1s,translate .2s,inset-inline-start .2s;position:relative;inset-inline-start:0;translate:0}@media (forced-colors:active){.md\:toggle:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{.md\:toggle:before{outline-offset:-1rem;outline:.25rem solid}}.md\:toggle:focus-visible,.md\:toggle:has(:focus-visible){outline-offset:2px;outline:2px solid}.md\:toggle:checked,.md\:toggle[aria-checked=true],.md\:toggle:has(>input:checked){background-color:var(--color-base-100);--input-color:var(--color-base-content);grid-template-columns:1fr 1fr 0fr;&:before{background-color:currentColor}@starting-style{&:before{opacity:0}}}.md\:toggle:indeterminate{grid-template-columns:.5fr 1fr .5fr}.md\:toggle:disabled{cursor:not-allowed;opacity:.3;&:before{border:var(--border) solid currentColor;background-color:#0000}}}@layer daisyui.l1.l2{.md\:toggle-primary:checked,.md\:toggle-primary[aria-checked=true]{--input-color:var(--color-primary)}.md\:toggle-secondary:checked,.md\:toggle-secondary[aria-checked=true]{--input-color:var(--color-secondary)}.md\:toggle-accent:checked,.md\:toggle-accent[aria-checked=true]{--input-color:var(--color-accent)}.md\:toggle-neutral:checked,.md\:toggle-neutral[aria-checked=true]{--input-color:var(--color-neutral)}.md\:toggle-success:checked,.md\:toggle-success[aria-checked=true]{--input-color:var(--color-success)}.md\:toggle-warning:checked,.md\:toggle-warning[aria-checked=true]{--input-color:var(--color-warning)}.md\:toggle-info:checked,.md\:toggle-info[aria-checked=true]{--input-color:var(--color-info)}.md\:toggle-error:checked,.md\:toggle-error[aria-checked=true]{--input-color:var(--color-error)}.md\:toggle-xs[type=checkbox],.md\:toggle-xs:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 4)}.md\:toggle-sm[type=checkbox],.md\:toggle-sm:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 5)}.md\:toggle-md[type=checkbox],.md\:toggle-md:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 6)}.md\:toggle-lg[type=checkbox],.md\:toggle-lg:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 7)}.md\:toggle-xl[type=checkbox],.md\:toggle-xl:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 8)}}}@media (width>=1024px){@layer daisyui.l1.l2.l3{.lg\:toggle{border:var(--border) solid currentColor;color:var(--input-color);cursor:pointer;appearance:none;vertical-align:middle;-webkit-user-select:none;user-select:none;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)));padding:var(--toggle-p);box-shadow:0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset;--input-color:color-mix(in oklab, var(--color-base-content) 50%, #0000);--toggle-p:calc(var(--size) * .125);--size:calc(var(--size-selector,.25rem) * 6);width:calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2);height:var(--size);flex-shrink:0;grid-template-columns:0fr 1fr 1fr;place-content:center;transition:color .3s,grid-template-columns .2s;display:inline-grid;position:relative}.lg\:toggle>*{z-index:1;cursor:pointer;appearance:none;background-color:#0000;border:none;grid-column:2/span 1;grid-row-start:1;height:100%;padding:.125rem;transition:opacity .2s,rotate .4s;&:focus{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline-offset:2px;outline:2px solid #0000}}&:nth-child(2){color:var(--color-base-100);rotate:0deg}&:nth-child(3){color:var(--color-base-100);opacity:0;rotate:-15deg}}.lg\:toggle:has(:checked)>:nth-child(2){opacity:0;rotate:15deg}.lg\:toggle:has(:checked)>:nth-child(3){opacity:1;rotate:0deg}.lg\:toggle:before{aspect-ratio:1;border-radius:var(--radius-selector);--tw-content:"";content:var(--tw-content);width:100%;height:100%;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 color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000);background-color:currentColor;background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);grid-row-start:1;grid-column-start:2;transition:background-color .1s,translate .2s,inset-inline-start .2s;position:relative;inset-inline-start:0;translate:0}@media (forced-colors:active){.lg\:toggle:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{.lg\:toggle:before{outline-offset:-1rem;outline:.25rem solid}}.lg\:toggle:focus-visible,.lg\:toggle:has(:focus-visible){outline-offset:2px;outline:2px solid}.lg\:toggle:checked,.lg\:toggle[aria-checked=true],.lg\:toggle:has(>input:checked){background-color:var(--color-base-100);--input-color:var(--color-base-content);grid-template-columns:1fr 1fr 0fr;&:before{background-color:currentColor}@starting-style{&:before{opacity:0}}}.lg\:toggle:indeterminate{grid-template-columns:.5fr 1fr .5fr}.lg\:toggle:disabled{cursor:not-allowed;opacity:.3;&:before{border:var(--border) solid currentColor;background-color:#0000}}}@layer daisyui.l1.l2{.lg\:toggle-primary:checked,.lg\:toggle-primary[aria-checked=true]{--input-color:var(--color-primary)}.lg\:toggle-secondary:checked,.lg\:toggle-secondary[aria-checked=true]{--input-color:var(--color-secondary)}.lg\:toggle-accent:checked,.lg\:toggle-accent[aria-checked=true]{--input-color:var(--color-accent)}.lg\:toggle-neutral:checked,.lg\:toggle-neutral[aria-checked=true]{--input-color:var(--color-neutral)}.lg\:toggle-success:checked,.lg\:toggle-success[aria-checked=true]{--input-color:var(--color-success)}.lg\:toggle-warning:checked,.lg\:toggle-warning[aria-checked=true]{--input-color:var(--color-warning)}.lg\:toggle-info:checked,.lg\:toggle-info[aria-checked=true]{--input-color:var(--color-info)}.lg\:toggle-error:checked,.lg\:toggle-error[aria-checked=true]{--input-color:var(--color-error)}.lg\:toggle-xs[type=checkbox],.lg\:toggle-xs:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 4)}.lg\:toggle-sm[type=checkbox],.lg\:toggle-sm:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 5)}.lg\:toggle-md[type=checkbox],.lg\:toggle-md:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 6)}.lg\:toggle-lg[type=checkbox],.lg\:toggle-lg:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 7)}.lg\:toggle-xl[type=checkbox],.lg\:toggle-xl:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 8)}}}@media (width>=1280px){@layer daisyui.l1.l2.l3{.xl\:toggle{border:var(--border) solid currentColor;color:var(--input-color);cursor:pointer;appearance:none;vertical-align:middle;-webkit-user-select:none;user-select:none;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)));padding:var(--toggle-p);box-shadow:0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset;--input-color:color-mix(in oklab, var(--color-base-content) 50%, #0000);--toggle-p:calc(var(--size) * .125);--size:calc(var(--size-selector,.25rem) * 6);width:calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2);height:var(--size);flex-shrink:0;grid-template-columns:0fr 1fr 1fr;place-content:center;transition:color .3s,grid-template-columns .2s;display:inline-grid;position:relative}.xl\:toggle>*{z-index:1;cursor:pointer;appearance:none;background-color:#0000;border:none;grid-column:2/span 1;grid-row-start:1;height:100%;padding:.125rem;transition:opacity .2s,rotate .4s;&:focus{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline-offset:2px;outline:2px solid #0000}}&:nth-child(2){color:var(--color-base-100);rotate:0deg}&:nth-child(3){color:var(--color-base-100);opacity:0;rotate:-15deg}}.xl\:toggle:has(:checked)>:nth-child(2){opacity:0;rotate:15deg}.xl\:toggle:has(:checked)>:nth-child(3){opacity:1;rotate:0deg}.xl\:toggle:before{aspect-ratio:1;border-radius:var(--radius-selector);--tw-content:"";content:var(--tw-content);width:100%;height:100%;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 color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000);background-color:currentColor;background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);grid-row-start:1;grid-column-start:2;transition:background-color .1s,translate .2s,inset-inline-start .2s;position:relative;inset-inline-start:0;translate:0}@media (forced-colors:active){.xl\:toggle:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{.xl\:toggle:before{outline-offset:-1rem;outline:.25rem solid}}.xl\:toggle:focus-visible,.xl\:toggle:has(:focus-visible){outline-offset:2px;outline:2px solid}.xl\:toggle:checked,.xl\:toggle[aria-checked=true],.xl\:toggle:has(>input:checked){background-color:var(--color-base-100);--input-color:var(--color-base-content);grid-template-columns:1fr 1fr 0fr;&:before{background-color:currentColor}@starting-style{&:before{opacity:0}}}.xl\:toggle:indeterminate{grid-template-columns:.5fr 1fr .5fr}.xl\:toggle:disabled{cursor:not-allowed;opacity:.3;&:before{border:var(--border) solid currentColor;background-color:#0000}}}@layer daisyui.l1.l2{.xl\:toggle-primary:checked,.xl\:toggle-primary[aria-checked=true]{--input-color:var(--color-primary)}.xl\:toggle-secondary:checked,.xl\:toggle-secondary[aria-checked=true]{--input-color:var(--color-secondary)}.xl\:toggle-accent:checked,.xl\:toggle-accent[aria-checked=true]{--input-color:var(--color-accent)}.xl\:toggle-neutral:checked,.xl\:toggle-neutral[aria-checked=true]{--input-color:var(--color-neutral)}.xl\:toggle-success:checked,.xl\:toggle-success[aria-checked=true]{--input-color:var(--color-success)}.xl\:toggle-warning:checked,.xl\:toggle-warning[aria-checked=true]{--input-color:var(--color-warning)}.xl\:toggle-info:checked,.xl\:toggle-info[aria-checked=true]{--input-color:var(--color-info)}.xl\:toggle-error:checked,.xl\:toggle-error[aria-checked=true]{--input-color:var(--color-error)}.xl\:toggle-xs[type=checkbox],.xl\:toggle-xs:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 4)}.xl\:toggle-sm[type=checkbox],.xl\:toggle-sm:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 5)}.xl\:toggle-md[type=checkbox],.xl\:toggle-md:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 6)}.xl\:toggle-lg[type=checkbox],.xl\:toggle-lg:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 7)}.xl\:toggle-xl[type=checkbox],.xl\:toggle-xl:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 8)}}}@media (width>=1536px){@layer daisyui.l1.l2.l3{.\32 xl\:toggle{border:var(--border) solid currentColor;color:var(--input-color);cursor:pointer;appearance:none;vertical-align:middle;-webkit-user-select:none;user-select:none;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)));padding:var(--toggle-p);box-shadow:0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset;--input-color:color-mix(in oklab, var(--color-base-content) 50%, #0000);--toggle-p:calc(var(--size) * .125);--size:calc(var(--size-selector,.25rem) * 6);width:calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2);height:var(--size);flex-shrink:0;grid-template-columns:0fr 1fr 1fr;place-content:center;transition:color .3s,grid-template-columns .2s;display:inline-grid;position:relative}.\32 xl\:toggle>*{z-index:1;cursor:pointer;appearance:none;background-color:#0000;border:none;grid-column:2/span 1;grid-row-start:1;height:100%;padding:.125rem;transition:opacity .2s,rotate .4s;&:focus{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline-offset:2px;outline:2px solid #0000}}&:nth-child(2){color:var(--color-base-100);rotate:0deg}&:nth-child(3){color:var(--color-base-100);opacity:0;rotate:-15deg}}.\32 xl\:toggle:has(:checked)>:nth-child(2){opacity:0;rotate:15deg}.\32 xl\:toggle:has(:checked)>:nth-child(3){opacity:1;rotate:0deg}.\32 xl\:toggle:before{aspect-ratio:1;border-radius:var(--radius-selector);--tw-content:"";content:var(--tw-content);width:100%;height:100%;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 color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000);background-color:currentColor;background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);grid-row-start:1;grid-column-start:2;transition:background-color .1s,translate .2s,inset-inline-start .2s;position:relative;inset-inline-start:0;translate:0}@media (forced-colors:active){.\32 xl\:toggle:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{.\32 xl\:toggle:before{outline-offset:-1rem;outline:.25rem solid}}.\32 xl\:toggle:focus-visible,.\32 xl\:toggle:has(:focus-visible){outline-offset:2px;outline:2px solid}.\32 xl\:toggle:checked,.\32 xl\:toggle[aria-checked=true],.\32 xl\:toggle:has(>input:checked){background-color:var(--color-base-100);--input-color:var(--color-base-content);grid-template-columns:1fr 1fr 0fr;&:before{background-color:currentColor}@starting-style{&:before{opacity:0}}}.\32 xl\:toggle:indeterminate{grid-template-columns:.5fr 1fr .5fr}.\32 xl\:toggle:disabled{cursor:not-allowed;opacity:.3;&:before{border:var(--border) solid currentColor;background-color:#0000}}}@layer daisyui.l1.l2{.\32 xl\:toggle-primary:checked,.\32 xl\:toggle-primary[aria-checked=true]{--input-color:var(--color-primary)}.\32 xl\:toggle-secondary:checked,.\32 xl\:toggle-secondary[aria-checked=true]{--input-color:var(--color-secondary)}.\32 xl\:toggle-accent:checked,.\32 xl\:toggle-accent[aria-checked=true]{--input-color:var(--color-accent)}.\32 xl\:toggle-neutral:checked,.\32 xl\:toggle-neutral[aria-checked=true]{--input-color:var(--color-neutral)}.\32 xl\:toggle-success:checked,.\32 xl\:toggle-success[aria-checked=true]{--input-color:var(--color-success)}.\32 xl\:toggle-warning:checked,.\32 xl\:toggle-warning[aria-checked=true]{--input-color:var(--color-warning)}.\32 xl\:toggle-info:checked,.\32 xl\:toggle-info[aria-checked=true]{--input-color:var(--color-info)}.\32 xl\:toggle-error:checked,.\32 xl\:toggle-error[aria-checked=true]{--input-color:var(--color-error)}.\32 xl\:toggle-xs[type=checkbox],.\32 xl\:toggle-xs:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 4)}.\32 xl\:toggle-sm[type=checkbox],.\32 xl\:toggle-sm:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 5)}.\32 xl\:toggle-md[type=checkbox],.\32 xl\:toggle-md:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 6)}.\32 xl\:toggle-lg[type=checkbox],.\32 xl\:toggle-lg:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 7)}.\32 xl\:toggle-xl[type=checkbox],.\32 xl\:toggle-xl:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 8)}}}}