daisyui/components/toggle.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.6.3 - MIT License */ @layer utilities{.toggle{@layer daisyui.l1.l2.l3{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;&>*{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}}&:has(:checked){&>:nth-child(2){opacity:0;rotate:15deg}&>:nth-child(3){opacity:1;rotate:0deg}}&: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){&:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{&:before{outline-offset:-1rem;outline:.25rem solid}}&:focus-visible,&:has(:focus-visible){outline-offset:2px;outline:2px solid}&:checked,&[aria-checked=true],&: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}}}&:indeterminate{grid-template-columns:.5fr 1fr .5fr}&:disabled{cursor:not-allowed;opacity:.3;&:before{border:var(--border) solid currentColor;background-color:#0000}}}}.toggle-primary{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-primary)}}}.toggle-secondary{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-secondary)}}}.toggle-accent{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-accent)}}}.toggle-neutral{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-neutral)}}}.toggle-success{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-success)}}}.toggle-warning{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-warning)}}}.toggle-info{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-info)}}}.toggle-error{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-error)}}}.toggle-xs{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 4)}}}.toggle-sm{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 5)}}}.toggle-md{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 6)}}}.toggle-lg{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 7)}}}.toggle-xl{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 8)}}}@media (width>=640px){.sm\:toggle{@layer daisyui.l1.l2.l3{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;&>*{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}}&:has(:checked){&>:nth-child(2){opacity:0;rotate:15deg}&>:nth-child(3){opacity:1;rotate:0deg}}&: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){&:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{&:before{outline-offset:-1rem;outline:.25rem solid}}&:focus-visible,&:has(:focus-visible){outline-offset:2px;outline:2px solid}&:checked,&[aria-checked=true],&: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}}}&:indeterminate{grid-template-columns:.5fr 1fr .5fr}&:disabled{cursor:not-allowed;opacity:.3;&:before{border:var(--border) solid currentColor;background-color:#0000}}}}.sm\:toggle-primary{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-primary)}}}.sm\:toggle-secondary{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-secondary)}}}.sm\:toggle-accent{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-accent)}}}.sm\:toggle-neutral{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-neutral)}}}.sm\:toggle-success{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-success)}}}.sm\:toggle-warning{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-warning)}}}.sm\:toggle-info{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-info)}}}.sm\:toggle-error{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-error)}}}.sm\:toggle-xs{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 4)}}}.sm\:toggle-sm{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 5)}}}.sm\:toggle-md{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 6)}}}.sm\:toggle-lg{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 7)}}}.sm\:toggle-xl{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 8)}}}}@media (width>=768px){.md\:toggle{@layer daisyui.l1.l2.l3{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;&>*{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}}&:has(:checked){&>:nth-child(2){opacity:0;rotate:15deg}&>:nth-child(3){opacity:1;rotate:0deg}}&: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){&:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{&:before{outline-offset:-1rem;outline:.25rem solid}}&:focus-visible,&:has(:focus-visible){outline-offset:2px;outline:2px solid}&:checked,&[aria-checked=true],&: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}}}&:indeterminate{grid-template-columns:.5fr 1fr .5fr}&:disabled{cursor:not-allowed;opacity:.3;&:before{border:var(--border) solid currentColor;background-color:#0000}}}}.md\:toggle-primary{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-primary)}}}.md\:toggle-secondary{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-secondary)}}}.md\:toggle-accent{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-accent)}}}.md\:toggle-neutral{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-neutral)}}}.md\:toggle-success{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-success)}}}.md\:toggle-warning{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-warning)}}}.md\:toggle-info{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-info)}}}.md\:toggle-error{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-error)}}}.md\:toggle-xs{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 4)}}}.md\:toggle-sm{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 5)}}}.md\:toggle-md{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 6)}}}.md\:toggle-lg{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 7)}}}.md\:toggle-xl{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 8)}}}}@media (width>=1024px){.lg\:toggle{@layer daisyui.l1.l2.l3{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;&>*{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}}&:has(:checked){&>:nth-child(2){opacity:0;rotate:15deg}&>:nth-child(3){opacity:1;rotate:0deg}}&: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){&:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{&:before{outline-offset:-1rem;outline:.25rem solid}}&:focus-visible,&:has(:focus-visible){outline-offset:2px;outline:2px solid}&:checked,&[aria-checked=true],&: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}}}&:indeterminate{grid-template-columns:.5fr 1fr .5fr}&:disabled{cursor:not-allowed;opacity:.3;&:before{border:var(--border) solid currentColor;background-color:#0000}}}}.lg\:toggle-primary{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-primary)}}}.lg\:toggle-secondary{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-secondary)}}}.lg\:toggle-accent{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-accent)}}}.lg\:toggle-neutral{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-neutral)}}}.lg\:toggle-success{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-success)}}}.lg\:toggle-warning{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-warning)}}}.lg\:toggle-info{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-info)}}}.lg\:toggle-error{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-error)}}}.lg\:toggle-xs{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 4)}}}.lg\:toggle-sm{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 5)}}}.lg\:toggle-md{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 6)}}}.lg\:toggle-lg{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 7)}}}.lg\:toggle-xl{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 8)}}}}@media (width>=1280px){.xl\:toggle{@layer daisyui.l1.l2.l3{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;&>*{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}}&:has(:checked){&>:nth-child(2){opacity:0;rotate:15deg}&>:nth-child(3){opacity:1;rotate:0deg}}&: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){&:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{&:before{outline-offset:-1rem;outline:.25rem solid}}&:focus-visible,&:has(:focus-visible){outline-offset:2px;outline:2px solid}&:checked,&[aria-checked=true],&: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}}}&:indeterminate{grid-template-columns:.5fr 1fr .5fr}&:disabled{cursor:not-allowed;opacity:.3;&:before{border:var(--border) solid currentColor;background-color:#0000}}}}.xl\:toggle-primary{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-primary)}}}.xl\:toggle-secondary{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-secondary)}}}.xl\:toggle-accent{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-accent)}}}.xl\:toggle-neutral{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-neutral)}}}.xl\:toggle-success{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-success)}}}.xl\:toggle-warning{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-warning)}}}.xl\:toggle-info{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-info)}}}.xl\:toggle-error{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-error)}}}.xl\:toggle-xs{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 4)}}}.xl\:toggle-sm{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 5)}}}.xl\:toggle-md{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 6)}}}.xl\:toggle-lg{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 7)}}}.xl\:toggle-xl{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 8)}}}}@media (width>=1536px){.\32 xl\:toggle{@layer daisyui.l1.l2.l3{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;&>*{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}}&:has(:checked){&>:nth-child(2){opacity:0;rotate:15deg}&>:nth-child(3){opacity:1;rotate:0deg}}&: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){&:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{&:before{outline-offset:-1rem;outline:.25rem solid}}&:focus-visible,&:has(:focus-visible){outline-offset:2px;outline:2px solid}&:checked,&[aria-checked=true],&: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}}}&:indeterminate{grid-template-columns:.5fr 1fr .5fr}&:disabled{cursor:not-allowed;opacity:.3;&:before{border:var(--border) solid currentColor;background-color:#0000}}}}.\32 xl\:toggle-primary{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-primary)}}}.\32 xl\:toggle-secondary{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-secondary)}}}.\32 xl\:toggle-accent{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-accent)}}}.\32 xl\:toggle-neutral{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-neutral)}}}.\32 xl\:toggle-success{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-success)}}}.\32 xl\:toggle-warning{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-warning)}}}.\32 xl\:toggle-info{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-info)}}}.\32 xl\:toggle-error{@layer daisyui.l1.l2{&:checked,&[aria-checked=true]{--input-color:var(--color-error)}}}.\32 xl\:toggle-xs{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 4)}}}.\32 xl\:toggle-sm{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 5)}}}.\32 xl\:toggle-md{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 6)}}}.\32 xl\:toggle-lg{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 7)}}}.\32 xl\:toggle-xl{@layer daisyui.l1.l2{&[type=checkbox],&:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 8)}}}}}