/** * Skipped minification because the original files appears to be already minified. * Original file: /npm/daisyui@5.7.0/daisyui.css * * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files */ /*! 🌼 daisyUI 5.7.0 - MIT License */ @layer base { :root, :root:has(input.theme-controller[value=light]:checked), [data-theme=light] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(98% 0 0); --color-base-300: oklch(95% 0 0); --color-base-content: oklch(21% .006 285.885); --color-primary: oklch(45% .24 277.023); --color-primary-content: oklch(93% .034 272.788); --color-secondary: oklch(65% .241 354.308); --color-secondary-content: oklch(94% .028 342.258); --color-accent: oklch(77% .152 181.912); --color-accent-content: oklch(38% .063 188.416); --color-neutral: oklch(14% .005 285.823); --color-neutral-content: oklch(92% .004 286.32); --color-info: oklch(74% .16 232.661); --color-info-content: oklch(29% .066 243.157); --color-success: oklch(76% .177 163.223); --color-success-content: oklch(37% .077 168.94); --color-warning: oklch(82% .189 84.429); --color-warning-content: oklch(41% .112 45.904); --color-error: oklch(71% .194 13.428); --color-error-content: oklch(27% .105 12.094); --radius-selector: .5rem; --radius-field: .25rem; --radius-box: .5rem; --size-selector: .25rem; --size-field: .25rem; --border: 1px; --depth: 1; --noise: 0 } :root:has(input.theme-controller[value=dark]:checked), [data-theme=dark] { color-scheme: dark; --color-base-100: oklch(25.33% .016 252.42); --color-base-200: oklch(23.26% .014 253.1); --color-base-300: oklch(21.15% .012 254.09); --color-base-content: oklch(97.807% .029 256.847); --color-primary: oklch(58% .233 277.117); --color-primary-content: oklch(96% .018 272.314); --color-secondary: oklch(65% .241 354.308); --color-secondary-content: oklch(94% .028 342.258); --color-accent: oklch(77% .152 181.912); --color-accent-content: oklch(38% .063 188.416); --color-neutral: oklch(14% .005 285.823); --color-neutral-content: oklch(92% .004 286.32); --color-info: oklch(74% .16 232.661); --color-info-content: oklch(29% .066 243.157); --color-success: oklch(76% .177 163.223); --color-success-content: oklch(37% .077 168.94); --color-warning: oklch(82% .189 84.429); --color-warning-content: oklch(41% .112 45.904); --color-error: oklch(71% .194 13.428); --color-error-content: oklch(27% .105 12.094); --radius-selector: .5rem; --radius-field: .25rem; --radius-box: .5rem; --size-selector: .25rem; --size-field: .25rem; --border: 1px; --depth: 1; --noise: 0 } :root { --page-has-backdrop: var(--page-scroll-lock) 1; --page-scroll-bg: var(--page-scroll-lock) color-mix(in srgb, var(--root-bg, #0000), oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%)); background-image: var(--page-scroll-lock) linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000)); transition: var(--page-scroll-lock) background-color .3s ease-out; animation: var(--page-scroll-lock) set-page-has-scroll forwards; animation-timeline: var(--page-scroll-lock) scroll(); --page-has-scroll: initial; scrollbar-gutter: var(--page-has-scroll) var(--page-scroll-lock) stable } @keyframes set-page-has-scroll { 0%, to { --page-has-scroll: } } *, :after, ::backdrop, :before, ::file-selector-button { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0 } :host, html { line-height: 1.5; font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); -webkit-tap-highlight-color: #0000 } body { line-height: inherit } hr { height: 0; color: inherit; border-top-width: 1px } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit } table { text-indent: 0; border-color: inherit; border-collapse: collapse } ::file-selector-button, button, input, optgroup, select, textarea { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; background: 0 0 } input:where(:not([type=button], [type=reset], [type=submit])), select, textarea { border-width: 1px } ::file-selector-button, button, input:where([type=button], [type=reset], [type=submit]) { appearance: button } :-moz-focusring { outline: auto } :-moz-ui-invalid { box-shadow: none } ::-webkit-search-decoration { -webkit-appearance: none } menu, ol, ul { list-style: none } textarea { resize: vertical } ::placeholder { opacity: 1; color: color-mix(in oklch, currentColor 50%, #0000) } audio, canvas, embed, iframe, img, object, svg, video { vertical-align: middle; display: block } img, video { max-width: 100%; height: auto } @property --radialprogress { syntax: ""; inherits: true; initial-value: 0% } @property --aura-angle { syntax: ""; inherits: false; initial-value: 0deg } :root, [data-theme] { background-color: var(--root-bg); color: var(--color-base-content) } :root { background-color: var(--page-scroll-bg, var(--root-bg)) } :where(:root, [data-theme]) { --root-bg: var(--color-base-100) } :root { --page-scroll-lock: initial; --page-overflow: var(--page-scroll-lock) hidden } :root:not(span) { overflow: var(--page-overflow) } :root { scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000; --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E") } } @layer utilities { .file-input { @layer daisyui.l1.l2.l3 { cursor: pointer; border: var(--border) solid #0000; cursor: pointer; appearance: none; background-color: var(--color-base-100); vertical-align: middle; -webkit-user-select: none; user-select: none; width: clamp(3rem, 20rem, 100%); height: var(--size); border-color: var(--input-color); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; --size: calc(var(--size-field, .25rem) * 10); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); align-items: center; padding-inline-end: .75rem; font-size: .875rem; line-height: 2; display: inline-flex; &::file-selector-button { cursor: pointer; -webkit-user-select: none; user-select: none; height: calc(100% + var(--border) * 2); margin-inline-end: 1rem; margin-block: calc(var(--border) * -1); color: var(--btn-fg); border-width: var(--border); border-style: solid; border-color: var(--btn-border); background-color: var(--btn-bg); background-size: calc(var(--noise) * 100%); background-image: var(--fx-noise); text-shadow: 0 .5px oklch(1 0 0 / calc(var(--depth) * .15)); box-shadow: 0 .5px 0 .5px color-mix(in oklab, color-mix(in oklab, white 30%, var(--btn-bg)) calc(var(--depth) * 20%), #0000) inset, var(--btn-shadow); --size: calc(var(--size-field, .25rem) * 10); --btn-bg: var(--btn-color, var(--color-base-200)); --btn-fg: var(--color-base-content); --btn-border: color-mix(in oklab, var(--btn-bg), #000 5%); --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) 30%, #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) 30%, #0000); border-start-start-radius: calc(var(--join-ss, var(--radius-field) - var(--border))); border-end-start-radius: calc(var(--join-es, var(--radius-field) - var(--border))); margin-inline-start: calc(var(--border) * -1); padding-inline: 1rem; font-size: .875rem; font-weight: 600 } &:focus { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) 10%, #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate } &:has(>input[disabled]), &:is(:disabled, [disabled]) { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); &::placeholder { color: color-mix(in oklab, var(--color-base-content) 20%, transparent) } box-shadow:none; color:color-mix(in oklch, var(--color-base-content) 20%, #0000); &::file-selector-button { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); --btn-border: #0000; --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); background-image: none } } } } .file-input-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; transition: background-color .2s; &::file-selector-button { cursor: pointer; -webkit-user-select: none; user-select: none; border-start-end-radius: calc(var(--join-ss, var(--radius-field) - var(--border))); border-end-end-radius: calc(var(--join-es, var(--radius-field) - var(--border))); height: 100%; margin-block: 0; margin-inline: 0 1rem; padding-inline: 1rem } &:focus, &:focus-within { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } } } .file-input-neutral { @layer daisyui.l1.l2 { --btn-color: var(--color-neutral); &::file-selector-button { color: var(--color-neutral-content) } &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .file-input-primary { @layer daisyui.l1.l2 { --btn-color: var(--color-primary); &::file-selector-button { color: var(--color-primary-content) } &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .file-input-secondary { @layer daisyui.l1.l2 { --btn-color: var(--color-secondary); &::file-selector-button { color: var(--color-secondary-content) } &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .file-input-accent { @layer daisyui.l1.l2 { --btn-color: var(--color-accent); &::file-selector-button { color: var(--color-accent-content) } &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .file-input-info { @layer daisyui.l1.l2 { --btn-color: var(--color-info); &::file-selector-button { color: var(--color-info-content) } &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .file-input-success { @layer daisyui.l1.l2 { --btn-color: var(--color-success); &::file-selector-button { color: var(--color-success-content) } &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .file-input-warning { @layer daisyui.l1.l2 { --btn-color: var(--color-warning); &::file-selector-button { color: var(--color-warning-content) } &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .file-input-error { @layer daisyui.l1.l2 { --btn-color: var(--color-error); &::file-selector-button { color: var(--color-error-content) } &, &:focus, &:focus-within { --input-color: var(--color-error) } } } .file-input-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 6); font-size: .6875rem; line-height: 1rem; &::file-selector-button { font-size: .6875rem } } } .file-input-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 8); font-size: .75rem; line-height: 1.5rem; &::file-selector-button { font-size: .75rem } } } .file-input-md { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 10); font-size: .875rem; line-height: 2; &::file-selector-button { font-size: .875rem } } } .file-input-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 12); font-size: 1.125rem; line-height: 2.5rem; &::file-selector-button { font-size: 1.125rem } } } .file-input-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 14); padding-inline-end: 1.5rem; font-size: 1.125rem; line-height: 3rem; &::file-selector-button { font-size: 1.375rem } } } @media (width>=640px) { .sm\:file-input { @layer daisyui.l1.l2.l3 { cursor: pointer; border: var(--border) solid #0000; cursor: pointer; appearance: none; background-color: var(--color-base-100); vertical-align: middle; -webkit-user-select: none; user-select: none; width: clamp(3rem, 20rem, 100%); height: var(--size); border-color: var(--input-color); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; --size: calc(var(--size-field, .25rem) * 10); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); align-items: center; padding-inline-end: .75rem; font-size: .875rem; line-height: 2; display: inline-flex; &::file-selector-button { cursor: pointer; -webkit-user-select: none; user-select: none; height: calc(100% + var(--border) * 2); margin-inline-end: 1rem; margin-block: calc(var(--border) * -1); color: var(--btn-fg); border-width: var(--border); border-style: solid; border-color: var(--btn-border); background-color: var(--btn-bg); background-size: calc(var(--noise) * 100%); background-image: var(--fx-noise); text-shadow: 0 .5px oklch(1 0 0 / calc(var(--depth) * .15)); box-shadow: 0 .5px 0 .5px color-mix(in oklab, color-mix(in oklab, white 30%, var(--btn-bg)) calc(var(--depth) * 20%), #0000) inset, var(--btn-shadow); --size: calc(var(--size-field, .25rem) * 10); --btn-bg: var(--btn-color, var(--color-base-200)); --btn-fg: var(--color-base-content); --btn-border: color-mix(in oklab, var(--btn-bg), #000 5%); --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) 30%, #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) 30%, #0000); border-start-start-radius: calc(var(--join-ss, var(--radius-field) - var(--border))); border-end-start-radius: calc(var(--join-es, var(--radius-field) - var(--border))); margin-inline-start: calc(var(--border) * -1); padding-inline: 1rem; font-size: .875rem; font-weight: 600 } &:focus { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) 10%, #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate } &:has(>input[disabled]), &:is(:disabled, [disabled]) { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); &::placeholder { color: color-mix(in oklab, var(--color-base-content) 20%, transparent) } box-shadow:none; color:color-mix(in oklch, var(--color-base-content) 20%, #0000); &::file-selector-button { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); --btn-border: #0000; --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); background-image: none } } } } .sm\:file-input-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; transition: background-color .2s; &::file-selector-button { cursor: pointer; -webkit-user-select: none; user-select: none; border-start-end-radius: calc(var(--join-ss, var(--radius-field) - var(--border))); border-end-end-radius: calc(var(--join-es, var(--radius-field) - var(--border))); height: 100%; margin-block: 0; margin-inline: 0 1rem; padding-inline: 1rem } &:focus, &:focus-within { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } } } .sm\:file-input-neutral { @layer daisyui.l1.l2 { --btn-color: var(--color-neutral); &::file-selector-button { color: var(--color-neutral-content) } &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .sm\:file-input-primary { @layer daisyui.l1.l2 { --btn-color: var(--color-primary); &::file-selector-button { color: var(--color-primary-content) } &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .sm\:file-input-secondary { @layer daisyui.l1.l2 { --btn-color: var(--color-secondary); &::file-selector-button { color: var(--color-secondary-content) } &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .sm\:file-input-accent { @layer daisyui.l1.l2 { --btn-color: var(--color-accent); &::file-selector-button { color: var(--color-accent-content) } &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .sm\:file-input-info { @layer daisyui.l1.l2 { --btn-color: var(--color-info); &::file-selector-button { color: var(--color-info-content) } &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .sm\:file-input-success { @layer daisyui.l1.l2 { --btn-color: var(--color-success); &::file-selector-button { color: var(--color-success-content) } &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .sm\:file-input-warning { @layer daisyui.l1.l2 { --btn-color: var(--color-warning); &::file-selector-button { color: var(--color-warning-content) } &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .sm\:file-input-error { @layer daisyui.l1.l2 { --btn-color: var(--color-error); &::file-selector-button { color: var(--color-error-content) } &, &:focus, &:focus-within { --input-color: var(--color-error) } } } .sm\:file-input-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 6); font-size: .6875rem; line-height: 1rem; &::file-selector-button { font-size: .6875rem } } } .sm\:file-input-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 8); font-size: .75rem; line-height: 1.5rem; &::file-selector-button { font-size: .75rem } } } .sm\:file-input-md { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 10); font-size: .875rem; line-height: 2; &::file-selector-button { font-size: .875rem } } } .sm\:file-input-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 12); font-size: 1.125rem; line-height: 2.5rem; &::file-selector-button { font-size: 1.125rem } } } .sm\:file-input-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 14); padding-inline-end: 1.5rem; font-size: 1.125rem; line-height: 3rem; &::file-selector-button { font-size: 1.375rem } } } } @media (width>=768px) { .md\:file-input { @layer daisyui.l1.l2.l3 { cursor: pointer; border: var(--border) solid #0000; cursor: pointer; appearance: none; background-color: var(--color-base-100); vertical-align: middle; -webkit-user-select: none; user-select: none; width: clamp(3rem, 20rem, 100%); height: var(--size); border-color: var(--input-color); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; --size: calc(var(--size-field, .25rem) * 10); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); align-items: center; padding-inline-end: .75rem; font-size: .875rem; line-height: 2; display: inline-flex; &::file-selector-button { cursor: pointer; -webkit-user-select: none; user-select: none; height: calc(100% + var(--border) * 2); margin-inline-end: 1rem; margin-block: calc(var(--border) * -1); color: var(--btn-fg); border-width: var(--border); border-style: solid; border-color: var(--btn-border); background-color: var(--btn-bg); background-size: calc(var(--noise) * 100%); background-image: var(--fx-noise); text-shadow: 0 .5px oklch(1 0 0 / calc(var(--depth) * .15)); box-shadow: 0 .5px 0 .5px color-mix(in oklab, color-mix(in oklab, white 30%, var(--btn-bg)) calc(var(--depth) * 20%), #0000) inset, var(--btn-shadow); --size: calc(var(--size-field, .25rem) * 10); --btn-bg: var(--btn-color, var(--color-base-200)); --btn-fg: var(--color-base-content); --btn-border: color-mix(in oklab, var(--btn-bg), #000 5%); --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) 30%, #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) 30%, #0000); border-start-start-radius: calc(var(--join-ss, var(--radius-field) - var(--border))); border-end-start-radius: calc(var(--join-es, var(--radius-field) - var(--border))); margin-inline-start: calc(var(--border) * -1); padding-inline: 1rem; font-size: .875rem; font-weight: 600 } &:focus { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) 10%, #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate } &:has(>input[disabled]), &:is(:disabled, [disabled]) { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); &::placeholder { color: color-mix(in oklab, var(--color-base-content) 20%, transparent) } box-shadow:none; color:color-mix(in oklch, var(--color-base-content) 20%, #0000); &::file-selector-button { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); --btn-border: #0000; --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); background-image: none } } } } .md\:file-input-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; transition: background-color .2s; &::file-selector-button { cursor: pointer; -webkit-user-select: none; user-select: none; border-start-end-radius: calc(var(--join-ss, var(--radius-field) - var(--border))); border-end-end-radius: calc(var(--join-es, var(--radius-field) - var(--border))); height: 100%; margin-block: 0; margin-inline: 0 1rem; padding-inline: 1rem } &:focus, &:focus-within { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } } } .md\:file-input-neutral { @layer daisyui.l1.l2 { --btn-color: var(--color-neutral); &::file-selector-button { color: var(--color-neutral-content) } &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .md\:file-input-primary { @layer daisyui.l1.l2 { --btn-color: var(--color-primary); &::file-selector-button { color: var(--color-primary-content) } &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .md\:file-input-secondary { @layer daisyui.l1.l2 { --btn-color: var(--color-secondary); &::file-selector-button { color: var(--color-secondary-content) } &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .md\:file-input-accent { @layer daisyui.l1.l2 { --btn-color: var(--color-accent); &::file-selector-button { color: var(--color-accent-content) } &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .md\:file-input-info { @layer daisyui.l1.l2 { --btn-color: var(--color-info); &::file-selector-button { color: var(--color-info-content) } &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .md\:file-input-success { @layer daisyui.l1.l2 { --btn-color: var(--color-success); &::file-selector-button { color: var(--color-success-content) } &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .md\:file-input-warning { @layer daisyui.l1.l2 { --btn-color: var(--color-warning); &::file-selector-button { color: var(--color-warning-content) } &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .md\:file-input-error { @layer daisyui.l1.l2 { --btn-color: var(--color-error); &::file-selector-button { color: var(--color-error-content) } &, &:focus, &:focus-within { --input-color: var(--color-error) } } } .md\:file-input-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 6); font-size: .6875rem; line-height: 1rem; &::file-selector-button { font-size: .6875rem } } } .md\:file-input-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 8); font-size: .75rem; line-height: 1.5rem; &::file-selector-button { font-size: .75rem } } } .md\:file-input-md { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 10); font-size: .875rem; line-height: 2; &::file-selector-button { font-size: .875rem } } } .md\:file-input-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 12); font-size: 1.125rem; line-height: 2.5rem; &::file-selector-button { font-size: 1.125rem } } } .md\:file-input-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 14); padding-inline-end: 1.5rem; font-size: 1.125rem; line-height: 3rem; &::file-selector-button { font-size: 1.375rem } } } } @media (width>=1024px) { .lg\:file-input { @layer daisyui.l1.l2.l3 { cursor: pointer; border: var(--border) solid #0000; cursor: pointer; appearance: none; background-color: var(--color-base-100); vertical-align: middle; -webkit-user-select: none; user-select: none; width: clamp(3rem, 20rem, 100%); height: var(--size); border-color: var(--input-color); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; --size: calc(var(--size-field, .25rem) * 10); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); align-items: center; padding-inline-end: .75rem; font-size: .875rem; line-height: 2; display: inline-flex; &::file-selector-button { cursor: pointer; -webkit-user-select: none; user-select: none; height: calc(100% + var(--border) * 2); margin-inline-end: 1rem; margin-block: calc(var(--border) * -1); color: var(--btn-fg); border-width: var(--border); border-style: solid; border-color: var(--btn-border); background-color: var(--btn-bg); background-size: calc(var(--noise) * 100%); background-image: var(--fx-noise); text-shadow: 0 .5px oklch(1 0 0 / calc(var(--depth) * .15)); box-shadow: 0 .5px 0 .5px color-mix(in oklab, color-mix(in oklab, white 30%, var(--btn-bg)) calc(var(--depth) * 20%), #0000) inset, var(--btn-shadow); --size: calc(var(--size-field, .25rem) * 10); --btn-bg: var(--btn-color, var(--color-base-200)); --btn-fg: var(--color-base-content); --btn-border: color-mix(in oklab, var(--btn-bg), #000 5%); --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) 30%, #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) 30%, #0000); border-start-start-radius: calc(var(--join-ss, var(--radius-field) - var(--border))); border-end-start-radius: calc(var(--join-es, var(--radius-field) - var(--border))); margin-inline-start: calc(var(--border) * -1); padding-inline: 1rem; font-size: .875rem; font-weight: 600 } &:focus { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) 10%, #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate } &:has(>input[disabled]), &:is(:disabled, [disabled]) { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); &::placeholder { color: color-mix(in oklab, var(--color-base-content) 20%, transparent) } box-shadow:none; color:color-mix(in oklch, var(--color-base-content) 20%, #0000); &::file-selector-button { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); --btn-border: #0000; --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); background-image: none } } } } .lg\:file-input-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; transition: background-color .2s; &::file-selector-button { cursor: pointer; -webkit-user-select: none; user-select: none; border-start-end-radius: calc(var(--join-ss, var(--radius-field) - var(--border))); border-end-end-radius: calc(var(--join-es, var(--radius-field) - var(--border))); height: 100%; margin-block: 0; margin-inline: 0 1rem; padding-inline: 1rem } &:focus, &:focus-within { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } } } .lg\:file-input-neutral { @layer daisyui.l1.l2 { --btn-color: var(--color-neutral); &::file-selector-button { color: var(--color-neutral-content) } &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .lg\:file-input-primary { @layer daisyui.l1.l2 { --btn-color: var(--color-primary); &::file-selector-button { color: var(--color-primary-content) } &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .lg\:file-input-secondary { @layer daisyui.l1.l2 { --btn-color: var(--color-secondary); &::file-selector-button { color: var(--color-secondary-content) } &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .lg\:file-input-accent { @layer daisyui.l1.l2 { --btn-color: var(--color-accent); &::file-selector-button { color: var(--color-accent-content) } &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .lg\:file-input-info { @layer daisyui.l1.l2 { --btn-color: var(--color-info); &::file-selector-button { color: var(--color-info-content) } &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .lg\:file-input-success { @layer daisyui.l1.l2 { --btn-color: var(--color-success); &::file-selector-button { color: var(--color-success-content) } &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .lg\:file-input-warning { @layer daisyui.l1.l2 { --btn-color: var(--color-warning); &::file-selector-button { color: var(--color-warning-content) } &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .lg\:file-input-error { @layer daisyui.l1.l2 { --btn-color: var(--color-error); &::file-selector-button { color: var(--color-error-content) } &, &:focus, &:focus-within { --input-color: var(--color-error) } } } .lg\:file-input-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 6); font-size: .6875rem; line-height: 1rem; &::file-selector-button { font-size: .6875rem } } } .lg\:file-input-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 8); font-size: .75rem; line-height: 1.5rem; &::file-selector-button { font-size: .75rem } } } .lg\:file-input-md { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 10); font-size: .875rem; line-height: 2; &::file-selector-button { font-size: .875rem } } } .lg\:file-input-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 12); font-size: 1.125rem; line-height: 2.5rem; &::file-selector-button { font-size: 1.125rem } } } .lg\:file-input-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 14); padding-inline-end: 1.5rem; font-size: 1.125rem; line-height: 3rem; &::file-selector-button { font-size: 1.375rem } } } } @media (width>=1280px) { .xl\:file-input { @layer daisyui.l1.l2.l3 { cursor: pointer; border: var(--border) solid #0000; cursor: pointer; appearance: none; background-color: var(--color-base-100); vertical-align: middle; -webkit-user-select: none; user-select: none; width: clamp(3rem, 20rem, 100%); height: var(--size); border-color: var(--input-color); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; --size: calc(var(--size-field, .25rem) * 10); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); align-items: center; padding-inline-end: .75rem; font-size: .875rem; line-height: 2; display: inline-flex; &::file-selector-button { cursor: pointer; -webkit-user-select: none; user-select: none; height: calc(100% + var(--border) * 2); margin-inline-end: 1rem; margin-block: calc(var(--border) * -1); color: var(--btn-fg); border-width: var(--border); border-style: solid; border-color: var(--btn-border); background-color: var(--btn-bg); background-size: calc(var(--noise) * 100%); background-image: var(--fx-noise); text-shadow: 0 .5px oklch(1 0 0 / calc(var(--depth) * .15)); box-shadow: 0 .5px 0 .5px color-mix(in oklab, color-mix(in oklab, white 30%, var(--btn-bg)) calc(var(--depth) * 20%), #0000) inset, var(--btn-shadow); --size: calc(var(--size-field, .25rem) * 10); --btn-bg: var(--btn-color, var(--color-base-200)); --btn-fg: var(--color-base-content); --btn-border: color-mix(in oklab, var(--btn-bg), #000 5%); --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) 30%, #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) 30%, #0000); border-start-start-radius: calc(var(--join-ss, var(--radius-field) - var(--border))); border-end-start-radius: calc(var(--join-es, var(--radius-field) - var(--border))); margin-inline-start: calc(var(--border) * -1); padding-inline: 1rem; font-size: .875rem; font-weight: 600 } &:focus { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) 10%, #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate } &:has(>input[disabled]), &:is(:disabled, [disabled]) { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); &::placeholder { color: color-mix(in oklab, var(--color-base-content) 20%, transparent) } box-shadow:none; color:color-mix(in oklch, var(--color-base-content) 20%, #0000); &::file-selector-button { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); --btn-border: #0000; --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); background-image: none } } } } .xl\:file-input-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; transition: background-color .2s; &::file-selector-button { cursor: pointer; -webkit-user-select: none; user-select: none; border-start-end-radius: calc(var(--join-ss, var(--radius-field) - var(--border))); border-end-end-radius: calc(var(--join-es, var(--radius-field) - var(--border))); height: 100%; margin-block: 0; margin-inline: 0 1rem; padding-inline: 1rem } &:focus, &:focus-within { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } } } .xl\:file-input-neutral { @layer daisyui.l1.l2 { --btn-color: var(--color-neutral); &::file-selector-button { color: var(--color-neutral-content) } &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .xl\:file-input-primary { @layer daisyui.l1.l2 { --btn-color: var(--color-primary); &::file-selector-button { color: var(--color-primary-content) } &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .xl\:file-input-secondary { @layer daisyui.l1.l2 { --btn-color: var(--color-secondary); &::file-selector-button { color: var(--color-secondary-content) } &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .xl\:file-input-accent { @layer daisyui.l1.l2 { --btn-color: var(--color-accent); &::file-selector-button { color: var(--color-accent-content) } &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .xl\:file-input-info { @layer daisyui.l1.l2 { --btn-color: var(--color-info); &::file-selector-button { color: var(--color-info-content) } &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .xl\:file-input-success { @layer daisyui.l1.l2 { --btn-color: var(--color-success); &::file-selector-button { color: var(--color-success-content) } &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .xl\:file-input-warning { @layer daisyui.l1.l2 { --btn-color: var(--color-warning); &::file-selector-button { color: var(--color-warning-content) } &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .xl\:file-input-error { @layer daisyui.l1.l2 { --btn-color: var(--color-error); &::file-selector-button { color: var(--color-error-content) } &, &:focus, &:focus-within { --input-color: var(--color-error) } } } .xl\:file-input-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 6); font-size: .6875rem; line-height: 1rem; &::file-selector-button { font-size: .6875rem } } } .xl\:file-input-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 8); font-size: .75rem; line-height: 1.5rem; &::file-selector-button { font-size: .75rem } } } .xl\:file-input-md { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 10); font-size: .875rem; line-height: 2; &::file-selector-button { font-size: .875rem } } } .xl\:file-input-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 12); font-size: 1.125rem; line-height: 2.5rem; &::file-selector-button { font-size: 1.125rem } } } .xl\:file-input-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 14); padding-inline-end: 1.5rem; font-size: 1.125rem; line-height: 3rem; &::file-selector-button { font-size: 1.375rem } } } } @media (width>=1536px) { .\32 xl\:file-input { @layer daisyui.l1.l2.l3 { cursor: pointer; border: var(--border) solid #0000; cursor: pointer; appearance: none; background-color: var(--color-base-100); vertical-align: middle; -webkit-user-select: none; user-select: none; width: clamp(3rem, 20rem, 100%); height: var(--size); border-color: var(--input-color); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; --size: calc(var(--size-field, .25rem) * 10); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); align-items: center; padding-inline-end: .75rem; font-size: .875rem; line-height: 2; display: inline-flex; &::file-selector-button { cursor: pointer; -webkit-user-select: none; user-select: none; height: calc(100% + var(--border) * 2); margin-inline-end: 1rem; margin-block: calc(var(--border) * -1); color: var(--btn-fg); border-width: var(--border); border-style: solid; border-color: var(--btn-border); background-color: var(--btn-bg); background-size: calc(var(--noise) * 100%); background-image: var(--fx-noise); text-shadow: 0 .5px oklch(1 0 0 / calc(var(--depth) * .15)); box-shadow: 0 .5px 0 .5px color-mix(in oklab, color-mix(in oklab, white 30%, var(--btn-bg)) calc(var(--depth) * 20%), #0000) inset, var(--btn-shadow); --size: calc(var(--size-field, .25rem) * 10); --btn-bg: var(--btn-color, var(--color-base-200)); --btn-fg: var(--color-base-content); --btn-border: color-mix(in oklab, var(--btn-bg), #000 5%); --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) 30%, #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) 30%, #0000); border-start-start-radius: calc(var(--join-ss, var(--radius-field) - var(--border))); border-end-start-radius: calc(var(--join-es, var(--radius-field) - var(--border))); margin-inline-start: calc(var(--border) * -1); padding-inline: 1rem; font-size: .875rem; font-weight: 600 } &:focus { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) 10%, #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate } &:has(>input[disabled]), &:is(:disabled, [disabled]) { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); &::placeholder { color: color-mix(in oklab, var(--color-base-content) 20%, transparent) } box-shadow:none; color:color-mix(in oklch, var(--color-base-content) 20%, #0000); &::file-selector-button { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); --btn-border: #0000; --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); background-image: none } } } } .\32 xl\:file-input-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; transition: background-color .2s; &::file-selector-button { cursor: pointer; -webkit-user-select: none; user-select: none; border-start-end-radius: calc(var(--join-ss, var(--radius-field) - var(--border))); border-end-end-radius: calc(var(--join-es, var(--radius-field) - var(--border))); height: 100%; margin-block: 0; margin-inline: 0 1rem; padding-inline: 1rem } &:focus, &:focus-within { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } } } .\32 xl\:file-input-neutral { @layer daisyui.l1.l2 { --btn-color: var(--color-neutral); &::file-selector-button { color: var(--color-neutral-content) } &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .\32 xl\:file-input-primary { @layer daisyui.l1.l2 { --btn-color: var(--color-primary); &::file-selector-button { color: var(--color-primary-content) } &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .\32 xl\:file-input-secondary { @layer daisyui.l1.l2 { --btn-color: var(--color-secondary); &::file-selector-button { color: var(--color-secondary-content) } &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .\32 xl\:file-input-accent { @layer daisyui.l1.l2 { --btn-color: var(--color-accent); &::file-selector-button { color: var(--color-accent-content) } &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .\32 xl\:file-input-info { @layer daisyui.l1.l2 { --btn-color: var(--color-info); &::file-selector-button { color: var(--color-info-content) } &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .\32 xl\:file-input-success { @layer daisyui.l1.l2 { --btn-color: var(--color-success); &::file-selector-button { color: var(--color-success-content) } &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .\32 xl\:file-input-warning { @layer daisyui.l1.l2 { --btn-color: var(--color-warning); &::file-selector-button { color: var(--color-warning-content) } &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .\32 xl\:file-input-error { @layer daisyui.l1.l2 { --btn-color: var(--color-error); &::file-selector-button { color: var(--color-error-content) } &, &:focus, &:focus-within { --input-color: var(--color-error) } } } .\32 xl\:file-input-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 6); font-size: .6875rem; line-height: 1rem; &::file-selector-button { font-size: .6875rem } } } .\32 xl\:file-input-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 8); font-size: .75rem; line-height: 1.5rem; &::file-selector-button { font-size: .75rem } } } .\32 xl\:file-input-md { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 10); font-size: .875rem; line-height: 2; &::file-selector-button { font-size: .875rem } } } .\32 xl\:file-input-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 12); font-size: 1.125rem; line-height: 2.5rem; &::file-selector-button { font-size: 1.125rem } } } .\32 xl\:file-input-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-field, .25rem) * 14); padding-inline-end: 1.5rem; font-size: 1.125rem; line-height: 3rem; &::file-selector-button { font-size: 1.375rem } } } } .menu { @layer daisyui.l1.l2.l3 { --menu-active-fg: var(--color-neutral-content); --menu-active-bg: var(--color-neutral); flex-flow: column wrap; width: fit-content; padding: .5rem; font-size: .875rem; display: flex; & :where(li ul, li menu) { white-space: nowrap; margin-inline-start: 1rem; padding-inline-start: .5rem; position: relative; &:before { inset-inline-start: 0; background-color: var(--color-base-content); opacity: .1; width: var(--border); content: ""; position: absolute; top: .75rem; bottom: .75rem } } & :where(li>.menu-dropdown:not(.menu-dropdown-show)) { display: none } & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title, .btn)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); text-align: start; user-select: none; grid-auto-columns: minmax(auto, max-content) auto max-content; grid-auto-flow: column; align-content: flex-start; align-items: center; gap: .5rem; padding-block: .375rem; padding-inline: .75rem; transition-property: color, background-color, box-shadow; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); display: grid } & :where(li>details>summary) { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } &::-webkit-details-marker { display: none } } & :where(li>details>summary), & :where(li>.menu-dropdown-toggle) { &:after { content: ""; transform-origin: 50%; pointer-events: none; justify-self: flex-end; width: .375rem; height: .375rem; transition-property: rotate, translate; transition-duration: .2s; display: block; translate: 0 -1px; rotate: -135deg; box-shadow: inset 2px 2px } } & details { interpolate-size: allow-keywords; overflow: hidden } & details::details-content { block-size: 0; @media (prefers-reduced-motion:no-preference) { transition-behavior: allow-discrete; transition-property: block-size, content-visibility; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1) } } & details[open]::details-content { block-size: auto } & :where(li>details[open]>summary):after, & :where(li>.menu-dropdown-toggle.menu-dropdown-show):after { translate: 0 1px; rotate: 45deg } & :where(li:not(.menu-title, .disabled)>:not(ul, menu, details, .menu-title), li:not(.menu-title, .disabled)>details>summary:not(.menu-title)):not(.menu-active, :active, .btn) { &.menu-focus, &:focus-visible { cursor: pointer; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); color: var(--color-base-content); --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } } & :where(li:not(.menu-title, .disabled)>:not(ul, menu, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled)>details>summary:not(.menu-title):not(.menu-active, :active, .btn):hover) { cursor: pointer; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } box-shadow:inset 0 1px oklch(0% 0 0/.01), inset 0 -1px oklch(100% 0 0/.01) } & :where(li:empty) { background-color: var(--color-base-content); opacity: .1; height: 1px; margin: .5rem 1rem } & :where(li) { flex-flow: column wrap; flex-shrink: 0; align-items: stretch; display: flex; position: relative; & .badge { justify-self: flex-end } &>:not(ul, menu, .menu-title, details, .btn):active, &>:not(ul, menu, .menu-title, details, .btn).menu-active, &>details>summary:active { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } color:var(--menu-active-fg); background-color:var(--menu-active-bg); background-size:auto, calc(var(--noise) * 100%); background-image:none, var(--fx-noise); &:not(&:active) { box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg) } } &.menu-disabled, & [disabled] { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 20%, transparent) } } & .dropdown:focus-within { & .menu-dropdown-toggle:after { translate: 0 1px; rotate: 45deg } } & .dropdown-content { margin-top: .5rem; padding: .5rem; &:before { display: none } } } } .menu-title { @layer daisyui.l1.l2.l3 { color: color-mix(in oklab, var(--color-base-content) 40%, transparent); padding-block: .5rem; padding-inline: .75rem; font-size: .875rem; font-weight: 600 } } .menu-horizontal { @layer daisyui.l1.l2 { flex-direction: row; align-items: center; display: inline-flex; &>li:not(.menu-title)>details { &>:is(ul, menu) { margin-inline-start: 0; transform-origin: top; border-radius: var(--radius-box); background-color: var(--color-base-100); opacity: 0; margin-top: 1rem; padding-block: .5rem; padding-inline-end: .5rem; position: absolute; scale: .95; box-shadow: 0 1px 3px oklch(0% 0 0/.1), 0 1px 2px -1px oklch(0% 0 0/.1); @media (prefers-reduced-motion:no-preference) { @starting-style { opacity: 0; scale: .95 } transition-behavior:allow-discrete; transition-property:opacity, scale, display; transition-duration:.2s; transition-timing-function:cubic-bezier(.4, 0, .2, 1); animation:.2s menu } } &[open]>:is(ul, menu) { opacity: 1; scale: 1 } } &>li>details>:is(ul, menu) { &:before { --tw-content: none; content: var(--tw-content) } } } } .menu-vertical { @layer daisyui.l1.l2 { flex-direction: column; align-items: stretch; display: inline-flex; &>li:not(.menu-title)>details>:is(ul, menu) { margin-inline-start: 1rem; background-color: revert-layer; border-radius: revert-layer; animation: revert-layer; box-shadow: revert-layer; margin-top: 0; padding-block: 0; padding-inline-end: 0; transition: revert-layer; position: relative } } } .menu-paged { @layer daisyui.l1.l2 { --menu-paged-arrow: 135deg; --menu-paged-back-arrow: -45deg; [dir=rtl] & { --menu-paged-arrow: -45deg; --menu-paged-back-arrow: 135deg } & :where(li ul, li menu):before { --tw-content: none; content: var(--tw-content) } & details[open]>summary { font-size: 0; &:not(:active) { transition-duration: 0s } &:before { --tw-content: "Back"; content: var(--tw-content); font-size: .875rem } &[aria-label]:before { content: attr(aria-label) } } & details::details-content { transition: none } &:has(>li>details[open])>li:not(:has(>details[open])), & :where(:is(ul, menu):has(>li>details[open])>li:not(:has(>details[open]))) { display: none } & :where(li:has(>details[open]), details[open], details[open]>:is(ul, menu)), & :where(details[open])::details-content { display: contents } & :where(details[open]:has(>:is(ul, menu)>li>details[open])>summary) { display: none } & :where(li>details>summary):after { rotate: var(--menu-paged-arrow); transition: none; translate: 0 } & :where(li>details[open]>summary):after { rotate: var(--menu-paged-back-arrow); order: -1; justify-self: flex-start } } } .menu-xs { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .25rem; padding-inline: .5rem; font-size: .6875rem } & details[open]>summary:before { font-size: .6875rem } & .menu-title { padding-block: .25rem; padding-inline: .5rem } } } .menu-sm { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .25rem; padding-inline: .625rem; font-size: .75rem } & details[open]>summary:before { font-size: .75rem } & .menu-title { padding-block: .5rem; padding-inline: .75rem } } } .menu-md { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: .75rem; font-size: .875rem } & details[open]>summary:before { font-size: .875rem } & .menu-title { padding-block: .5rem; padding-inline: .75rem } } } .menu-lg { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: 1rem; font-size: 1.125rem } & details[open]>summary:before { font-size: 1.125rem } & .menu-title { padding-block: .75rem; padding-inline: 1.5rem } } } .menu-xl { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: 1.25rem; font-size: 1.375rem } & details[open]>summary:before { font-size: 1.375rem } & .menu-title { padding-block: .75rem; padding-inline: 1.5rem } } } :where(:not(ul, menu, details, .menu-title, .btn)).menu-active { @layer daisyui.l1.l2 { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } color:var(--menu-active-fg); background-color:var(--menu-active-bg); background-size:auto, calc(var(--noise) * 100%); background-image:none, var(--fx-noise) } } @media (width>=640px) { .sm\:menu { @layer daisyui.l1.l2.l3 { --menu-active-fg: var(--color-neutral-content); --menu-active-bg: var(--color-neutral); flex-flow: column wrap; width: fit-content; padding: .5rem; font-size: .875rem; display: flex; & :where(li ul, li menu) { white-space: nowrap; margin-inline-start: 1rem; padding-inline-start: .5rem; position: relative; &:before { inset-inline-start: 0; background-color: var(--color-base-content); opacity: .1; width: var(--border); content: ""; position: absolute; top: .75rem; bottom: .75rem } } & :where(li>.menu-dropdown:not(.menu-dropdown-show)) { display: none } & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title, .btn)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); text-align: start; user-select: none; grid-auto-columns: minmax(auto, max-content) auto max-content; grid-auto-flow: column; align-content: flex-start; align-items: center; gap: .5rem; padding-block: .375rem; padding-inline: .75rem; transition-property: color, background-color, box-shadow; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); display: grid } & :where(li>details>summary) { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } &::-webkit-details-marker { display: none } } & :where(li>details>summary), & :where(li>.menu-dropdown-toggle) { &:after { content: ""; transform-origin: 50%; pointer-events: none; justify-self: flex-end; width: .375rem; height: .375rem; transition-property: rotate, translate; transition-duration: .2s; display: block; translate: 0 -1px; rotate: -135deg; box-shadow: inset 2px 2px } } & details { interpolate-size: allow-keywords; overflow: hidden } & details::details-content { block-size: 0; @media (prefers-reduced-motion:no-preference) { transition-behavior: allow-discrete; transition-property: block-size, content-visibility; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1) } } & details[open]::details-content { block-size: auto } & :where(li>details[open]>summary):after, & :where(li>.menu-dropdown-toggle.menu-dropdown-show):after { translate: 0 1px; rotate: 45deg } & :where(li:not(.menu-title, .disabled)>:not(ul, menu, details, .menu-title), li:not(.menu-title, .disabled)>details>summary:not(.menu-title)):not(.menu-active, :active, .btn) { &.menu-focus, &:focus-visible { cursor: pointer; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); color: var(--color-base-content); --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } } & :where(li:not(.menu-title, .disabled)>:not(ul, menu, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled)>details>summary:not(.menu-title):not(.menu-active, :active, .btn):hover) { cursor: pointer; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } box-shadow:inset 0 1px oklch(0% 0 0/.01), inset 0 -1px oklch(100% 0 0/.01) } & :where(li:empty) { background-color: var(--color-base-content); opacity: .1; height: 1px; margin: .5rem 1rem } & :where(li) { flex-flow: column wrap; flex-shrink: 0; align-items: stretch; display: flex; position: relative; & .badge { justify-self: flex-end } &>:not(ul, menu, .menu-title, details, .btn):active, &>:not(ul, menu, .menu-title, details, .btn).menu-active, &>details>summary:active { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } color:var(--menu-active-fg); background-color:var(--menu-active-bg); background-size:auto, calc(var(--noise) * 100%); background-image:none, var(--fx-noise); &:not(&:active) { box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg) } } &.menu-disabled, & [disabled] { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 20%, transparent) } } & .dropdown:focus-within { & .menu-dropdown-toggle:after { translate: 0 1px; rotate: 45deg } } & .dropdown-content { margin-top: .5rem; padding: .5rem; &:before { display: none } } } } .sm\:menu-title { @layer daisyui.l1.l2.l3 { color: color-mix(in oklab, var(--color-base-content) 40%, transparent); padding-block: .5rem; padding-inline: .75rem; font-size: .875rem; font-weight: 600 } } .sm\:menu-horizontal { @layer daisyui.l1.l2 { flex-direction: row; align-items: center; display: inline-flex; &>li:not(.menu-title)>details { &>:is(ul, menu) { margin-inline-start: 0; transform-origin: top; border-radius: var(--radius-box); background-color: var(--color-base-100); opacity: 0; margin-top: 1rem; padding-block: .5rem; padding-inline-end: .5rem; position: absolute; scale: .95; box-shadow: 0 1px 3px oklch(0% 0 0/.1), 0 1px 2px -1px oklch(0% 0 0/.1); @media (prefers-reduced-motion:no-preference) { @starting-style { opacity: 0; scale: .95 } transition-behavior:allow-discrete; transition-property:opacity, scale, display; transition-duration:.2s; transition-timing-function:cubic-bezier(.4, 0, .2, 1); animation:.2s menu } } &[open]>:is(ul, menu) { opacity: 1; scale: 1 } } &>li>details>:is(ul, menu) { &:before { --tw-content: none; content: var(--tw-content) } } } } .sm\:menu-vertical { @layer daisyui.l1.l2 { flex-direction: column; align-items: stretch; display: inline-flex; &>li:not(.menu-title)>details>:is(ul, menu) { margin-inline-start: 1rem; background-color: revert-layer; border-radius: revert-layer; animation: revert-layer; box-shadow: revert-layer; margin-top: 0; padding-block: 0; padding-inline-end: 0; transition: revert-layer; position: relative } } } .sm\:menu-paged { @layer daisyui.l1.l2 { --menu-paged-arrow: 135deg; --menu-paged-back-arrow: -45deg; [dir=rtl] & { --menu-paged-arrow: -45deg; --menu-paged-back-arrow: 135deg } & :where(li ul, li menu):before { --tw-content: none; content: var(--tw-content) } & details[open]>summary { font-size: 0; &:not(:active) { transition-duration: 0s } &:before { --tw-content: "Back"; content: var(--tw-content); font-size: .875rem } &[aria-label]:before { content: attr(aria-label) } } & details::details-content { transition: none } &:has(>li>details[open])>li:not(:has(>details[open])), & :where(:is(ul, menu):has(>li>details[open])>li:not(:has(>details[open]))) { display: none } & :where(li:has(>details[open]), details[open], details[open]>:is(ul, menu)), & :where(details[open])::details-content { display: contents } & :where(details[open]:has(>:is(ul, menu)>li>details[open])>summary) { display: none } & :where(li>details>summary):after { rotate: var(--menu-paged-arrow); transition: none; translate: 0 } & :where(li>details[open]>summary):after { rotate: var(--menu-paged-back-arrow); order: -1; justify-self: flex-start } } } .sm\:menu-xs { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .25rem; padding-inline: .5rem; font-size: .6875rem } & details[open]>summary:before { font-size: .6875rem } & .menu-title { padding-block: .25rem; padding-inline: .5rem } } } .sm\:menu-sm { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .25rem; padding-inline: .625rem; font-size: .75rem } & details[open]>summary:before { font-size: .75rem } & .menu-title { padding-block: .5rem; padding-inline: .75rem } } } .sm\:menu-md { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: .75rem; font-size: .875rem } & details[open]>summary:before { font-size: .875rem } & .menu-title { padding-block: .5rem; padding-inline: .75rem } } } .sm\:menu-lg { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: 1rem; font-size: 1.125rem } & details[open]>summary:before { font-size: 1.125rem } & .menu-title { padding-block: .75rem; padding-inline: 1.5rem } } } .sm\:menu-xl { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: 1.25rem; font-size: 1.375rem } & details[open]>summary:before { font-size: 1.375rem } & .menu-title { padding-block: .75rem; padding-inline: 1.5rem } } } :where(:not(ul, menu, details, .menu-title, .btn)).menu-active { @layer daisyui.l1.l2 { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } color:var(--menu-active-fg); background-color:var(--menu-active-bg); background-size:auto, calc(var(--noise) * 100%); background-image:none, var(--fx-noise) } } } @media (width>=768px) { .md\:menu { @layer daisyui.l1.l2.l3 { --menu-active-fg: var(--color-neutral-content); --menu-active-bg: var(--color-neutral); flex-flow: column wrap; width: fit-content; padding: .5rem; font-size: .875rem; display: flex; & :where(li ul, li menu) { white-space: nowrap; margin-inline-start: 1rem; padding-inline-start: .5rem; position: relative; &:before { inset-inline-start: 0; background-color: var(--color-base-content); opacity: .1; width: var(--border); content: ""; position: absolute; top: .75rem; bottom: .75rem } } & :where(li>.menu-dropdown:not(.menu-dropdown-show)) { display: none } & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title, .btn)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); text-align: start; user-select: none; grid-auto-columns: minmax(auto, max-content) auto max-content; grid-auto-flow: column; align-content: flex-start; align-items: center; gap: .5rem; padding-block: .375rem; padding-inline: .75rem; transition-property: color, background-color, box-shadow; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); display: grid } & :where(li>details>summary) { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } &::-webkit-details-marker { display: none } } & :where(li>details>summary), & :where(li>.menu-dropdown-toggle) { &:after { content: ""; transform-origin: 50%; pointer-events: none; justify-self: flex-end; width: .375rem; height: .375rem; transition-property: rotate, translate; transition-duration: .2s; display: block; translate: 0 -1px; rotate: -135deg; box-shadow: inset 2px 2px } } & details { interpolate-size: allow-keywords; overflow: hidden } & details::details-content { block-size: 0; @media (prefers-reduced-motion:no-preference) { transition-behavior: allow-discrete; transition-property: block-size, content-visibility; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1) } } & details[open]::details-content { block-size: auto } & :where(li>details[open]>summary):after, & :where(li>.menu-dropdown-toggle.menu-dropdown-show):after { translate: 0 1px; rotate: 45deg } & :where(li:not(.menu-title, .disabled)>:not(ul, menu, details, .menu-title), li:not(.menu-title, .disabled)>details>summary:not(.menu-title)):not(.menu-active, :active, .btn) { &.menu-focus, &:focus-visible { cursor: pointer; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); color: var(--color-base-content); --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } } & :where(li:not(.menu-title, .disabled)>:not(ul, menu, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled)>details>summary:not(.menu-title):not(.menu-active, :active, .btn):hover) { cursor: pointer; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } box-shadow:inset 0 1px oklch(0% 0 0/.01), inset 0 -1px oklch(100% 0 0/.01) } & :where(li:empty) { background-color: var(--color-base-content); opacity: .1; height: 1px; margin: .5rem 1rem } & :where(li) { flex-flow: column wrap; flex-shrink: 0; align-items: stretch; display: flex; position: relative; & .badge { justify-self: flex-end } &>:not(ul, menu, .menu-title, details, .btn):active, &>:not(ul, menu, .menu-title, details, .btn).menu-active, &>details>summary:active { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } color:var(--menu-active-fg); background-color:var(--menu-active-bg); background-size:auto, calc(var(--noise) * 100%); background-image:none, var(--fx-noise); &:not(&:active) { box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg) } } &.menu-disabled, & [disabled] { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 20%, transparent) } } & .dropdown:focus-within { & .menu-dropdown-toggle:after { translate: 0 1px; rotate: 45deg } } & .dropdown-content { margin-top: .5rem; padding: .5rem; &:before { display: none } } } } .md\:menu-title { @layer daisyui.l1.l2.l3 { color: color-mix(in oklab, var(--color-base-content) 40%, transparent); padding-block: .5rem; padding-inline: .75rem; font-size: .875rem; font-weight: 600 } } .md\:menu-horizontal { @layer daisyui.l1.l2 { flex-direction: row; align-items: center; display: inline-flex; &>li:not(.menu-title)>details { &>:is(ul, menu) { margin-inline-start: 0; transform-origin: top; border-radius: var(--radius-box); background-color: var(--color-base-100); opacity: 0; margin-top: 1rem; padding-block: .5rem; padding-inline-end: .5rem; position: absolute; scale: .95; box-shadow: 0 1px 3px oklch(0% 0 0/.1), 0 1px 2px -1px oklch(0% 0 0/.1); @media (prefers-reduced-motion:no-preference) { @starting-style { opacity: 0; scale: .95 } transition-behavior:allow-discrete; transition-property:opacity, scale, display; transition-duration:.2s; transition-timing-function:cubic-bezier(.4, 0, .2, 1); animation:.2s menu } } &[open]>:is(ul, menu) { opacity: 1; scale: 1 } } &>li>details>:is(ul, menu) { &:before { --tw-content: none; content: var(--tw-content) } } } } .md\:menu-vertical { @layer daisyui.l1.l2 { flex-direction: column; align-items: stretch; display: inline-flex; &>li:not(.menu-title)>details>:is(ul, menu) { margin-inline-start: 1rem; background-color: revert-layer; border-radius: revert-layer; animation: revert-layer; box-shadow: revert-layer; margin-top: 0; padding-block: 0; padding-inline-end: 0; transition: revert-layer; position: relative } } } .md\:menu-paged { @layer daisyui.l1.l2 { --menu-paged-arrow: 135deg; --menu-paged-back-arrow: -45deg; [dir=rtl] & { --menu-paged-arrow: -45deg; --menu-paged-back-arrow: 135deg } & :where(li ul, li menu):before { --tw-content: none; content: var(--tw-content) } & details[open]>summary { font-size: 0; &:not(:active) { transition-duration: 0s } &:before { --tw-content: "Back"; content: var(--tw-content); font-size: .875rem } &[aria-label]:before { content: attr(aria-label) } } & details::details-content { transition: none } &:has(>li>details[open])>li:not(:has(>details[open])), & :where(:is(ul, menu):has(>li>details[open])>li:not(:has(>details[open]))) { display: none } & :where(li:has(>details[open]), details[open], details[open]>:is(ul, menu)), & :where(details[open])::details-content { display: contents } & :where(details[open]:has(>:is(ul, menu)>li>details[open])>summary) { display: none } & :where(li>details>summary):after { rotate: var(--menu-paged-arrow); transition: none; translate: 0 } & :where(li>details[open]>summary):after { rotate: var(--menu-paged-back-arrow); order: -1; justify-self: flex-start } } } .md\:menu-xs { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .25rem; padding-inline: .5rem; font-size: .6875rem } & details[open]>summary:before { font-size: .6875rem } & .menu-title { padding-block: .25rem; padding-inline: .5rem } } } .md\:menu-sm { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .25rem; padding-inline: .625rem; font-size: .75rem } & details[open]>summary:before { font-size: .75rem } & .menu-title { padding-block: .5rem; padding-inline: .75rem } } } .md\:menu-md { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: .75rem; font-size: .875rem } & details[open]>summary:before { font-size: .875rem } & .menu-title { padding-block: .5rem; padding-inline: .75rem } } } .md\:menu-lg { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: 1rem; font-size: 1.125rem } & details[open]>summary:before { font-size: 1.125rem } & .menu-title { padding-block: .75rem; padding-inline: 1.5rem } } } .md\:menu-xl { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: 1.25rem; font-size: 1.375rem } & details[open]>summary:before { font-size: 1.375rem } & .menu-title { padding-block: .75rem; padding-inline: 1.5rem } } } :where(:not(ul, menu, details, .menu-title, .btn)).menu-active { @layer daisyui.l1.l2 { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } color:var(--menu-active-fg); background-color:var(--menu-active-bg); background-size:auto, calc(var(--noise) * 100%); background-image:none, var(--fx-noise) } } } @media (width>=1024px) { .lg\:menu { @layer daisyui.l1.l2.l3 { --menu-active-fg: var(--color-neutral-content); --menu-active-bg: var(--color-neutral); flex-flow: column wrap; width: fit-content; padding: .5rem; font-size: .875rem; display: flex; & :where(li ul, li menu) { white-space: nowrap; margin-inline-start: 1rem; padding-inline-start: .5rem; position: relative; &:before { inset-inline-start: 0; background-color: var(--color-base-content); opacity: .1; width: var(--border); content: ""; position: absolute; top: .75rem; bottom: .75rem } } & :where(li>.menu-dropdown:not(.menu-dropdown-show)) { display: none } & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title, .btn)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); text-align: start; user-select: none; grid-auto-columns: minmax(auto, max-content) auto max-content; grid-auto-flow: column; align-content: flex-start; align-items: center; gap: .5rem; padding-block: .375rem; padding-inline: .75rem; transition-property: color, background-color, box-shadow; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); display: grid } & :where(li>details>summary) { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } &::-webkit-details-marker { display: none } } & :where(li>details>summary), & :where(li>.menu-dropdown-toggle) { &:after { content: ""; transform-origin: 50%; pointer-events: none; justify-self: flex-end; width: .375rem; height: .375rem; transition-property: rotate, translate; transition-duration: .2s; display: block; translate: 0 -1px; rotate: -135deg; box-shadow: inset 2px 2px } } & details { interpolate-size: allow-keywords; overflow: hidden } & details::details-content { block-size: 0; @media (prefers-reduced-motion:no-preference) { transition-behavior: allow-discrete; transition-property: block-size, content-visibility; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1) } } & details[open]::details-content { block-size: auto } & :where(li>details[open]>summary):after, & :where(li>.menu-dropdown-toggle.menu-dropdown-show):after { translate: 0 1px; rotate: 45deg } & :where(li:not(.menu-title, .disabled)>:not(ul, menu, details, .menu-title), li:not(.menu-title, .disabled)>details>summary:not(.menu-title)):not(.menu-active, :active, .btn) { &.menu-focus, &:focus-visible { cursor: pointer; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); color: var(--color-base-content); --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } } & :where(li:not(.menu-title, .disabled)>:not(ul, menu, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled)>details>summary:not(.menu-title):not(.menu-active, :active, .btn):hover) { cursor: pointer; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } box-shadow:inset 0 1px oklch(0% 0 0/.01), inset 0 -1px oklch(100% 0 0/.01) } & :where(li:empty) { background-color: var(--color-base-content); opacity: .1; height: 1px; margin: .5rem 1rem } & :where(li) { flex-flow: column wrap; flex-shrink: 0; align-items: stretch; display: flex; position: relative; & .badge { justify-self: flex-end } &>:not(ul, menu, .menu-title, details, .btn):active, &>:not(ul, menu, .menu-title, details, .btn).menu-active, &>details>summary:active { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } color:var(--menu-active-fg); background-color:var(--menu-active-bg); background-size:auto, calc(var(--noise) * 100%); background-image:none, var(--fx-noise); &:not(&:active) { box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg) } } &.menu-disabled, & [disabled] { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 20%, transparent) } } & .dropdown:focus-within { & .menu-dropdown-toggle:after { translate: 0 1px; rotate: 45deg } } & .dropdown-content { margin-top: .5rem; padding: .5rem; &:before { display: none } } } } .lg\:menu-title { @layer daisyui.l1.l2.l3 { color: color-mix(in oklab, var(--color-base-content) 40%, transparent); padding-block: .5rem; padding-inline: .75rem; font-size: .875rem; font-weight: 600 } } .lg\:menu-horizontal { @layer daisyui.l1.l2 { flex-direction: row; align-items: center; display: inline-flex; &>li:not(.menu-title)>details { &>:is(ul, menu) { margin-inline-start: 0; transform-origin: top; border-radius: var(--radius-box); background-color: var(--color-base-100); opacity: 0; margin-top: 1rem; padding-block: .5rem; padding-inline-end: .5rem; position: absolute; scale: .95; box-shadow: 0 1px 3px oklch(0% 0 0/.1), 0 1px 2px -1px oklch(0% 0 0/.1); @media (prefers-reduced-motion:no-preference) { @starting-style { opacity: 0; scale: .95 } transition-behavior:allow-discrete; transition-property:opacity, scale, display; transition-duration:.2s; transition-timing-function:cubic-bezier(.4, 0, .2, 1); animation:.2s menu } } &[open]>:is(ul, menu) { opacity: 1; scale: 1 } } &>li>details>:is(ul, menu) { &:before { --tw-content: none; content: var(--tw-content) } } } } .lg\:menu-vertical { @layer daisyui.l1.l2 { flex-direction: column; align-items: stretch; display: inline-flex; &>li:not(.menu-title)>details>:is(ul, menu) { margin-inline-start: 1rem; background-color: revert-layer; border-radius: revert-layer; animation: revert-layer; box-shadow: revert-layer; margin-top: 0; padding-block: 0; padding-inline-end: 0; transition: revert-layer; position: relative } } } .lg\:menu-paged { @layer daisyui.l1.l2 { --menu-paged-arrow: 135deg; --menu-paged-back-arrow: -45deg; [dir=rtl] & { --menu-paged-arrow: -45deg; --menu-paged-back-arrow: 135deg } & :where(li ul, li menu):before { --tw-content: none; content: var(--tw-content) } & details[open]>summary { font-size: 0; &:not(:active) { transition-duration: 0s } &:before { --tw-content: "Back"; content: var(--tw-content); font-size: .875rem } &[aria-label]:before { content: attr(aria-label) } } & details::details-content { transition: none } &:has(>li>details[open])>li:not(:has(>details[open])), & :where(:is(ul, menu):has(>li>details[open])>li:not(:has(>details[open]))) { display: none } & :where(li:has(>details[open]), details[open], details[open]>:is(ul, menu)), & :where(details[open])::details-content { display: contents } & :where(details[open]:has(>:is(ul, menu)>li>details[open])>summary) { display: none } & :where(li>details>summary):after { rotate: var(--menu-paged-arrow); transition: none; translate: 0 } & :where(li>details[open]>summary):after { rotate: var(--menu-paged-back-arrow); order: -1; justify-self: flex-start } } } .lg\:menu-xs { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .25rem; padding-inline: .5rem; font-size: .6875rem } & details[open]>summary:before { font-size: .6875rem } & .menu-title { padding-block: .25rem; padding-inline: .5rem } } } .lg\:menu-sm { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .25rem; padding-inline: .625rem; font-size: .75rem } & details[open]>summary:before { font-size: .75rem } & .menu-title { padding-block: .5rem; padding-inline: .75rem } } } .lg\:menu-md { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: .75rem; font-size: .875rem } & details[open]>summary:before { font-size: .875rem } & .menu-title { padding-block: .5rem; padding-inline: .75rem } } } .lg\:menu-lg { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: 1rem; font-size: 1.125rem } & details[open]>summary:before { font-size: 1.125rem } & .menu-title { padding-block: .75rem; padding-inline: 1.5rem } } } .lg\:menu-xl { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: 1.25rem; font-size: 1.375rem } & details[open]>summary:before { font-size: 1.375rem } & .menu-title { padding-block: .75rem; padding-inline: 1.5rem } } } :where(:not(ul, menu, details, .menu-title, .btn)).menu-active { @layer daisyui.l1.l2 { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } color:var(--menu-active-fg); background-color:var(--menu-active-bg); background-size:auto, calc(var(--noise) * 100%); background-image:none, var(--fx-noise) } } } @media (width>=1280px) { .xl\:menu { @layer daisyui.l1.l2.l3 { --menu-active-fg: var(--color-neutral-content); --menu-active-bg: var(--color-neutral); flex-flow: column wrap; width: fit-content; padding: .5rem; font-size: .875rem; display: flex; & :where(li ul, li menu) { white-space: nowrap; margin-inline-start: 1rem; padding-inline-start: .5rem; position: relative; &:before { inset-inline-start: 0; background-color: var(--color-base-content); opacity: .1; width: var(--border); content: ""; position: absolute; top: .75rem; bottom: .75rem } } & :where(li>.menu-dropdown:not(.menu-dropdown-show)) { display: none } & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title, .btn)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); text-align: start; user-select: none; grid-auto-columns: minmax(auto, max-content) auto max-content; grid-auto-flow: column; align-content: flex-start; align-items: center; gap: .5rem; padding-block: .375rem; padding-inline: .75rem; transition-property: color, background-color, box-shadow; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); display: grid } & :where(li>details>summary) { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } &::-webkit-details-marker { display: none } } & :where(li>details>summary), & :where(li>.menu-dropdown-toggle) { &:after { content: ""; transform-origin: 50%; pointer-events: none; justify-self: flex-end; width: .375rem; height: .375rem; transition-property: rotate, translate; transition-duration: .2s; display: block; translate: 0 -1px; rotate: -135deg; box-shadow: inset 2px 2px } } & details { interpolate-size: allow-keywords; overflow: hidden } & details::details-content { block-size: 0; @media (prefers-reduced-motion:no-preference) { transition-behavior: allow-discrete; transition-property: block-size, content-visibility; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1) } } & details[open]::details-content { block-size: auto } & :where(li>details[open]>summary):after, & :where(li>.menu-dropdown-toggle.menu-dropdown-show):after { translate: 0 1px; rotate: 45deg } & :where(li:not(.menu-title, .disabled)>:not(ul, menu, details, .menu-title), li:not(.menu-title, .disabled)>details>summary:not(.menu-title)):not(.menu-active, :active, .btn) { &.menu-focus, &:focus-visible { cursor: pointer; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); color: var(--color-base-content); --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } } & :where(li:not(.menu-title, .disabled)>:not(ul, menu, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled)>details>summary:not(.menu-title):not(.menu-active, :active, .btn):hover) { cursor: pointer; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } box-shadow:inset 0 1px oklch(0% 0 0/.01), inset 0 -1px oklch(100% 0 0/.01) } & :where(li:empty) { background-color: var(--color-base-content); opacity: .1; height: 1px; margin: .5rem 1rem } & :where(li) { flex-flow: column wrap; flex-shrink: 0; align-items: stretch; display: flex; position: relative; & .badge { justify-self: flex-end } &>:not(ul, menu, .menu-title, details, .btn):active, &>:not(ul, menu, .menu-title, details, .btn).menu-active, &>details>summary:active { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } color:var(--menu-active-fg); background-color:var(--menu-active-bg); background-size:auto, calc(var(--noise) * 100%); background-image:none, var(--fx-noise); &:not(&:active) { box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg) } } &.menu-disabled, & [disabled] { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 20%, transparent) } } & .dropdown:focus-within { & .menu-dropdown-toggle:after { translate: 0 1px; rotate: 45deg } } & .dropdown-content { margin-top: .5rem; padding: .5rem; &:before { display: none } } } } .xl\:menu-title { @layer daisyui.l1.l2.l3 { color: color-mix(in oklab, var(--color-base-content) 40%, transparent); padding-block: .5rem; padding-inline: .75rem; font-size: .875rem; font-weight: 600 } } .xl\:menu-horizontal { @layer daisyui.l1.l2 { flex-direction: row; align-items: center; display: inline-flex; &>li:not(.menu-title)>details { &>:is(ul, menu) { margin-inline-start: 0; transform-origin: top; border-radius: var(--radius-box); background-color: var(--color-base-100); opacity: 0; margin-top: 1rem; padding-block: .5rem; padding-inline-end: .5rem; position: absolute; scale: .95; box-shadow: 0 1px 3px oklch(0% 0 0/.1), 0 1px 2px -1px oklch(0% 0 0/.1); @media (prefers-reduced-motion:no-preference) { @starting-style { opacity: 0; scale: .95 } transition-behavior:allow-discrete; transition-property:opacity, scale, display; transition-duration:.2s; transition-timing-function:cubic-bezier(.4, 0, .2, 1); animation:.2s menu } } &[open]>:is(ul, menu) { opacity: 1; scale: 1 } } &>li>details>:is(ul, menu) { &:before { --tw-content: none; content: var(--tw-content) } } } } .xl\:menu-vertical { @layer daisyui.l1.l2 { flex-direction: column; align-items: stretch; display: inline-flex; &>li:not(.menu-title)>details>:is(ul, menu) { margin-inline-start: 1rem; background-color: revert-layer; border-radius: revert-layer; animation: revert-layer; box-shadow: revert-layer; margin-top: 0; padding-block: 0; padding-inline-end: 0; transition: revert-layer; position: relative } } } .xl\:menu-paged { @layer daisyui.l1.l2 { --menu-paged-arrow: 135deg; --menu-paged-back-arrow: -45deg; [dir=rtl] & { --menu-paged-arrow: -45deg; --menu-paged-back-arrow: 135deg } & :where(li ul, li menu):before { --tw-content: none; content: var(--tw-content) } & details[open]>summary { font-size: 0; &:not(:active) { transition-duration: 0s } &:before { --tw-content: "Back"; content: var(--tw-content); font-size: .875rem } &[aria-label]:before { content: attr(aria-label) } } & details::details-content { transition: none } &:has(>li>details[open])>li:not(:has(>details[open])), & :where(:is(ul, menu):has(>li>details[open])>li:not(:has(>details[open]))) { display: none } & :where(li:has(>details[open]), details[open], details[open]>:is(ul, menu)), & :where(details[open])::details-content { display: contents } & :where(details[open]:has(>:is(ul, menu)>li>details[open])>summary) { display: none } & :where(li>details>summary):after { rotate: var(--menu-paged-arrow); transition: none; translate: 0 } & :where(li>details[open]>summary):after { rotate: var(--menu-paged-back-arrow); order: -1; justify-self: flex-start } } } .xl\:menu-xs { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .25rem; padding-inline: .5rem; font-size: .6875rem } & details[open]>summary:before { font-size: .6875rem } & .menu-title { padding-block: .25rem; padding-inline: .5rem } } } .xl\:menu-sm { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .25rem; padding-inline: .625rem; font-size: .75rem } & details[open]>summary:before { font-size: .75rem } & .menu-title { padding-block: .5rem; padding-inline: .75rem } } } .xl\:menu-md { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: .75rem; font-size: .875rem } & details[open]>summary:before { font-size: .875rem } & .menu-title { padding-block: .5rem; padding-inline: .75rem } } } .xl\:menu-lg { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: 1rem; font-size: 1.125rem } & details[open]>summary:before { font-size: 1.125rem } & .menu-title { padding-block: .75rem; padding-inline: 1.5rem } } } .xl\:menu-xl { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: 1.25rem; font-size: 1.375rem } & details[open]>summary:before { font-size: 1.375rem } & .menu-title { padding-block: .75rem; padding-inline: 1.5rem } } } :where(:not(ul, menu, details, .menu-title, .btn)).menu-active { @layer daisyui.l1.l2 { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } color:var(--menu-active-fg); background-color:var(--menu-active-bg); background-size:auto, calc(var(--noise) * 100%); background-image:none, var(--fx-noise) } } } @media (width>=1536px) { .\32 xl\:menu { @layer daisyui.l1.l2.l3 { --menu-active-fg: var(--color-neutral-content); --menu-active-bg: var(--color-neutral); flex-flow: column wrap; width: fit-content; padding: .5rem; font-size: .875rem; display: flex; & :where(li ul, li menu) { white-space: nowrap; margin-inline-start: 1rem; padding-inline-start: .5rem; position: relative; &:before { inset-inline-start: 0; background-color: var(--color-base-content); opacity: .1; width: var(--border); content: ""; position: absolute; top: .75rem; bottom: .75rem } } & :where(li>.menu-dropdown:not(.menu-dropdown-show)) { display: none } & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title, .btn)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); text-align: start; user-select: none; grid-auto-columns: minmax(auto, max-content) auto max-content; grid-auto-flow: column; align-content: flex-start; align-items: center; gap: .5rem; padding-block: .375rem; padding-inline: .75rem; transition-property: color, background-color, box-shadow; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); display: grid } & :where(li>details>summary) { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } &::-webkit-details-marker { display: none } } & :where(li>details>summary), & :where(li>.menu-dropdown-toggle) { &:after { content: ""; transform-origin: 50%; pointer-events: none; justify-self: flex-end; width: .375rem; height: .375rem; transition-property: rotate, translate; transition-duration: .2s; display: block; translate: 0 -1px; rotate: -135deg; box-shadow: inset 2px 2px } } & details { interpolate-size: allow-keywords; overflow: hidden } & details::details-content { block-size: 0; @media (prefers-reduced-motion:no-preference) { transition-behavior: allow-discrete; transition-property: block-size, content-visibility; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1) } } & details[open]::details-content { block-size: auto } & :where(li>details[open]>summary):after, & :where(li>.menu-dropdown-toggle.menu-dropdown-show):after { translate: 0 1px; rotate: 45deg } & :where(li:not(.menu-title, .disabled)>:not(ul, menu, details, .menu-title), li:not(.menu-title, .disabled)>details>summary:not(.menu-title)):not(.menu-active, :active, .btn) { &.menu-focus, &:focus-visible { cursor: pointer; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); color: var(--color-base-content); --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } } & :where(li:not(.menu-title, .disabled)>:not(ul, menu, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled)>details>summary:not(.menu-title):not(.menu-active, :active, .btn):hover) { cursor: pointer; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } box-shadow:inset 0 1px oklch(0% 0 0/.01), inset 0 -1px oklch(100% 0 0/.01) } & :where(li:empty) { background-color: var(--color-base-content); opacity: .1; height: 1px; margin: .5rem 1rem } & :where(li) { flex-flow: column wrap; flex-shrink: 0; align-items: stretch; display: flex; position: relative; & .badge { justify-self: flex-end } &>:not(ul, menu, .menu-title, details, .btn):active, &>:not(ul, menu, .menu-title, details, .btn).menu-active, &>details>summary:active { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } color:var(--menu-active-fg); background-color:var(--menu-active-bg); background-size:auto, calc(var(--noise) * 100%); background-image:none, var(--fx-noise); &:not(&:active) { box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg) } } &.menu-disabled, & [disabled] { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 20%, transparent) } } & .dropdown:focus-within { & .menu-dropdown-toggle:after { translate: 0 1px; rotate: 45deg } } & .dropdown-content { margin-top: .5rem; padding: .5rem; &:before { display: none } } } } .\32 xl\:menu-title { @layer daisyui.l1.l2.l3 { color: color-mix(in oklab, var(--color-base-content) 40%, transparent); padding-block: .5rem; padding-inline: .75rem; font-size: .875rem; font-weight: 600 } } .\32 xl\:menu-horizontal { @layer daisyui.l1.l2 { flex-direction: row; align-items: center; display: inline-flex; &>li:not(.menu-title)>details { &>:is(ul, menu) { margin-inline-start: 0; transform-origin: top; border-radius: var(--radius-box); background-color: var(--color-base-100); opacity: 0; margin-top: 1rem; padding-block: .5rem; padding-inline-end: .5rem; position: absolute; scale: .95; box-shadow: 0 1px 3px oklch(0% 0 0/.1), 0 1px 2px -1px oklch(0% 0 0/.1); @media (prefers-reduced-motion:no-preference) { @starting-style { opacity: 0; scale: .95 } transition-behavior:allow-discrete; transition-property:opacity, scale, display; transition-duration:.2s; transition-timing-function:cubic-bezier(.4, 0, .2, 1); animation:.2s menu } } &[open]>:is(ul, menu) { opacity: 1; scale: 1 } } &>li>details>:is(ul, menu) { &:before { --tw-content: none; content: var(--tw-content) } } } } .\32 xl\:menu-vertical { @layer daisyui.l1.l2 { flex-direction: column; align-items: stretch; display: inline-flex; &>li:not(.menu-title)>details>:is(ul, menu) { margin-inline-start: 1rem; background-color: revert-layer; border-radius: revert-layer; animation: revert-layer; box-shadow: revert-layer; margin-top: 0; padding-block: 0; padding-inline-end: 0; transition: revert-layer; position: relative } } } .\32 xl\:menu-paged { @layer daisyui.l1.l2 { --menu-paged-arrow: 135deg; --menu-paged-back-arrow: -45deg; [dir=rtl] & { --menu-paged-arrow: -45deg; --menu-paged-back-arrow: 135deg } & :where(li ul, li menu):before { --tw-content: none; content: var(--tw-content) } & details[open]>summary { font-size: 0; &:not(:active) { transition-duration: 0s } &:before { --tw-content: "Back"; content: var(--tw-content); font-size: .875rem } &[aria-label]:before { content: attr(aria-label) } } & details::details-content { transition: none } &:has(>li>details[open])>li:not(:has(>details[open])), & :where(:is(ul, menu):has(>li>details[open])>li:not(:has(>details[open]))) { display: none } & :where(li:has(>details[open]), details[open], details[open]>:is(ul, menu)), & :where(details[open])::details-content { display: contents } & :where(details[open]:has(>:is(ul, menu)>li>details[open])>summary) { display: none } & :where(li>details>summary):after { rotate: var(--menu-paged-arrow); transition: none; translate: 0 } & :where(li>details[open]>summary):after { rotate: var(--menu-paged-back-arrow); order: -1; justify-self: flex-start } } } .\32 xl\:menu-xs { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .25rem; padding-inline: .5rem; font-size: .6875rem } & details[open]>summary:before { font-size: .6875rem } & .menu-title { padding-block: .25rem; padding-inline: .5rem } } } .\32 xl\:menu-sm { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .25rem; padding-inline: .625rem; font-size: .75rem } & details[open]>summary:before { font-size: .75rem } & .menu-title { padding-block: .5rem; padding-inline: .75rem } } } .\32 xl\:menu-md { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: .75rem; font-size: .875rem } & details[open]>summary:before { font-size: .875rem } & .menu-title { padding-block: .5rem; padding-inline: .75rem } } } .\32 xl\:menu-lg { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: 1rem; font-size: 1.125rem } & details[open]>summary:before { font-size: 1.125rem } & .menu-title { padding-block: .75rem; padding-inline: 1.5rem } } } .\32 xl\:menu-xl { @layer daisyui.l1.l2 { & :where(li:not(.menu-title)>:not(ul, menu, details, .menu-title)), & :where(li:not(.menu-title)>details>summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: 1.25rem; font-size: 1.375rem } & details[open]>summary:before { font-size: 1.375rem } & .menu-title { padding-block: .75rem; padding-inline: 1.5rem } } } :where(:not(ul, menu, details, .menu-title, .btn)).menu-active { @layer daisyui.l1.l2 { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } color:var(--menu-active-fg); background-color:var(--menu-active-bg); background-size:auto, calc(var(--noise) * 100%); background-image:none, var(--fx-noise) } } } @keyframes menu { 0% { opacity: 0 } } .diff { @layer daisyui.l1.l2 { -webkit-user-select: none; user-select: none; direction: ltr; grid-template-rows: 1fr 1.8rem 1fr; grid-template-columns: auto 1fr; align-items: normal; width: 100%; display: grid; position: relative; overflow: hidden; container-type: inline-size; &:focus-visible, &:has(.diff-item-1:focus-visible) { outline-style: var(--tw-outline-style); outline-offset: 1px; outline-width: 2px; outline-color: var(--color-base-content) } &:focus-visible { outline-style: var(--tw-outline-style); outline-offset: 1px; outline-width: 2px; outline-color: var(--color-base-content); & .diff-resizer { min-width: 95cqi; max-width: 95cqi } } &:has(.diff-item-1:focus-visible) { outline-style: var(--tw-outline-style); outline-offset: 1px; outline-width: 2px; & .diff-resizer { min-width: 5cqi; max-width: 5cqi } } &:hover { & .diff-item-2 { &:after { height: 2.4rem } } } @supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x) { &:focus { & .diff-resizer { min-width: 5cqi; max-width: 5cqi } } &:has(.diff-item-1:focus) { & .diff-resizer { min-width: 95cqi; max-width: 95cqi } } } } } .diff-resizer { @layer daisyui.l1.l2.l3 { isolation: isolate; z-index: 2; resize: horizontal; opacity: 0; cursor: ew-resize; transform-origin: 100% 100%; clip-path: inset(calc(100% - .75rem) 0 0 calc(100% - .75rem)); grid-row-start: 2; grid-column-start: 1; width: 50cqi; min-width: 1rem; max-width: calc(100cqi - 1rem); height: .75rem; transition: min-width .3s ease-out, max-width .3s ease-out; position: relative; overflow: hidden; transform: scaleY(5)translate(.32rem, 50%) } } .diff-item-2 { @layer daisyui.l1.l2.l3 { grid-row: 1/span 3; grid-column-start: 1; position: relative; &:after { pointer-events: none; z-index: 2; background-color: color-mix(in oklab, var(--color-base-100) 98%, transparent); border: 2px solid var(--color-base-100); content: ""; outline: 2px solid color-mix(in oklab, var(--color-base-content) 10%, #0000); outline-offset: -3px; width: 1.2rem; height: 1.8rem; transition: height .3s linear(0, .931 13.8%, 1.196 21.4%, 1.343 29.8%, 1.378 36%, 1.365 43.2%, 1.059 78%, 1); border-radius: 3.40282e38px; position: absolute; top: 50%; bottom: 0; right: 1px; translate: 50% -50%; box-shadow: 0 0 0 2px #0000002a } &>* { pointer-events: none; object-fit: cover; object-position: center; width: 100cqi; max-width: none; height: 100%; position: absolute; top: 0; bottom: 0; left: 0 } @supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x) { &:after { --tw-content: none; content: var(--tw-content) } } } } .diff-item-1 { @layer daisyui.l1.l2.l3 { z-index: 1; border-right: 2px solid var(--color-base-100); grid-row: 1/span 3; grid-column-start: 1; position: relative; overflow: hidden; box-shadow: 0 0 0 2px #0000002a; &:focus-visible { --tw-outline-style: none; outline-style: none } &>* { pointer-events: none; object-fit: cover; object-position: center; width: 100cqi; max-width: none; height: 100%; position: absolute; top: 0; bottom: 0; left: 0 } } } @media (width>=640px) { .sm\:diff { @layer daisyui.l1.l2 { -webkit-user-select: none; user-select: none; direction: ltr; grid-template-rows: 1fr 1.8rem 1fr; grid-template-columns: auto 1fr; align-items: normal; width: 100%; display: grid; position: relative; overflow: hidden; container-type: inline-size; &:focus-visible, &:has(.diff-item-1:focus-visible) { outline-style: var(--tw-outline-style); outline-offset: 1px; outline-width: 2px; outline-color: var(--color-base-content) } &:focus-visible { outline-style: var(--tw-outline-style); outline-offset: 1px; outline-width: 2px; outline-color: var(--color-base-content); & .diff-resizer { min-width: 95cqi; max-width: 95cqi } } &:has(.diff-item-1:focus-visible) { outline-style: var(--tw-outline-style); outline-offset: 1px; outline-width: 2px; & .diff-resizer { min-width: 5cqi; max-width: 5cqi } } &:hover { & .diff-item-2 { &:after { height: 2.4rem } } } @supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x) { &:focus { & .diff-resizer { min-width: 5cqi; max-width: 5cqi } } &:has(.diff-item-1:focus) { & .diff-resizer { min-width: 95cqi; max-width: 95cqi } } } } } .sm\:diff-resizer { @layer daisyui.l1.l2.l3 { isolation: isolate; z-index: 2; resize: horizontal; opacity: 0; cursor: ew-resize; transform-origin: 100% 100%; clip-path: inset(calc(100% - .75rem) 0 0 calc(100% - .75rem)); grid-row-start: 2; grid-column-start: 1; width: 50cqi; min-width: 1rem; max-width: calc(100cqi - 1rem); height: .75rem; transition: min-width .3s ease-out, max-width .3s ease-out; position: relative; overflow: hidden; transform: scaleY(5)translate(.32rem, 50%) } } .sm\:diff-item-2 { @layer daisyui.l1.l2.l3 { grid-row: 1/span 3; grid-column-start: 1; position: relative; &:after { pointer-events: none; z-index: 2; background-color: color-mix(in oklab, var(--color-base-100) 98%, transparent); border: 2px solid var(--color-base-100); content: ""; outline: 2px solid color-mix(in oklab, var(--color-base-content) 10%, #0000); outline-offset: -3px; width: 1.2rem; height: 1.8rem; transition: height .3s linear(0, .931 13.8%, 1.196 21.4%, 1.343 29.8%, 1.378 36%, 1.365 43.2%, 1.059 78%, 1); border-radius: 3.40282e38px; position: absolute; top: 50%; bottom: 0; right: 1px; translate: 50% -50%; box-shadow: 0 0 0 2px #0000002a } &>* { pointer-events: none; object-fit: cover; object-position: center; width: 100cqi; max-width: none; height: 100%; position: absolute; top: 0; bottom: 0; left: 0 } @supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x) { &:after { --tw-content: none; content: var(--tw-content) } } } } .sm\:diff-item-1 { @layer daisyui.l1.l2.l3 { z-index: 1; border-right: 2px solid var(--color-base-100); grid-row: 1/span 3; grid-column-start: 1; position: relative; overflow: hidden; box-shadow: 0 0 0 2px #0000002a; &:focus-visible { --tw-outline-style: none; outline-style: none } &>* { pointer-events: none; object-fit: cover; object-position: center; width: 100cqi; max-width: none; height: 100%; position: absolute; top: 0; bottom: 0; left: 0 } } } } @media (width>=768px) { .md\:diff { @layer daisyui.l1.l2 { -webkit-user-select: none; user-select: none; direction: ltr; grid-template-rows: 1fr 1.8rem 1fr; grid-template-columns: auto 1fr; align-items: normal; width: 100%; display: grid; position: relative; overflow: hidden; container-type: inline-size; &:focus-visible, &:has(.diff-item-1:focus-visible) { outline-style: var(--tw-outline-style); outline-offset: 1px; outline-width: 2px; outline-color: var(--color-base-content) } &:focus-visible { outline-style: var(--tw-outline-style); outline-offset: 1px; outline-width: 2px; outline-color: var(--color-base-content); & .diff-resizer { min-width: 95cqi; max-width: 95cqi } } &:has(.diff-item-1:focus-visible) { outline-style: var(--tw-outline-style); outline-offset: 1px; outline-width: 2px; & .diff-resizer { min-width: 5cqi; max-width: 5cqi } } &:hover { & .diff-item-2 { &:after { height: 2.4rem } } } @supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x) { &:focus { & .diff-resizer { min-width: 5cqi; max-width: 5cqi } } &:has(.diff-item-1:focus) { & .diff-resizer { min-width: 95cqi; max-width: 95cqi } } } } } .md\:diff-resizer { @layer daisyui.l1.l2.l3 { isolation: isolate; z-index: 2; resize: horizontal; opacity: 0; cursor: ew-resize; transform-origin: 100% 100%; clip-path: inset(calc(100% - .75rem) 0 0 calc(100% - .75rem)); grid-row-start: 2; grid-column-start: 1; width: 50cqi; min-width: 1rem; max-width: calc(100cqi - 1rem); height: .75rem; transition: min-width .3s ease-out, max-width .3s ease-out; position: relative; overflow: hidden; transform: scaleY(5)translate(.32rem, 50%) } } .md\:diff-item-2 { @layer daisyui.l1.l2.l3 { grid-row: 1/span 3; grid-column-start: 1; position: relative; &:after { pointer-events: none; z-index: 2; background-color: color-mix(in oklab, var(--color-base-100) 98%, transparent); border: 2px solid var(--color-base-100); content: ""; outline: 2px solid color-mix(in oklab, var(--color-base-content) 10%, #0000); outline-offset: -3px; width: 1.2rem; height: 1.8rem; transition: height .3s linear(0, .931 13.8%, 1.196 21.4%, 1.343 29.8%, 1.378 36%, 1.365 43.2%, 1.059 78%, 1); border-radius: 3.40282e38px; position: absolute; top: 50%; bottom: 0; right: 1px; translate: 50% -50%; box-shadow: 0 0 0 2px #0000002a } &>* { pointer-events: none; object-fit: cover; object-position: center; width: 100cqi; max-width: none; height: 100%; position: absolute; top: 0; bottom: 0; left: 0 } @supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x) { &:after { --tw-content: none; content: var(--tw-content) } } } } .md\:diff-item-1 { @layer daisyui.l1.l2.l3 { z-index: 1; border-right: 2px solid var(--color-base-100); grid-row: 1/span 3; grid-column-start: 1; position: relative; overflow: hidden; box-shadow: 0 0 0 2px #0000002a; &:focus-visible { --tw-outline-style: none; outline-style: none } &>* { pointer-events: none; object-fit: cover; object-position: center; width: 100cqi; max-width: none; height: 100%; position: absolute; top: 0; bottom: 0; left: 0 } } } } @media (width>=1024px) { .lg\:diff { @layer daisyui.l1.l2 { -webkit-user-select: none; user-select: none; direction: ltr; grid-template-rows: 1fr 1.8rem 1fr; grid-template-columns: auto 1fr; align-items: normal; width: 100%; display: grid; position: relative; overflow: hidden; container-type: inline-size; &:focus-visible, &:has(.diff-item-1:focus-visible) { outline-style: var(--tw-outline-style); outline-offset: 1px; outline-width: 2px; outline-color: var(--color-base-content) } &:focus-visible { outline-style: var(--tw-outline-style); outline-offset: 1px; outline-width: 2px; outline-color: var(--color-base-content); & .diff-resizer { min-width: 95cqi; max-width: 95cqi } } &:has(.diff-item-1:focus-visible) { outline-style: var(--tw-outline-style); outline-offset: 1px; outline-width: 2px; & .diff-resizer { min-width: 5cqi; max-width: 5cqi } } &:hover { & .diff-item-2 { &:after { height: 2.4rem } } } @supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x) { &:focus { & .diff-resizer { min-width: 5cqi; max-width: 5cqi } } &:has(.diff-item-1:focus) { & .diff-resizer { min-width: 95cqi; max-width: 95cqi } } } } } .lg\:diff-resizer { @layer daisyui.l1.l2.l3 { isolation: isolate; z-index: 2; resize: horizontal; opacity: 0; cursor: ew-resize; transform-origin: 100% 100%; clip-path: inset(calc(100% - .75rem) 0 0 calc(100% - .75rem)); grid-row-start: 2; grid-column-start: 1; width: 50cqi; min-width: 1rem; max-width: calc(100cqi - 1rem); height: .75rem; transition: min-width .3s ease-out, max-width .3s ease-out; position: relative; overflow: hidden; transform: scaleY(5)translate(.32rem, 50%) } } .lg\:diff-item-2 { @layer daisyui.l1.l2.l3 { grid-row: 1/span 3; grid-column-start: 1; position: relative; &:after { pointer-events: none; z-index: 2; background-color: color-mix(in oklab, var(--color-base-100) 98%, transparent); border: 2px solid var(--color-base-100); content: ""; outline: 2px solid color-mix(in oklab, var(--color-base-content) 10%, #0000); outline-offset: -3px; width: 1.2rem; height: 1.8rem; transition: height .3s linear(0, .931 13.8%, 1.196 21.4%, 1.343 29.8%, 1.378 36%, 1.365 43.2%, 1.059 78%, 1); border-radius: 3.40282e38px; position: absolute; top: 50%; bottom: 0; right: 1px; translate: 50% -50%; box-shadow: 0 0 0 2px #0000002a } &>* { pointer-events: none; object-fit: cover; object-position: center; width: 100cqi; max-width: none; height: 100%; position: absolute; top: 0; bottom: 0; left: 0 } @supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x) { &:after { --tw-content: none; content: var(--tw-content) } } } } .lg\:diff-item-1 { @layer daisyui.l1.l2.l3 { z-index: 1; border-right: 2px solid var(--color-base-100); grid-row: 1/span 3; grid-column-start: 1; position: relative; overflow: hidden; box-shadow: 0 0 0 2px #0000002a; &:focus-visible { --tw-outline-style: none; outline-style: none } &>* { pointer-events: none; object-fit: cover; object-position: center; width: 100cqi; max-width: none; height: 100%; position: absolute; top: 0; bottom: 0; left: 0 } } } } @media (width>=1280px) { .xl\:diff { @layer daisyui.l1.l2 { -webkit-user-select: none; user-select: none; direction: ltr; grid-template-rows: 1fr 1.8rem 1fr; grid-template-columns: auto 1fr; align-items: normal; width: 100%; display: grid; position: relative; overflow: hidden; container-type: inline-size; &:focus-visible, &:has(.diff-item-1:focus-visible) { outline-style: var(--tw-outline-style); outline-offset: 1px; outline-width: 2px; outline-color: var(--color-base-content) } &:focus-visible { outline-style: var(--tw-outline-style); outline-offset: 1px; outline-width: 2px; outline-color: var(--color-base-content); & .diff-resizer { min-width: 95cqi; max-width: 95cqi } } &:has(.diff-item-1:focus-visible) { outline-style: var(--tw-outline-style); outline-offset: 1px; outline-width: 2px; & .diff-resizer { min-width: 5cqi; max-width: 5cqi } } &:hover { & .diff-item-2 { &:after { height: 2.4rem } } } @supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x) { &:focus { & .diff-resizer { min-width: 5cqi; max-width: 5cqi } } &:has(.diff-item-1:focus) { & .diff-resizer { min-width: 95cqi; max-width: 95cqi } } } } } .xl\:diff-resizer { @layer daisyui.l1.l2.l3 { isolation: isolate; z-index: 2; resize: horizontal; opacity: 0; cursor: ew-resize; transform-origin: 100% 100%; clip-path: inset(calc(100% - .75rem) 0 0 calc(100% - .75rem)); grid-row-start: 2; grid-column-start: 1; width: 50cqi; min-width: 1rem; max-width: calc(100cqi - 1rem); height: .75rem; transition: min-width .3s ease-out, max-width .3s ease-out; position: relative; overflow: hidden; transform: scaleY(5)translate(.32rem, 50%) } } .xl\:diff-item-2 { @layer daisyui.l1.l2.l3 { grid-row: 1/span 3; grid-column-start: 1; position: relative; &:after { pointer-events: none; z-index: 2; background-color: color-mix(in oklab, var(--color-base-100) 98%, transparent); border: 2px solid var(--color-base-100); content: ""; outline: 2px solid color-mix(in oklab, var(--color-base-content) 10%, #0000); outline-offset: -3px; width: 1.2rem; height: 1.8rem; transition: height .3s linear(0, .931 13.8%, 1.196 21.4%, 1.343 29.8%, 1.378 36%, 1.365 43.2%, 1.059 78%, 1); border-radius: 3.40282e38px; position: absolute; top: 50%; bottom: 0; right: 1px; translate: 50% -50%; box-shadow: 0 0 0 2px #0000002a } &>* { pointer-events: none; object-fit: cover; object-position: center; width: 100cqi; max-width: none; height: 100%; position: absolute; top: 0; bottom: 0; left: 0 } @supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x) { &:after { --tw-content: none; content: var(--tw-content) } } } } .xl\:diff-item-1 { @layer daisyui.l1.l2.l3 { z-index: 1; border-right: 2px solid var(--color-base-100); grid-row: 1/span 3; grid-column-start: 1; position: relative; overflow: hidden; box-shadow: 0 0 0 2px #0000002a; &:focus-visible { --tw-outline-style: none; outline-style: none } &>* { pointer-events: none; object-fit: cover; object-position: center; width: 100cqi; max-width: none; height: 100%; position: absolute; top: 0; bottom: 0; left: 0 } } } } @media (width>=1536px) { .\32 xl\:diff { @layer daisyui.l1.l2 { -webkit-user-select: none; user-select: none; direction: ltr; grid-template-rows: 1fr 1.8rem 1fr; grid-template-columns: auto 1fr; align-items: normal; width: 100%; display: grid; position: relative; overflow: hidden; container-type: inline-size; &:focus-visible, &:has(.diff-item-1:focus-visible) { outline-style: var(--tw-outline-style); outline-offset: 1px; outline-width: 2px; outline-color: var(--color-base-content) } &:focus-visible { outline-style: var(--tw-outline-style); outline-offset: 1px; outline-width: 2px; outline-color: var(--color-base-content); & .diff-resizer { min-width: 95cqi; max-width: 95cqi } } &:has(.diff-item-1:focus-visible) { outline-style: var(--tw-outline-style); outline-offset: 1px; outline-width: 2px; & .diff-resizer { min-width: 5cqi; max-width: 5cqi } } &:hover { & .diff-item-2 { &:after { height: 2.4rem } } } @supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x) { &:focus { & .diff-resizer { min-width: 5cqi; max-width: 5cqi } } &:has(.diff-item-1:focus) { & .diff-resizer { min-width: 95cqi; max-width: 95cqi } } } } } .\32 xl\:diff-resizer { @layer daisyui.l1.l2.l3 { isolation: isolate; z-index: 2; resize: horizontal; opacity: 0; cursor: ew-resize; transform-origin: 100% 100%; clip-path: inset(calc(100% - .75rem) 0 0 calc(100% - .75rem)); grid-row-start: 2; grid-column-start: 1; width: 50cqi; min-width: 1rem; max-width: calc(100cqi - 1rem); height: .75rem; transition: min-width .3s ease-out, max-width .3s ease-out; position: relative; overflow: hidden; transform: scaleY(5)translate(.32rem, 50%) } } .\32 xl\:diff-item-2 { @layer daisyui.l1.l2.l3 { grid-row: 1/span 3; grid-column-start: 1; position: relative; &:after { pointer-events: none; z-index: 2; background-color: color-mix(in oklab, var(--color-base-100) 98%, transparent); border: 2px solid var(--color-base-100); content: ""; outline: 2px solid color-mix(in oklab, var(--color-base-content) 10%, #0000); outline-offset: -3px; width: 1.2rem; height: 1.8rem; transition: height .3s linear(0, .931 13.8%, 1.196 21.4%, 1.343 29.8%, 1.378 36%, 1.365 43.2%, 1.059 78%, 1); border-radius: 3.40282e38px; position: absolute; top: 50%; bottom: 0; right: 1px; translate: 50% -50%; box-shadow: 0 0 0 2px #0000002a } &>* { pointer-events: none; object-fit: cover; object-position: center; width: 100cqi; max-width: none; height: 100%; position: absolute; top: 0; bottom: 0; left: 0 } @supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x) { &:after { --tw-content: none; content: var(--tw-content) } } } } .\32 xl\:diff-item-1 { @layer daisyui.l1.l2.l3 { z-index: 1; border-right: 2px solid var(--color-base-100); grid-row: 1/span 3; grid-column-start: 1; position: relative; overflow: hidden; box-shadow: 0 0 0 2px #0000002a; &:focus-visible { --tw-outline-style: none; outline-style: none } &>* { pointer-events: none; object-fit: cover; object-position: center; width: 100cqi; max-width: none; height: 100%; position: absolute; top: 0; bottom: 0; left: 0 } } } } .toast { @layer daisyui.l1.l2.l3 { inset-inline: auto 1rem; translate: var(--toast-x, 0) var(--toast-y, 0); background-color: #0000; flex-direction: column; gap: .5rem; width: max-content; max-width: calc(100vw - 2rem); display: flex; position: fixed; top: auto; bottom: 1rem; &>* { @media (prefers-reduced-motion:no-preference) { animation: .25s ease-out toast } } } } .toast-start { @layer daisyui.l1.l2 { --toast-x: 0; inset-inline: 1rem auto } } .toast-center { @layer daisyui.l1.l2 { --toast-x: -50%; inset-inline: 50% } } .toast-end { @layer daisyui.l1.l2 { --toast-x: 0; inset-inline: auto 1rem } } .toast-bottom { @layer daisyui.l1.l2 { --toast-y: 0; top: auto; bottom: 1rem } } .toast-middle { @layer daisyui.l1.l2 { --toast-y: -50%; top: 50%; bottom: auto } } .toast-top { @layer daisyui.l1.l2 { --toast-y: 0; top: 1rem; bottom: auto } } @media (width>=640px) { .sm\:toast { @layer daisyui.l1.l2.l3 { inset-inline: auto 1rem; translate: var(--toast-x, 0) var(--toast-y, 0); background-color: #0000; flex-direction: column; gap: .5rem; width: max-content; max-width: calc(100vw - 2rem); display: flex; position: fixed; top: auto; bottom: 1rem; &>* { @media (prefers-reduced-motion:no-preference) { animation: .25s ease-out toast } } } } .sm\:toast-start { @layer daisyui.l1.l2 { --toast-x: 0; inset-inline: 1rem auto } } .sm\:toast-center { @layer daisyui.l1.l2 { --toast-x: -50%; inset-inline: 50% } } .sm\:toast-end { @layer daisyui.l1.l2 { --toast-x: 0; inset-inline: auto 1rem } } .sm\:toast-bottom { @layer daisyui.l1.l2 { --toast-y: 0; top: auto; bottom: 1rem } } .sm\:toast-middle { @layer daisyui.l1.l2 { --toast-y: -50%; top: 50%; bottom: auto } } .sm\:toast-top { @layer daisyui.l1.l2 { --toast-y: 0; top: 1rem; bottom: auto } } } @media (width>=768px) { .md\:toast { @layer daisyui.l1.l2.l3 { inset-inline: auto 1rem; translate: var(--toast-x, 0) var(--toast-y, 0); background-color: #0000; flex-direction: column; gap: .5rem; width: max-content; max-width: calc(100vw - 2rem); display: flex; position: fixed; top: auto; bottom: 1rem; &>* { @media (prefers-reduced-motion:no-preference) { animation: .25s ease-out toast } } } } .md\:toast-start { @layer daisyui.l1.l2 { --toast-x: 0; inset-inline: 1rem auto } } .md\:toast-center { @layer daisyui.l1.l2 { --toast-x: -50%; inset-inline: 50% } } .md\:toast-end { @layer daisyui.l1.l2 { --toast-x: 0; inset-inline: auto 1rem } } .md\:toast-bottom { @layer daisyui.l1.l2 { --toast-y: 0; top: auto; bottom: 1rem } } .md\:toast-middle { @layer daisyui.l1.l2 { --toast-y: -50%; top: 50%; bottom: auto } } .md\:toast-top { @layer daisyui.l1.l2 { --toast-y: 0; top: 1rem; bottom: auto } } } @media (width>=1024px) { .lg\:toast { @layer daisyui.l1.l2.l3 { inset-inline: auto 1rem; translate: var(--toast-x, 0) var(--toast-y, 0); background-color: #0000; flex-direction: column; gap: .5rem; width: max-content; max-width: calc(100vw - 2rem); display: flex; position: fixed; top: auto; bottom: 1rem; &>* { @media (prefers-reduced-motion:no-preference) { animation: .25s ease-out toast } } } } .lg\:toast-start { @layer daisyui.l1.l2 { --toast-x: 0; inset-inline: 1rem auto } } .lg\:toast-center { @layer daisyui.l1.l2 { --toast-x: -50%; inset-inline: 50% } } .lg\:toast-end { @layer daisyui.l1.l2 { --toast-x: 0; inset-inline: auto 1rem } } .lg\:toast-bottom { @layer daisyui.l1.l2 { --toast-y: 0; top: auto; bottom: 1rem } } .lg\:toast-middle { @layer daisyui.l1.l2 { --toast-y: -50%; top: 50%; bottom: auto } } .lg\:toast-top { @layer daisyui.l1.l2 { --toast-y: 0; top: 1rem; bottom: auto } } } @media (width>=1280px) { .xl\:toast { @layer daisyui.l1.l2.l3 { inset-inline: auto 1rem; translate: var(--toast-x, 0) var(--toast-y, 0); background-color: #0000; flex-direction: column; gap: .5rem; width: max-content; max-width: calc(100vw - 2rem); display: flex; position: fixed; top: auto; bottom: 1rem; &>* { @media (prefers-reduced-motion:no-preference) { animation: .25s ease-out toast } } } } .xl\:toast-start { @layer daisyui.l1.l2 { --toast-x: 0; inset-inline: 1rem auto } } .xl\:toast-center { @layer daisyui.l1.l2 { --toast-x: -50%; inset-inline: 50% } } .xl\:toast-end { @layer daisyui.l1.l2 { --toast-x: 0; inset-inline: auto 1rem } } .xl\:toast-bottom { @layer daisyui.l1.l2 { --toast-y: 0; top: auto; bottom: 1rem } } .xl\:toast-middle { @layer daisyui.l1.l2 { --toast-y: -50%; top: 50%; bottom: auto } } .xl\:toast-top { @layer daisyui.l1.l2 { --toast-y: 0; top: 1rem; bottom: auto } } } @media (width>=1536px) { .\32 xl\:toast { @layer daisyui.l1.l2.l3 { inset-inline: auto 1rem; translate: var(--toast-x, 0) var(--toast-y, 0); background-color: #0000; flex-direction: column; gap: .5rem; width: max-content; max-width: calc(100vw - 2rem); display: flex; position: fixed; top: auto; bottom: 1rem; &>* { @media (prefers-reduced-motion:no-preference) { animation: .25s ease-out toast } } } } .\32 xl\:toast-start { @layer daisyui.l1.l2 { --toast-x: 0; inset-inline: 1rem auto } } .\32 xl\:toast-center { @layer daisyui.l1.l2 { --toast-x: -50%; inset-inline: 50% } } .\32 xl\:toast-end { @layer daisyui.l1.l2 { --toast-x: 0; inset-inline: auto 1rem } } .\32 xl\:toast-bottom { @layer daisyui.l1.l2 { --toast-y: 0; top: auto; bottom: 1rem } } .\32 xl\:toast-middle { @layer daisyui.l1.l2 { --toast-y: -50%; top: 50%; bottom: auto } } .\32 xl\:toast-top { @layer daisyui.l1.l2 { --toast-y: 0; top: 1rem; bottom: auto } } } @keyframes toast { 0% { opacity: 0; scale: .9 } to { opacity: 1; scale: 1 } } .range { @layer daisyui.l1.l2.l3 { -webkit-appearance: none; appearance: none; --range-thumb: var(--color-base-100); --range-thumb-size: calc(var(--size-selector, .25rem) * 6); --range-progress: currentColor; --range-fill: 1; --range-p: .25rem; --range-bg: color-mix(in oklab, currentColor 10%, #0000); --range-fill-x: calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)); --range-fill-y: 0; --range-fill-spread: calc(100cqw * var(--range-fill)); cursor: pointer; vertical-align: middle; --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector)); border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); width: clamp(3rem, 20rem, 100%); height: var(--range-thumb-size); background-color: #0000; border: none; overflow: hidden; [dir=rtl] & { --range-dir: -1 } &:focus { outline: none } &:focus-visible { outline-offset: 2px; outline: 2px solid } &::-webkit-slider-runnable-track { background-color: var(--range-bg); border-radius: var(--radius-selector); width: 100%; height: calc(var(--range-thumb-size) * .5) } @media (forced-colors:active) { &::-webkit-slider-runnable-track { border: 1px solid } } &::-webkit-slider-thumb { box-sizing: border-box; border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); background-color: var(--range-thumb); height: var(--range-thumb-size); width: var(--range-thumb-size); border: var(--range-p) solid; -webkit-appearance: none; appearance: none; color: var(--range-progress); 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), 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread); position: relative; inset-block-start: 50%; transform: translateY(-50%) } &::-moz-range-track { background-color: var(--range-bg); border-radius: var(--radius-selector); width: 100%; height: calc(var(--range-thumb-size) * .5) } @media (forced-colors:active) { &::-moz-range-track { border: 1px solid } } &::-moz-range-thumb { box-sizing: border-box; border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); height: var(--range-thumb-size); width: var(--range-thumb-size); border: var(--range-p) solid; color: var(--range-progress); 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), 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread); background-color: currentColor; position: relative } &:disabled { cursor: not-allowed; opacity: .3 } } } .range-primary { @layer daisyui.l1.l2 { color: var(--color-primary); --range-thumb: var(--color-primary-content) } } .range-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary); --range-thumb: var(--color-secondary-content) } } .range-accent { @layer daisyui.l1.l2 { color: var(--color-accent); --range-thumb: var(--color-accent-content) } } .range-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral); --range-thumb: var(--color-neutral-content) } } .range-success { @layer daisyui.l1.l2 { color: var(--color-success); --range-thumb: var(--color-success-content) } } .range-warning { @layer daisyui.l1.l2 { color: var(--color-warning); --range-thumb: var(--color-warning-content) } } .range-info { @layer daisyui.l1.l2 { color: var(--color-info); --range-thumb: var(--color-info-content) } } .range-error { @layer daisyui.l1.l2 { color: var(--color-error); --range-thumb: var(--color-error-content) } } .range-xs { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 4) } } .range-sm { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 5) } } .range-md { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 6) } } .range-lg { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 7) } } .range-xl { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 8) } } .range-vertical { @layer daisyui.l1.l2 { writing-mode: vertical-lr; width: var(--range-thumb-size); --range-fill-x: 0; --range-fill-y: calc(100cqh + var(--range-thumb-size) / 2); --range-fill-spread: calc(100cqh * var(--range-fill)); direction: rtl; height: clamp(3rem, 20rem, 100%); &::-webkit-slider-runnable-track { height: 100%; width: calc(var(--range-thumb-size) * .5) } &::-webkit-slider-thumb { transform: translate(-50%) } &::-moz-range-track { height: 100%; width: calc(var(--range-thumb-size) * .5) } } } @media (width>=640px) { .sm\:range { @layer daisyui.l1.l2.l3 { -webkit-appearance: none; appearance: none; --range-thumb: var(--color-base-100); --range-thumb-size: calc(var(--size-selector, .25rem) * 6); --range-progress: currentColor; --range-fill: 1; --range-p: .25rem; --range-bg: color-mix(in oklab, currentColor 10%, #0000); --range-fill-x: calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)); --range-fill-y: 0; --range-fill-spread: calc(100cqw * var(--range-fill)); cursor: pointer; vertical-align: middle; --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector)); border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); width: clamp(3rem, 20rem, 100%); height: var(--range-thumb-size); background-color: #0000; border: none; overflow: hidden; [dir=rtl] & { --range-dir: -1 } &:focus { outline: none } &:focus-visible { outline-offset: 2px; outline: 2px solid } &::-webkit-slider-runnable-track { background-color: var(--range-bg); border-radius: var(--radius-selector); width: 100%; height: calc(var(--range-thumb-size) * .5) } @media (forced-colors:active) { &::-webkit-slider-runnable-track { border: 1px solid } } &::-webkit-slider-thumb { box-sizing: border-box; border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); background-color: var(--range-thumb); height: var(--range-thumb-size); width: var(--range-thumb-size); border: var(--range-p) solid; -webkit-appearance: none; appearance: none; color: var(--range-progress); 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), 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread); position: relative; inset-block-start: 50%; transform: translateY(-50%) } &::-moz-range-track { background-color: var(--range-bg); border-radius: var(--radius-selector); width: 100%; height: calc(var(--range-thumb-size) * .5) } @media (forced-colors:active) { &::-moz-range-track { border: 1px solid } } &::-moz-range-thumb { box-sizing: border-box; border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); height: var(--range-thumb-size); width: var(--range-thumb-size); border: var(--range-p) solid; color: var(--range-progress); 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), 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread); background-color: currentColor; position: relative } &:disabled { cursor: not-allowed; opacity: .3 } } } .sm\:range-primary { @layer daisyui.l1.l2 { color: var(--color-primary); --range-thumb: var(--color-primary-content) } } .sm\:range-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary); --range-thumb: var(--color-secondary-content) } } .sm\:range-accent { @layer daisyui.l1.l2 { color: var(--color-accent); --range-thumb: var(--color-accent-content) } } .sm\:range-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral); --range-thumb: var(--color-neutral-content) } } .sm\:range-success { @layer daisyui.l1.l2 { color: var(--color-success); --range-thumb: var(--color-success-content) } } .sm\:range-warning { @layer daisyui.l1.l2 { color: var(--color-warning); --range-thumb: var(--color-warning-content) } } .sm\:range-info { @layer daisyui.l1.l2 { color: var(--color-info); --range-thumb: var(--color-info-content) } } .sm\:range-error { @layer daisyui.l1.l2 { color: var(--color-error); --range-thumb: var(--color-error-content) } } .sm\:range-xs { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 4) } } .sm\:range-sm { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 5) } } .sm\:range-md { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 6) } } .sm\:range-lg { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 7) } } .sm\:range-xl { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 8) } } .sm\:range-vertical { @layer daisyui.l1.l2 { writing-mode: vertical-lr; width: var(--range-thumb-size); --range-fill-x: 0; --range-fill-y: calc(100cqh + var(--range-thumb-size) / 2); --range-fill-spread: calc(100cqh * var(--range-fill)); direction: rtl; height: clamp(3rem, 20rem, 100%); &::-webkit-slider-runnable-track { height: 100%; width: calc(var(--range-thumb-size) * .5) } &::-webkit-slider-thumb { transform: translate(-50%) } &::-moz-range-track { height: 100%; width: calc(var(--range-thumb-size) * .5) } } } } @media (width>=768px) { .md\:range { @layer daisyui.l1.l2.l3 { -webkit-appearance: none; appearance: none; --range-thumb: var(--color-base-100); --range-thumb-size: calc(var(--size-selector, .25rem) * 6); --range-progress: currentColor; --range-fill: 1; --range-p: .25rem; --range-bg: color-mix(in oklab, currentColor 10%, #0000); --range-fill-x: calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)); --range-fill-y: 0; --range-fill-spread: calc(100cqw * var(--range-fill)); cursor: pointer; vertical-align: middle; --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector)); border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); width: clamp(3rem, 20rem, 100%); height: var(--range-thumb-size); background-color: #0000; border: none; overflow: hidden; [dir=rtl] & { --range-dir: -1 } &:focus { outline: none } &:focus-visible { outline-offset: 2px; outline: 2px solid } &::-webkit-slider-runnable-track { background-color: var(--range-bg); border-radius: var(--radius-selector); width: 100%; height: calc(var(--range-thumb-size) * .5) } @media (forced-colors:active) { &::-webkit-slider-runnable-track { border: 1px solid } } &::-webkit-slider-thumb { box-sizing: border-box; border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); background-color: var(--range-thumb); height: var(--range-thumb-size); width: var(--range-thumb-size); border: var(--range-p) solid; -webkit-appearance: none; appearance: none; color: var(--range-progress); 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), 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread); position: relative; inset-block-start: 50%; transform: translateY(-50%) } &::-moz-range-track { background-color: var(--range-bg); border-radius: var(--radius-selector); width: 100%; height: calc(var(--range-thumb-size) * .5) } @media (forced-colors:active) { &::-moz-range-track { border: 1px solid } } &::-moz-range-thumb { box-sizing: border-box; border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); height: var(--range-thumb-size); width: var(--range-thumb-size); border: var(--range-p) solid; color: var(--range-progress); 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), 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread); background-color: currentColor; position: relative } &:disabled { cursor: not-allowed; opacity: .3 } } } .md\:range-primary { @layer daisyui.l1.l2 { color: var(--color-primary); --range-thumb: var(--color-primary-content) } } .md\:range-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary); --range-thumb: var(--color-secondary-content) } } .md\:range-accent { @layer daisyui.l1.l2 { color: var(--color-accent); --range-thumb: var(--color-accent-content) } } .md\:range-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral); --range-thumb: var(--color-neutral-content) } } .md\:range-success { @layer daisyui.l1.l2 { color: var(--color-success); --range-thumb: var(--color-success-content) } } .md\:range-warning { @layer daisyui.l1.l2 { color: var(--color-warning); --range-thumb: var(--color-warning-content) } } .md\:range-info { @layer daisyui.l1.l2 { color: var(--color-info); --range-thumb: var(--color-info-content) } } .md\:range-error { @layer daisyui.l1.l2 { color: var(--color-error); --range-thumb: var(--color-error-content) } } .md\:range-xs { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 4) } } .md\:range-sm { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 5) } } .md\:range-md { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 6) } } .md\:range-lg { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 7) } } .md\:range-xl { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 8) } } .md\:range-vertical { @layer daisyui.l1.l2 { writing-mode: vertical-lr; width: var(--range-thumb-size); --range-fill-x: 0; --range-fill-y: calc(100cqh + var(--range-thumb-size) / 2); --range-fill-spread: calc(100cqh * var(--range-fill)); direction: rtl; height: clamp(3rem, 20rem, 100%); &::-webkit-slider-runnable-track { height: 100%; width: calc(var(--range-thumb-size) * .5) } &::-webkit-slider-thumb { transform: translate(-50%) } &::-moz-range-track { height: 100%; width: calc(var(--range-thumb-size) * .5) } } } } @media (width>=1024px) { .lg\:range { @layer daisyui.l1.l2.l3 { -webkit-appearance: none; appearance: none; --range-thumb: var(--color-base-100); --range-thumb-size: calc(var(--size-selector, .25rem) * 6); --range-progress: currentColor; --range-fill: 1; --range-p: .25rem; --range-bg: color-mix(in oklab, currentColor 10%, #0000); --range-fill-x: calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)); --range-fill-y: 0; --range-fill-spread: calc(100cqw * var(--range-fill)); cursor: pointer; vertical-align: middle; --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector)); border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); width: clamp(3rem, 20rem, 100%); height: var(--range-thumb-size); background-color: #0000; border: none; overflow: hidden; [dir=rtl] & { --range-dir: -1 } &:focus { outline: none } &:focus-visible { outline-offset: 2px; outline: 2px solid } &::-webkit-slider-runnable-track { background-color: var(--range-bg); border-radius: var(--radius-selector); width: 100%; height: calc(var(--range-thumb-size) * .5) } @media (forced-colors:active) { &::-webkit-slider-runnable-track { border: 1px solid } } &::-webkit-slider-thumb { box-sizing: border-box; border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); background-color: var(--range-thumb); height: var(--range-thumb-size); width: var(--range-thumb-size); border: var(--range-p) solid; -webkit-appearance: none; appearance: none; color: var(--range-progress); 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), 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread); position: relative; inset-block-start: 50%; transform: translateY(-50%) } &::-moz-range-track { background-color: var(--range-bg); border-radius: var(--radius-selector); width: 100%; height: calc(var(--range-thumb-size) * .5) } @media (forced-colors:active) { &::-moz-range-track { border: 1px solid } } &::-moz-range-thumb { box-sizing: border-box; border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); height: var(--range-thumb-size); width: var(--range-thumb-size); border: var(--range-p) solid; color: var(--range-progress); 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), 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread); background-color: currentColor; position: relative } &:disabled { cursor: not-allowed; opacity: .3 } } } .lg\:range-primary { @layer daisyui.l1.l2 { color: var(--color-primary); --range-thumb: var(--color-primary-content) } } .lg\:range-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary); --range-thumb: var(--color-secondary-content) } } .lg\:range-accent { @layer daisyui.l1.l2 { color: var(--color-accent); --range-thumb: var(--color-accent-content) } } .lg\:range-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral); --range-thumb: var(--color-neutral-content) } } .lg\:range-success { @layer daisyui.l1.l2 { color: var(--color-success); --range-thumb: var(--color-success-content) } } .lg\:range-warning { @layer daisyui.l1.l2 { color: var(--color-warning); --range-thumb: var(--color-warning-content) } } .lg\:range-info { @layer daisyui.l1.l2 { color: var(--color-info); --range-thumb: var(--color-info-content) } } .lg\:range-error { @layer daisyui.l1.l2 { color: var(--color-error); --range-thumb: var(--color-error-content) } } .lg\:range-xs { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 4) } } .lg\:range-sm { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 5) } } .lg\:range-md { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 6) } } .lg\:range-lg { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 7) } } .lg\:range-xl { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 8) } } .lg\:range-vertical { @layer daisyui.l1.l2 { writing-mode: vertical-lr; width: var(--range-thumb-size); --range-fill-x: 0; --range-fill-y: calc(100cqh + var(--range-thumb-size) / 2); --range-fill-spread: calc(100cqh * var(--range-fill)); direction: rtl; height: clamp(3rem, 20rem, 100%); &::-webkit-slider-runnable-track { height: 100%; width: calc(var(--range-thumb-size) * .5) } &::-webkit-slider-thumb { transform: translate(-50%) } &::-moz-range-track { height: 100%; width: calc(var(--range-thumb-size) * .5) } } } } @media (width>=1280px) { .xl\:range { @layer daisyui.l1.l2.l3 { -webkit-appearance: none; appearance: none; --range-thumb: var(--color-base-100); --range-thumb-size: calc(var(--size-selector, .25rem) * 6); --range-progress: currentColor; --range-fill: 1; --range-p: .25rem; --range-bg: color-mix(in oklab, currentColor 10%, #0000); --range-fill-x: calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)); --range-fill-y: 0; --range-fill-spread: calc(100cqw * var(--range-fill)); cursor: pointer; vertical-align: middle; --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector)); border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); width: clamp(3rem, 20rem, 100%); height: var(--range-thumb-size); background-color: #0000; border: none; overflow: hidden; [dir=rtl] & { --range-dir: -1 } &:focus { outline: none } &:focus-visible { outline-offset: 2px; outline: 2px solid } &::-webkit-slider-runnable-track { background-color: var(--range-bg); border-radius: var(--radius-selector); width: 100%; height: calc(var(--range-thumb-size) * .5) } @media (forced-colors:active) { &::-webkit-slider-runnable-track { border: 1px solid } } &::-webkit-slider-thumb { box-sizing: border-box; border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); background-color: var(--range-thumb); height: var(--range-thumb-size); width: var(--range-thumb-size); border: var(--range-p) solid; -webkit-appearance: none; appearance: none; color: var(--range-progress); 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), 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread); position: relative; inset-block-start: 50%; transform: translateY(-50%) } &::-moz-range-track { background-color: var(--range-bg); border-radius: var(--radius-selector); width: 100%; height: calc(var(--range-thumb-size) * .5) } @media (forced-colors:active) { &::-moz-range-track { border: 1px solid } } &::-moz-range-thumb { box-sizing: border-box; border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); height: var(--range-thumb-size); width: var(--range-thumb-size); border: var(--range-p) solid; color: var(--range-progress); 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), 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread); background-color: currentColor; position: relative } &:disabled { cursor: not-allowed; opacity: .3 } } } .xl\:range-primary { @layer daisyui.l1.l2 { color: var(--color-primary); --range-thumb: var(--color-primary-content) } } .xl\:range-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary); --range-thumb: var(--color-secondary-content) } } .xl\:range-accent { @layer daisyui.l1.l2 { color: var(--color-accent); --range-thumb: var(--color-accent-content) } } .xl\:range-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral); --range-thumb: var(--color-neutral-content) } } .xl\:range-success { @layer daisyui.l1.l2 { color: var(--color-success); --range-thumb: var(--color-success-content) } } .xl\:range-warning { @layer daisyui.l1.l2 { color: var(--color-warning); --range-thumb: var(--color-warning-content) } } .xl\:range-info { @layer daisyui.l1.l2 { color: var(--color-info); --range-thumb: var(--color-info-content) } } .xl\:range-error { @layer daisyui.l1.l2 { color: var(--color-error); --range-thumb: var(--color-error-content) } } .xl\:range-xs { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 4) } } .xl\:range-sm { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 5) } } .xl\:range-md { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 6) } } .xl\:range-lg { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 7) } } .xl\:range-xl { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 8) } } .xl\:range-vertical { @layer daisyui.l1.l2 { writing-mode: vertical-lr; width: var(--range-thumb-size); --range-fill-x: 0; --range-fill-y: calc(100cqh + var(--range-thumb-size) / 2); --range-fill-spread: calc(100cqh * var(--range-fill)); direction: rtl; height: clamp(3rem, 20rem, 100%); &::-webkit-slider-runnable-track { height: 100%; width: calc(var(--range-thumb-size) * .5) } &::-webkit-slider-thumb { transform: translate(-50%) } &::-moz-range-track { height: 100%; width: calc(var(--range-thumb-size) * .5) } } } } @media (width>=1536px) { .\32 xl\:range { @layer daisyui.l1.l2.l3 { -webkit-appearance: none; appearance: none; --range-thumb: var(--color-base-100); --range-thumb-size: calc(var(--size-selector, .25rem) * 6); --range-progress: currentColor; --range-fill: 1; --range-p: .25rem; --range-bg: color-mix(in oklab, currentColor 10%, #0000); --range-fill-x: calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)); --range-fill-y: 0; --range-fill-spread: calc(100cqw * var(--range-fill)); cursor: pointer; vertical-align: middle; --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector)); border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); width: clamp(3rem, 20rem, 100%); height: var(--range-thumb-size); background-color: #0000; border: none; overflow: hidden; [dir=rtl] & { --range-dir: -1 } &:focus { outline: none } &:focus-visible { outline-offset: 2px; outline: 2px solid } &::-webkit-slider-runnable-track { background-color: var(--range-bg); border-radius: var(--radius-selector); width: 100%; height: calc(var(--range-thumb-size) * .5) } @media (forced-colors:active) { &::-webkit-slider-runnable-track { border: 1px solid } } &::-webkit-slider-thumb { box-sizing: border-box; border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); background-color: var(--range-thumb); height: var(--range-thumb-size); width: var(--range-thumb-size); border: var(--range-p) solid; -webkit-appearance: none; appearance: none; color: var(--range-progress); 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), 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread); position: relative; inset-block-start: 50%; transform: translateY(-50%) } &::-moz-range-track { background-color: var(--range-bg); border-radius: var(--radius-selector); width: 100%; height: calc(var(--range-thumb-size) * .5) } @media (forced-colors:active) { &::-moz-range-track { border: 1px solid } } &::-moz-range-thumb { box-sizing: border-box; border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); height: var(--range-thumb-size); width: var(--range-thumb-size); border: var(--range-p) solid; color: var(--range-progress); 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), 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread); background-color: currentColor; position: relative } &:disabled { cursor: not-allowed; opacity: .3 } } } .\32 xl\:range-primary { @layer daisyui.l1.l2 { color: var(--color-primary); --range-thumb: var(--color-primary-content) } } .\32 xl\:range-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary); --range-thumb: var(--color-secondary-content) } } .\32 xl\:range-accent { @layer daisyui.l1.l2 { color: var(--color-accent); --range-thumb: var(--color-accent-content) } } .\32 xl\:range-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral); --range-thumb: var(--color-neutral-content) } } .\32 xl\:range-success { @layer daisyui.l1.l2 { color: var(--color-success); --range-thumb: var(--color-success-content) } } .\32 xl\:range-warning { @layer daisyui.l1.l2 { color: var(--color-warning); --range-thumb: var(--color-warning-content) } } .\32 xl\:range-info { @layer daisyui.l1.l2 { color: var(--color-info); --range-thumb: var(--color-info-content) } } .\32 xl\:range-error { @layer daisyui.l1.l2 { color: var(--color-error); --range-thumb: var(--color-error-content) } } .\32 xl\:range-xs { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 4) } } .\32 xl\:range-sm { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 5) } } .\32 xl\:range-md { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 6) } } .\32 xl\:range-lg { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 7) } } .\32 xl\:range-xl { @layer daisyui.l1.l2 { --range-thumb-size: calc(var(--size-selector, .25rem) * 8) } } .\32 xl\:range-vertical { @layer daisyui.l1.l2 { writing-mode: vertical-lr; width: var(--range-thumb-size); --range-fill-x: 0; --range-fill-y: calc(100cqh + var(--range-thumb-size) / 2); --range-fill-spread: calc(100cqh * var(--range-fill)); direction: rtl; height: clamp(3rem, 20rem, 100%); &::-webkit-slider-runnable-track { height: 100%; width: calc(var(--range-thumb-size) * .5) } &::-webkit-slider-thumb { transform: translate(-50%) } &::-moz-range-track { height: 100%; width: calc(var(--range-thumb-size) * .5) } } } } .stats { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box); grid-auto-flow: column; display: inline-grid; position: relative; overflow-x: auto } } .stat { @layer daisyui.l1.l2.l3 { grid-template-columns: repeat(1, 1fr); column-gap: 1rem; width: 100%; padding-block: 1rem; padding-inline: 1.5rem; display: inline-grid; &:not(:last-child) { border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); border-block-end: none } } } .stat-figure { @layer daisyui.l1.l2.l3 { grid-row: 1/span 3; grid-column-start: 2; place-self: center flex-end } } .stat-title { @layer daisyui.l1.l2.l3 { white-space: nowrap; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); grid-column-start: 1; font-size: .75rem } } .stat-value { @layer daisyui.l1.l2.l3 { white-space: nowrap; grid-column-start: 1; font-size: 2rem; font-weight: 800 } } .stat-desc { @layer daisyui.l1.l2.l3 { white-space: nowrap; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); grid-column-start: 1; font-size: .75rem } } .stat-actions { @layer daisyui.l1.l2.l3 { white-space: nowrap; grid-column-start: 1 } } .stats-horizontal { @layer daisyui.l1.l2 { grid-auto-flow: column; overflow-x: auto; & .stat:not(:last-child) { border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); border-block-end: none } } } .stats-vertical { @layer daisyui.l1.l2 { grid-auto-flow: row; overflow-y: auto; & .stat:not(:last-child) { border-inline-end: none; border-block-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000) } } } @media (width>=640px) { .sm\:stats { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box); grid-auto-flow: column; display: inline-grid; position: relative; overflow-x: auto } } .sm\:stat { @layer daisyui.l1.l2.l3 { grid-template-columns: repeat(1, 1fr); column-gap: 1rem; width: 100%; padding-block: 1rem; padding-inline: 1.5rem; display: inline-grid; &:not(:last-child) { border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); border-block-end: none } } } .sm\:stat-figure { @layer daisyui.l1.l2.l3 { grid-row: 1/span 3; grid-column-start: 2; place-self: center flex-end } } .sm\:stat-title { @layer daisyui.l1.l2.l3 { white-space: nowrap; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); grid-column-start: 1; font-size: .75rem } } .sm\:stat-value { @layer daisyui.l1.l2.l3 { white-space: nowrap; grid-column-start: 1; font-size: 2rem; font-weight: 800 } } .sm\:stat-desc { @layer daisyui.l1.l2.l3 { white-space: nowrap; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); grid-column-start: 1; font-size: .75rem } } .sm\:stat-actions { @layer daisyui.l1.l2.l3 { white-space: nowrap; grid-column-start: 1 } } .sm\:stats-horizontal { @layer daisyui.l1.l2 { grid-auto-flow: column; overflow-x: auto; & .stat:not(:last-child) { border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); border-block-end: none } } } .sm\:stats-vertical { @layer daisyui.l1.l2 { grid-auto-flow: row; overflow-y: auto; & .stat:not(:last-child) { border-inline-end: none; border-block-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000) } } } } @media (width>=768px) { .md\:stats { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box); grid-auto-flow: column; display: inline-grid; position: relative; overflow-x: auto } } .md\:stat { @layer daisyui.l1.l2.l3 { grid-template-columns: repeat(1, 1fr); column-gap: 1rem; width: 100%; padding-block: 1rem; padding-inline: 1.5rem; display: inline-grid; &:not(:last-child) { border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); border-block-end: none } } } .md\:stat-figure { @layer daisyui.l1.l2.l3 { grid-row: 1/span 3; grid-column-start: 2; place-self: center flex-end } } .md\:stat-title { @layer daisyui.l1.l2.l3 { white-space: nowrap; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); grid-column-start: 1; font-size: .75rem } } .md\:stat-value { @layer daisyui.l1.l2.l3 { white-space: nowrap; grid-column-start: 1; font-size: 2rem; font-weight: 800 } } .md\:stat-desc { @layer daisyui.l1.l2.l3 { white-space: nowrap; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); grid-column-start: 1; font-size: .75rem } } .md\:stat-actions { @layer daisyui.l1.l2.l3 { white-space: nowrap; grid-column-start: 1 } } .md\:stats-horizontal { @layer daisyui.l1.l2 { grid-auto-flow: column; overflow-x: auto; & .stat:not(:last-child) { border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); border-block-end: none } } } .md\:stats-vertical { @layer daisyui.l1.l2 { grid-auto-flow: row; overflow-y: auto; & .stat:not(:last-child) { border-inline-end: none; border-block-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000) } } } } @media (width>=1024px) { .lg\:stats { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box); grid-auto-flow: column; display: inline-grid; position: relative; overflow-x: auto } } .lg\:stat { @layer daisyui.l1.l2.l3 { grid-template-columns: repeat(1, 1fr); column-gap: 1rem; width: 100%; padding-block: 1rem; padding-inline: 1.5rem; display: inline-grid; &:not(:last-child) { border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); border-block-end: none } } } .lg\:stat-figure { @layer daisyui.l1.l2.l3 { grid-row: 1/span 3; grid-column-start: 2; place-self: center flex-end } } .lg\:stat-title { @layer daisyui.l1.l2.l3 { white-space: nowrap; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); grid-column-start: 1; font-size: .75rem } } .lg\:stat-value { @layer daisyui.l1.l2.l3 { white-space: nowrap; grid-column-start: 1; font-size: 2rem; font-weight: 800 } } .lg\:stat-desc { @layer daisyui.l1.l2.l3 { white-space: nowrap; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); grid-column-start: 1; font-size: .75rem } } .lg\:stat-actions { @layer daisyui.l1.l2.l3 { white-space: nowrap; grid-column-start: 1 } } .lg\:stats-horizontal { @layer daisyui.l1.l2 { grid-auto-flow: column; overflow-x: auto; & .stat:not(:last-child) { border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); border-block-end: none } } } .lg\:stats-vertical { @layer daisyui.l1.l2 { grid-auto-flow: row; overflow-y: auto; & .stat:not(:last-child) { border-inline-end: none; border-block-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000) } } } } @media (width>=1280px) { .xl\:stats { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box); grid-auto-flow: column; display: inline-grid; position: relative; overflow-x: auto } } .xl\:stat { @layer daisyui.l1.l2.l3 { grid-template-columns: repeat(1, 1fr); column-gap: 1rem; width: 100%; padding-block: 1rem; padding-inline: 1.5rem; display: inline-grid; &:not(:last-child) { border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); border-block-end: none } } } .xl\:stat-figure { @layer daisyui.l1.l2.l3 { grid-row: 1/span 3; grid-column-start: 2; place-self: center flex-end } } .xl\:stat-title { @layer daisyui.l1.l2.l3 { white-space: nowrap; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); grid-column-start: 1; font-size: .75rem } } .xl\:stat-value { @layer daisyui.l1.l2.l3 { white-space: nowrap; grid-column-start: 1; font-size: 2rem; font-weight: 800 } } .xl\:stat-desc { @layer daisyui.l1.l2.l3 { white-space: nowrap; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); grid-column-start: 1; font-size: .75rem } } .xl\:stat-actions { @layer daisyui.l1.l2.l3 { white-space: nowrap; grid-column-start: 1 } } .xl\:stats-horizontal { @layer daisyui.l1.l2 { grid-auto-flow: column; overflow-x: auto; & .stat:not(:last-child) { border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); border-block-end: none } } } .xl\:stats-vertical { @layer daisyui.l1.l2 { grid-auto-flow: row; overflow-y: auto; & .stat:not(:last-child) { border-inline-end: none; border-block-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000) } } } } @media (width>=1536px) { .\32 xl\:stats { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box); grid-auto-flow: column; display: inline-grid; position: relative; overflow-x: auto } } .\32 xl\:stat { @layer daisyui.l1.l2.l3 { grid-template-columns: repeat(1, 1fr); column-gap: 1rem; width: 100%; padding-block: 1rem; padding-inline: 1.5rem; display: inline-grid; &:not(:last-child) { border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); border-block-end: none } } } .\32 xl\:stat-figure { @layer daisyui.l1.l2.l3 { grid-row: 1/span 3; grid-column-start: 2; place-self: center flex-end } } .\32 xl\:stat-title { @layer daisyui.l1.l2.l3 { white-space: nowrap; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); grid-column-start: 1; font-size: .75rem } } .\32 xl\:stat-value { @layer daisyui.l1.l2.l3 { white-space: nowrap; grid-column-start: 1; font-size: 2rem; font-weight: 800 } } .\32 xl\:stat-desc { @layer daisyui.l1.l2.l3 { white-space: nowrap; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); grid-column-start: 1; font-size: .75rem } } .\32 xl\:stat-actions { @layer daisyui.l1.l2.l3 { white-space: nowrap; grid-column-start: 1 } } .\32 xl\:stats-horizontal { @layer daisyui.l1.l2 { grid-auto-flow: column; overflow-x: auto; & .stat:not(:last-child) { border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); border-block-end: none } } } .\32 xl\:stats-vertical { @layer daisyui.l1.l2 { grid-auto-flow: row; overflow-y: auto; & .stat:not(:last-child) { border-inline-end: none; border-block-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000) } } } } .tabs { @layer daisyui.l1.l2.l3 { --tabs-height: auto; --tabs-direction: row; --tab-height: calc(var(--size-field, .25rem) * 10); height: var(--tabs-height); flex-wrap: wrap; flex-direction: var(--tabs-direction); display: flex } } .tab { @layer daisyui.l1.l2.l3 { &:is(.tabs>.tab) { cursor: pointer; appearance: none; text-align: center; -webkit-user-select: none; user-select: none; flex-wrap: wrap; justify-content: center; align-items: center; display: inline-flex; position: relative; &:hover { @media (hover:hover) { color: var(--color-base-content) } } --tab-p:.75rem; --tab-bg:var(--color-base-100); --tab-border-color:var(--color-base-300); --tab-radius-ss:0; --tab-radius-se:0; --tab-radius-es:0; --tab-radius-ee:0; --tab-order:0; --tab-radius-min:calc(.75rem - var(--border)); --tab-radius-limit:min(var(--radius-field), var(--tab-radius-min)); --tab-radius-grad:#0000 calc(69% - var(--border)), var(--tab-border-color) calc(69% - var(--border) + .25px), var(--tab-border-color) 69%, var(--tab-bg) calc(69% + .25px); order:var(--tab-order); height:var(--tab-height); padding-inline:var(--tab-p); border-color:#0000; font-size:.875rem; &:is(input[type=radio]) { min-width: fit-content; &:after { --tw-content: attr(aria-label); content: var(--tw-content) } } &:is(label) { position: relative; & input { cursor: pointer; appearance: none; opacity: 0; position: absolute; inset: 0 } } &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content { display: block } } &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent) } &:not(input):empty { cursor: default; flex-grow: 1 } &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:focus-visible, &:is(label:has(:checked:focus-visible)) { outline-offset: -5px; outline: 2px solid } &[disabled] { pointer-events: none; opacity: .4 } } } } .tab-content { @layer daisyui.l1.l2.l3 { --tabcontent-radius-ss: var(--radius-box); --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box); --tabcontent-order: 1; width: 100%; height: calc(100% - var(--tab-height) + var(--border)); margin: var(--tabcontent-margin); order: 1; order: var(--tabcontent-order); border-color: #0000; border-width: var(--border); border-start-start-radius: var(--tabcontent-radius-ss); border-start-end-radius: var(--tabcontent-radius-se); border-end-end-radius: var(--tabcontent-radius-ee); border-end-start-radius: var(--tabcontent-radius-es); display: none } } .tab-disabled { @layer daisyui.l1.l2 { pointer-events: none; opacity: .4 } } .tabs-border { @layer daisyui.l1.l2 { &>.tab { --tab-border-color: #0000 #0000 var(--tab-border-color) #0000; border-radius: var(--radius-field); position: relative; &:before { content: ""; background-color: var(--tab-border-color); width: calc(100% - var(--tab-p) * 2); border-radius: var(--radius-field); height: 3px; bottom: 0; left: var(--tab-p); transition: background-color .2s; position: absolute } &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked), &:is(label:has(:checked)) { &:before { --tab-border-color: currentColor; border-top: 3px solid } } } } } .tabs-lift { @layer daisyui.l1.l2 { --tabs-height: auto; --tabs-direction: row; &>.tab { --tab-border: 0 0 var(--border) 0; --tab-radius-ss: var(--tab-radius-limit); --tab-radius-se: var(--tab-radius-limit); --tab-radius-es: 0; --tab-radius-ee: 0; --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p); --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000; --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; border-width: var(--tab-border); padding: var(--tab-paddings); border-color: var(--tab-border-colors); border-start-start-radius: var(--tab-radius-ss); border-start-end-radius: var(--tab-radius-se); border-end-end-radius: var(--tab-radius-ee); border-end-start-radius: var(--tab-radius-es); &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked, label:has(:checked)) { --tab-border: var(--border) var(--border) 0 var(--border); --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color); --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border) calc(var(--tab-p) - var(--border)); --tab-inset: auto auto 0 auto; --radius-start: radial-gradient(circle at top left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at top right, var(--tab-radius-grad)); background-color: var(--tab-bg); &:before { z-index: 1; content: ""; width: var(--tab-corner-width); height: var(--tab-corner-height); background-position: var(--tab-corner-position); background-image: var(--radius-start), var(--radius-end); background-size: var(--tab-radius-limit) var(--tab-radius-limit); inset: var(--tab-inset); background-repeat: no-repeat; display: block; position: absolute } &:first-child:before { --radius-start: none } [dir=rtl] &:first-child:before { transform: rotateY(180deg) } &:last-child:before { --radius-end: none } [dir=rtl] &:last-child:before { transform: rotateY(180deg) } } } &:has(>.tab-content) { &>.tab:first-child { &:not(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color) } } } &>.tab-content { --tabcontent-margin: calc(-1 * var(--border)) 0 0 0; --tabcontent-radius-ss: 0; --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box) } & :checked, & label:has(:checked), & :is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content { &:first-child, &:nth-child(n+3) { --tabcontent-radius-ss: var(--radius-box) } } } } } .tabs-top { @layer daisyui.l1.l2 { --tabs-height: auto; --tabs-direction: row; &>.tab { --tab-order: 0; --tab-border: 0 0 var(--border) 0; --tab-radius-ss: var(--tab-radius-limit); --tab-radius-se: var(--tab-radius-limit); --tab-radius-es: 0; --tab-radius-ee: 0; --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p); --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000; --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked), &:is(label:has(:checked)) { --tab-border: var(--border) var(--border) 0 var(--border); --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color); --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border) calc(var(--tab-p) - var(--border)); --tab-inset: auto auto 0 auto; --radius-start: radial-gradient(circle at top left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at top right, var(--tab-radius-grad)) } } &:has(>.tab-content) { &>.tab:first-child { &:not(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color) } } } &>.tab-content { --tabcontent-order: 1; --tabcontent-margin: calc(-1 * var(--border)) 0 0 0; --tabcontent-radius-ss: 0; --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box) } & :checked, & label:has(:checked), & :is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content { &:first-child, &:nth-child(n+3) { --tabcontent-radius-ss: var(--radius-box) } } } } } .tabs-bottom { @layer daisyui.l1.l2 { --tabs-height: auto; --tabs-direction: row; &>.tab { --tab-order: 1; --tab-border: var(--border) 0 0 0; --tab-radius-ss: 0; --tab-radius-se: 0; --tab-radius-es: var(--tab-radius-limit); --tab-radius-ee: var(--tab-radius-limit); --tab-border-colors: var(--tab-border-color) #0000 #0000 #0000; --tab-paddings: 0 var(--tab-p) var(--border) var(--tab-p); --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked), &:is(label:has(:checked)) { --tab-border: 0 var(--border) var(--border) var(--border); --tab-border-colors: #0000 var(--tab-border-color) var(--tab-border-color) var(--tab-border-color); --tab-paddings: var(--border) calc(var(--tab-p) - var(--border)) 0 calc(var(--tab-p) - var(--border)); --tab-inset: 0 auto auto auto; --radius-start: radial-gradient(circle at bottom left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at bottom right, var(--tab-radius-grad)) } } &:has(>.tab-content) { &>.tab:first-child { &:not(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { --tab-border-colors: #0000 var(--tab-border-color) var(--tab-border-color) var(--tab-border-color) } } } &>.tab-content { --tabcontent-order: 0; --tabcontent-margin: 0 0 calc(-1 * var(--border)) 0; --tabcontent-radius-ss: var(--radius-box); --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: 0; --tabcontent-radius-ee: var(--radius-box) } &>:checked, &>:is(label:has(:checked)), &>:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content:not(:nth-child(2)) { --tabcontent-radius-es: var(--radius-box) } } } } .tabs-box { @layer daisyui.l1.l2 { background-color: var(--color-base-200); --tabs-box-radius: calc(3 * var(--radius-field)); border-radius: calc(min(var(--tab-height) / 2, var(--radius-field)) + min(.25rem, var(--tabs-box-radius))); box-shadow: 0 -.5px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 .5px oklch(0% 0 0 / calc(var(--depth) * .05)) inset; padding: .25rem; &>.tab { border-radius: var(--radius-field); border-style: none; &:focus-visible, &:is(label:has(:checked:focus-visible)) { outline-offset: 2px } &:focus-visible { z-index: 1 } } &>:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &>:is(input:checked), &>:is(label:has(:checked)) { background-color: var(--tab-bg, var(--color-base-100)); box-shadow: 0 1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 100%), #0000); @media (forced-colors:active) { border: 1px solid } } &>.tab-content { height: calc(100% - var(--tab-height) + var(--border) - .5rem); border-radius: calc(min(var(--tab-height) / 2, var(--radius-field)) + min(.25rem, var(--tabs-box-radius)) - var(--border)); margin-top: .25rem } } } .tabs-xs { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 6); &>.tab { --tab-p: .375rem; --tab-radius-min: calc(.5rem - var(--border)); font-size: .75rem } } } .tabs-sm { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 8); &>.tab { --tab-p: .5rem; --tab-radius-min: calc(.5rem - var(--border)); font-size: .875rem } } } .tabs-md { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 10); &>.tab { --tab-p: .75rem; --tab-radius-min: calc(.75rem - var(--border)); font-size: .875rem } } } .tabs-lg { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 12); &>.tab { --tab-p: 1rem; --tab-radius-min: calc(1.5rem - var(--border)); font-size: 1.125rem } } } .tabs-xl { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 14); &>.tab { --tab-p: 1.25rem; --tab-radius-min: calc(2rem - var(--border)); font-size: 1.125rem } } } @media (width>=640px) { .sm\:tabs { @layer daisyui.l1.l2.l3 { --tabs-height: auto; --tabs-direction: row; --tab-height: calc(var(--size-field, .25rem) * 10); height: var(--tabs-height); flex-wrap: wrap; flex-direction: var(--tabs-direction); display: flex } } .sm\:tab { @layer daisyui.l1.l2.l3 { &:is(.tabs>.tab) { cursor: pointer; appearance: none; text-align: center; -webkit-user-select: none; user-select: none; flex-wrap: wrap; justify-content: center; align-items: center; display: inline-flex; position: relative; &:hover { @media (hover:hover) { color: var(--color-base-content) } } --tab-p:.75rem; --tab-bg:var(--color-base-100); --tab-border-color:var(--color-base-300); --tab-radius-ss:0; --tab-radius-se:0; --tab-radius-es:0; --tab-radius-ee:0; --tab-order:0; --tab-radius-min:calc(.75rem - var(--border)); --tab-radius-limit:min(var(--radius-field), var(--tab-radius-min)); --tab-radius-grad:#0000 calc(69% - var(--border)), var(--tab-border-color) calc(69% - var(--border) + .25px), var(--tab-border-color) 69%, var(--tab-bg) calc(69% + .25px); order:var(--tab-order); height:var(--tab-height); padding-inline:var(--tab-p); border-color:#0000; font-size:.875rem; &:is(input[type=radio]) { min-width: fit-content; &:after { --tw-content: attr(aria-label); content: var(--tw-content) } } &:is(label) { position: relative; & input { cursor: pointer; appearance: none; opacity: 0; position: absolute; inset: 0 } } &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content { display: block } } &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent) } &:not(input):empty { cursor: default; flex-grow: 1 } &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:focus-visible, &:is(label:has(:checked:focus-visible)) { outline-offset: -5px; outline: 2px solid } &[disabled] { pointer-events: none; opacity: .4 } } } } .sm\:tab-content { @layer daisyui.l1.l2.l3 { --tabcontent-radius-ss: var(--radius-box); --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box); --tabcontent-order: 1; width: 100%; height: calc(100% - var(--tab-height) + var(--border)); margin: var(--tabcontent-margin); order: 1; order: var(--tabcontent-order); border-color: #0000; border-width: var(--border); border-start-start-radius: var(--tabcontent-radius-ss); border-start-end-radius: var(--tabcontent-radius-se); border-end-end-radius: var(--tabcontent-radius-ee); border-end-start-radius: var(--tabcontent-radius-es); display: none } } .sm\:tab-disabled { @layer daisyui.l1.l2 { pointer-events: none; opacity: .4 } } .sm\:tabs-border { @layer daisyui.l1.l2 { &>.tab { --tab-border-color: #0000 #0000 var(--tab-border-color) #0000; border-radius: var(--radius-field); position: relative; &:before { content: ""; background-color: var(--tab-border-color); width: calc(100% - var(--tab-p) * 2); border-radius: var(--radius-field); height: 3px; bottom: 0; left: var(--tab-p); transition: background-color .2s; position: absolute } &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked), &:is(label:has(:checked)) { &:before { --tab-border-color: currentColor; border-top: 3px solid } } } } } .sm\:tabs-lift { @layer daisyui.l1.l2 { --tabs-height: auto; --tabs-direction: row; &>.tab { --tab-border: 0 0 var(--border) 0; --tab-radius-ss: var(--tab-radius-limit); --tab-radius-se: var(--tab-radius-limit); --tab-radius-es: 0; --tab-radius-ee: 0; --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p); --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000; --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; border-width: var(--tab-border); padding: var(--tab-paddings); border-color: var(--tab-border-colors); border-start-start-radius: var(--tab-radius-ss); border-start-end-radius: var(--tab-radius-se); border-end-end-radius: var(--tab-radius-ee); border-end-start-radius: var(--tab-radius-es); &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked, label:has(:checked)) { --tab-border: var(--border) var(--border) 0 var(--border); --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color); --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border) calc(var(--tab-p) - var(--border)); --tab-inset: auto auto 0 auto; --radius-start: radial-gradient(circle at top left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at top right, var(--tab-radius-grad)); background-color: var(--tab-bg); &:before { z-index: 1; content: ""; width: var(--tab-corner-width); height: var(--tab-corner-height); background-position: var(--tab-corner-position); background-image: var(--radius-start), var(--radius-end); background-size: var(--tab-radius-limit) var(--tab-radius-limit); inset: var(--tab-inset); background-repeat: no-repeat; display: block; position: absolute } &:first-child:before { --radius-start: none } [dir=rtl] &:first-child:before { transform: rotateY(180deg) } &:last-child:before { --radius-end: none } [dir=rtl] &:last-child:before { transform: rotateY(180deg) } } } &:has(>.tab-content) { &>.tab:first-child { &:not(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color) } } } &>.tab-content { --tabcontent-margin: calc(-1 * var(--border)) 0 0 0; --tabcontent-radius-ss: 0; --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box) } & :checked, & label:has(:checked), & :is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content { &:first-child, &:nth-child(n+3) { --tabcontent-radius-ss: var(--radius-box) } } } } } .sm\:tabs-top { @layer daisyui.l1.l2 { --tabs-height: auto; --tabs-direction: row; &>.tab { --tab-order: 0; --tab-border: 0 0 var(--border) 0; --tab-radius-ss: var(--tab-radius-limit); --tab-radius-se: var(--tab-radius-limit); --tab-radius-es: 0; --tab-radius-ee: 0; --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p); --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000; --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked), &:is(label:has(:checked)) { --tab-border: var(--border) var(--border) 0 var(--border); --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color); --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border) calc(var(--tab-p) - var(--border)); --tab-inset: auto auto 0 auto; --radius-start: radial-gradient(circle at top left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at top right, var(--tab-radius-grad)) } } &:has(>.tab-content) { &>.tab:first-child { &:not(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color) } } } &>.tab-content { --tabcontent-order: 1; --tabcontent-margin: calc(-1 * var(--border)) 0 0 0; --tabcontent-radius-ss: 0; --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box) } & :checked, & label:has(:checked), & :is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content { &:first-child, &:nth-child(n+3) { --tabcontent-radius-ss: var(--radius-box) } } } } } .sm\:tabs-bottom { @layer daisyui.l1.l2 { --tabs-height: auto; --tabs-direction: row; &>.tab { --tab-order: 1; --tab-border: var(--border) 0 0 0; --tab-radius-ss: 0; --tab-radius-se: 0; --tab-radius-es: var(--tab-radius-limit); --tab-radius-ee: var(--tab-radius-limit); --tab-border-colors: var(--tab-border-color) #0000 #0000 #0000; --tab-paddings: 0 var(--tab-p) var(--border) var(--tab-p); --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked), &:is(label:has(:checked)) { --tab-border: 0 var(--border) var(--border) var(--border); --tab-border-colors: #0000 var(--tab-border-color) var(--tab-border-color) var(--tab-border-color); --tab-paddings: var(--border) calc(var(--tab-p) - var(--border)) 0 calc(var(--tab-p) - var(--border)); --tab-inset: 0 auto auto auto; --radius-start: radial-gradient(circle at bottom left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at bottom right, var(--tab-radius-grad)) } } &:has(>.tab-content) { &>.tab:first-child { &:not(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { --tab-border-colors: #0000 var(--tab-border-color) var(--tab-border-color) var(--tab-border-color) } } } &>.tab-content { --tabcontent-order: 0; --tabcontent-margin: 0 0 calc(-1 * var(--border)) 0; --tabcontent-radius-ss: var(--radius-box); --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: 0; --tabcontent-radius-ee: var(--radius-box) } &>:checked, &>:is(label:has(:checked)), &>:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content:not(:nth-child(2)) { --tabcontent-radius-es: var(--radius-box) } } } } .sm\:tabs-box { @layer daisyui.l1.l2 { background-color: var(--color-base-200); --tabs-box-radius: calc(3 * var(--radius-field)); border-radius: calc(min(var(--tab-height) / 2, var(--radius-field)) + min(.25rem, var(--tabs-box-radius))); box-shadow: 0 -.5px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 .5px oklch(0% 0 0 / calc(var(--depth) * .05)) inset; padding: .25rem; &>.tab { border-radius: var(--radius-field); border-style: none; &:focus-visible, &:is(label:has(:checked:focus-visible)) { outline-offset: 2px } &:focus-visible { z-index: 1 } } &>:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &>:is(input:checked), &>:is(label:has(:checked)) { background-color: var(--tab-bg, var(--color-base-100)); box-shadow: 0 1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 100%), #0000); @media (forced-colors:active) { border: 1px solid } } &>.tab-content { height: calc(100% - var(--tab-height) + var(--border) - .5rem); border-radius: calc(min(var(--tab-height) / 2, var(--radius-field)) + min(.25rem, var(--tabs-box-radius)) - var(--border)); margin-top: .25rem } } } .sm\:tabs-xs { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 6); &>.tab { --tab-p: .375rem; --tab-radius-min: calc(.5rem - var(--border)); font-size: .75rem } } } .sm\:tabs-sm { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 8); &>.tab { --tab-p: .5rem; --tab-radius-min: calc(.5rem - var(--border)); font-size: .875rem } } } .sm\:tabs-md { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 10); &>.tab { --tab-p: .75rem; --tab-radius-min: calc(.75rem - var(--border)); font-size: .875rem } } } .sm\:tabs-lg { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 12); &>.tab { --tab-p: 1rem; --tab-radius-min: calc(1.5rem - var(--border)); font-size: 1.125rem } } } .sm\:tabs-xl { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 14); &>.tab { --tab-p: 1.25rem; --tab-radius-min: calc(2rem - var(--border)); font-size: 1.125rem } } } } @media (width>=768px) { .md\:tabs { @layer daisyui.l1.l2.l3 { --tabs-height: auto; --tabs-direction: row; --tab-height: calc(var(--size-field, .25rem) * 10); height: var(--tabs-height); flex-wrap: wrap; flex-direction: var(--tabs-direction); display: flex } } .md\:tab { @layer daisyui.l1.l2.l3 { &:is(.tabs>.tab) { cursor: pointer; appearance: none; text-align: center; -webkit-user-select: none; user-select: none; flex-wrap: wrap; justify-content: center; align-items: center; display: inline-flex; position: relative; &:hover { @media (hover:hover) { color: var(--color-base-content) } } --tab-p:.75rem; --tab-bg:var(--color-base-100); --tab-border-color:var(--color-base-300); --tab-radius-ss:0; --tab-radius-se:0; --tab-radius-es:0; --tab-radius-ee:0; --tab-order:0; --tab-radius-min:calc(.75rem - var(--border)); --tab-radius-limit:min(var(--radius-field), var(--tab-radius-min)); --tab-radius-grad:#0000 calc(69% - var(--border)), var(--tab-border-color) calc(69% - var(--border) + .25px), var(--tab-border-color) 69%, var(--tab-bg) calc(69% + .25px); order:var(--tab-order); height:var(--tab-height); padding-inline:var(--tab-p); border-color:#0000; font-size:.875rem; &:is(input[type=radio]) { min-width: fit-content; &:after { --tw-content: attr(aria-label); content: var(--tw-content) } } &:is(label) { position: relative; & input { cursor: pointer; appearance: none; opacity: 0; position: absolute; inset: 0 } } &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content { display: block } } &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent) } &:not(input):empty { cursor: default; flex-grow: 1 } &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:focus-visible, &:is(label:has(:checked:focus-visible)) { outline-offset: -5px; outline: 2px solid } &[disabled] { pointer-events: none; opacity: .4 } } } } .md\:tab-content { @layer daisyui.l1.l2.l3 { --tabcontent-radius-ss: var(--radius-box); --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box); --tabcontent-order: 1; width: 100%; height: calc(100% - var(--tab-height) + var(--border)); margin: var(--tabcontent-margin); order: 1; order: var(--tabcontent-order); border-color: #0000; border-width: var(--border); border-start-start-radius: var(--tabcontent-radius-ss); border-start-end-radius: var(--tabcontent-radius-se); border-end-end-radius: var(--tabcontent-radius-ee); border-end-start-radius: var(--tabcontent-radius-es); display: none } } .md\:tab-disabled { @layer daisyui.l1.l2 { pointer-events: none; opacity: .4 } } .md\:tabs-border { @layer daisyui.l1.l2 { &>.tab { --tab-border-color: #0000 #0000 var(--tab-border-color) #0000; border-radius: var(--radius-field); position: relative; &:before { content: ""; background-color: var(--tab-border-color); width: calc(100% - var(--tab-p) * 2); border-radius: var(--radius-field); height: 3px; bottom: 0; left: var(--tab-p); transition: background-color .2s; position: absolute } &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked), &:is(label:has(:checked)) { &:before { --tab-border-color: currentColor; border-top: 3px solid } } } } } .md\:tabs-lift { @layer daisyui.l1.l2 { --tabs-height: auto; --tabs-direction: row; &>.tab { --tab-border: 0 0 var(--border) 0; --tab-radius-ss: var(--tab-radius-limit); --tab-radius-se: var(--tab-radius-limit); --tab-radius-es: 0; --tab-radius-ee: 0; --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p); --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000; --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; border-width: var(--tab-border); padding: var(--tab-paddings); border-color: var(--tab-border-colors); border-start-start-radius: var(--tab-radius-ss); border-start-end-radius: var(--tab-radius-se); border-end-end-radius: var(--tab-radius-ee); border-end-start-radius: var(--tab-radius-es); &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked, label:has(:checked)) { --tab-border: var(--border) var(--border) 0 var(--border); --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color); --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border) calc(var(--tab-p) - var(--border)); --tab-inset: auto auto 0 auto; --radius-start: radial-gradient(circle at top left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at top right, var(--tab-radius-grad)); background-color: var(--tab-bg); &:before { z-index: 1; content: ""; width: var(--tab-corner-width); height: var(--tab-corner-height); background-position: var(--tab-corner-position); background-image: var(--radius-start), var(--radius-end); background-size: var(--tab-radius-limit) var(--tab-radius-limit); inset: var(--tab-inset); background-repeat: no-repeat; display: block; position: absolute } &:first-child:before { --radius-start: none } [dir=rtl] &:first-child:before { transform: rotateY(180deg) } &:last-child:before { --radius-end: none } [dir=rtl] &:last-child:before { transform: rotateY(180deg) } } } &:has(>.tab-content) { &>.tab:first-child { &:not(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color) } } } &>.tab-content { --tabcontent-margin: calc(-1 * var(--border)) 0 0 0; --tabcontent-radius-ss: 0; --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box) } & :checked, & label:has(:checked), & :is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content { &:first-child, &:nth-child(n+3) { --tabcontent-radius-ss: var(--radius-box) } } } } } .md\:tabs-top { @layer daisyui.l1.l2 { --tabs-height: auto; --tabs-direction: row; &>.tab { --tab-order: 0; --tab-border: 0 0 var(--border) 0; --tab-radius-ss: var(--tab-radius-limit); --tab-radius-se: var(--tab-radius-limit); --tab-radius-es: 0; --tab-radius-ee: 0; --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p); --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000; --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked), &:is(label:has(:checked)) { --tab-border: var(--border) var(--border) 0 var(--border); --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color); --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border) calc(var(--tab-p) - var(--border)); --tab-inset: auto auto 0 auto; --radius-start: radial-gradient(circle at top left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at top right, var(--tab-radius-grad)) } } &:has(>.tab-content) { &>.tab:first-child { &:not(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color) } } } &>.tab-content { --tabcontent-order: 1; --tabcontent-margin: calc(-1 * var(--border)) 0 0 0; --tabcontent-radius-ss: 0; --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box) } & :checked, & label:has(:checked), & :is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content { &:first-child, &:nth-child(n+3) { --tabcontent-radius-ss: var(--radius-box) } } } } } .md\:tabs-bottom { @layer daisyui.l1.l2 { --tabs-height: auto; --tabs-direction: row; &>.tab { --tab-order: 1; --tab-border: var(--border) 0 0 0; --tab-radius-ss: 0; --tab-radius-se: 0; --tab-radius-es: var(--tab-radius-limit); --tab-radius-ee: var(--tab-radius-limit); --tab-border-colors: var(--tab-border-color) #0000 #0000 #0000; --tab-paddings: 0 var(--tab-p) var(--border) var(--tab-p); --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked), &:is(label:has(:checked)) { --tab-border: 0 var(--border) var(--border) var(--border); --tab-border-colors: #0000 var(--tab-border-color) var(--tab-border-color) var(--tab-border-color); --tab-paddings: var(--border) calc(var(--tab-p) - var(--border)) 0 calc(var(--tab-p) - var(--border)); --tab-inset: 0 auto auto auto; --radius-start: radial-gradient(circle at bottom left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at bottom right, var(--tab-radius-grad)) } } &:has(>.tab-content) { &>.tab:first-child { &:not(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { --tab-border-colors: #0000 var(--tab-border-color) var(--tab-border-color) var(--tab-border-color) } } } &>.tab-content { --tabcontent-order: 0; --tabcontent-margin: 0 0 calc(-1 * var(--border)) 0; --tabcontent-radius-ss: var(--radius-box); --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: 0; --tabcontent-radius-ee: var(--radius-box) } &>:checked, &>:is(label:has(:checked)), &>:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content:not(:nth-child(2)) { --tabcontent-radius-es: var(--radius-box) } } } } .md\:tabs-box { @layer daisyui.l1.l2 { background-color: var(--color-base-200); --tabs-box-radius: calc(3 * var(--radius-field)); border-radius: calc(min(var(--tab-height) / 2, var(--radius-field)) + min(.25rem, var(--tabs-box-radius))); box-shadow: 0 -.5px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 .5px oklch(0% 0 0 / calc(var(--depth) * .05)) inset; padding: .25rem; &>.tab { border-radius: var(--radius-field); border-style: none; &:focus-visible, &:is(label:has(:checked:focus-visible)) { outline-offset: 2px } &:focus-visible { z-index: 1 } } &>:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &>:is(input:checked), &>:is(label:has(:checked)) { background-color: var(--tab-bg, var(--color-base-100)); box-shadow: 0 1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 100%), #0000); @media (forced-colors:active) { border: 1px solid } } &>.tab-content { height: calc(100% - var(--tab-height) + var(--border) - .5rem); border-radius: calc(min(var(--tab-height) / 2, var(--radius-field)) + min(.25rem, var(--tabs-box-radius)) - var(--border)); margin-top: .25rem } } } .md\:tabs-xs { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 6); &>.tab { --tab-p: .375rem; --tab-radius-min: calc(.5rem - var(--border)); font-size: .75rem } } } .md\:tabs-sm { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 8); &>.tab { --tab-p: .5rem; --tab-radius-min: calc(.5rem - var(--border)); font-size: .875rem } } } .md\:tabs-md { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 10); &>.tab { --tab-p: .75rem; --tab-radius-min: calc(.75rem - var(--border)); font-size: .875rem } } } .md\:tabs-lg { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 12); &>.tab { --tab-p: 1rem; --tab-radius-min: calc(1.5rem - var(--border)); font-size: 1.125rem } } } .md\:tabs-xl { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 14); &>.tab { --tab-p: 1.25rem; --tab-radius-min: calc(2rem - var(--border)); font-size: 1.125rem } } } } @media (width>=1024px) { .lg\:tabs { @layer daisyui.l1.l2.l3 { --tabs-height: auto; --tabs-direction: row; --tab-height: calc(var(--size-field, .25rem) * 10); height: var(--tabs-height); flex-wrap: wrap; flex-direction: var(--tabs-direction); display: flex } } .lg\:tab { @layer daisyui.l1.l2.l3 { &:is(.tabs>.tab) { cursor: pointer; appearance: none; text-align: center; -webkit-user-select: none; user-select: none; flex-wrap: wrap; justify-content: center; align-items: center; display: inline-flex; position: relative; &:hover { @media (hover:hover) { color: var(--color-base-content) } } --tab-p:.75rem; --tab-bg:var(--color-base-100); --tab-border-color:var(--color-base-300); --tab-radius-ss:0; --tab-radius-se:0; --tab-radius-es:0; --tab-radius-ee:0; --tab-order:0; --tab-radius-min:calc(.75rem - var(--border)); --tab-radius-limit:min(var(--radius-field), var(--tab-radius-min)); --tab-radius-grad:#0000 calc(69% - var(--border)), var(--tab-border-color) calc(69% - var(--border) + .25px), var(--tab-border-color) 69%, var(--tab-bg) calc(69% + .25px); order:var(--tab-order); height:var(--tab-height); padding-inline:var(--tab-p); border-color:#0000; font-size:.875rem; &:is(input[type=radio]) { min-width: fit-content; &:after { --tw-content: attr(aria-label); content: var(--tw-content) } } &:is(label) { position: relative; & input { cursor: pointer; appearance: none; opacity: 0; position: absolute; inset: 0 } } &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content { display: block } } &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent) } &:not(input):empty { cursor: default; flex-grow: 1 } &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:focus-visible, &:is(label:has(:checked:focus-visible)) { outline-offset: -5px; outline: 2px solid } &[disabled] { pointer-events: none; opacity: .4 } } } } .lg\:tab-content { @layer daisyui.l1.l2.l3 { --tabcontent-radius-ss: var(--radius-box); --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box); --tabcontent-order: 1; width: 100%; height: calc(100% - var(--tab-height) + var(--border)); margin: var(--tabcontent-margin); order: 1; order: var(--tabcontent-order); border-color: #0000; border-width: var(--border); border-start-start-radius: var(--tabcontent-radius-ss); border-start-end-radius: var(--tabcontent-radius-se); border-end-end-radius: var(--tabcontent-radius-ee); border-end-start-radius: var(--tabcontent-radius-es); display: none } } .lg\:tab-disabled { @layer daisyui.l1.l2 { pointer-events: none; opacity: .4 } } .lg\:tabs-border { @layer daisyui.l1.l2 { &>.tab { --tab-border-color: #0000 #0000 var(--tab-border-color) #0000; border-radius: var(--radius-field); position: relative; &:before { content: ""; background-color: var(--tab-border-color); width: calc(100% - var(--tab-p) * 2); border-radius: var(--radius-field); height: 3px; bottom: 0; left: var(--tab-p); transition: background-color .2s; position: absolute } &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked), &:is(label:has(:checked)) { &:before { --tab-border-color: currentColor; border-top: 3px solid } } } } } .lg\:tabs-lift { @layer daisyui.l1.l2 { --tabs-height: auto; --tabs-direction: row; &>.tab { --tab-border: 0 0 var(--border) 0; --tab-radius-ss: var(--tab-radius-limit); --tab-radius-se: var(--tab-radius-limit); --tab-radius-es: 0; --tab-radius-ee: 0; --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p); --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000; --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; border-width: var(--tab-border); padding: var(--tab-paddings); border-color: var(--tab-border-colors); border-start-start-radius: var(--tab-radius-ss); border-start-end-radius: var(--tab-radius-se); border-end-end-radius: var(--tab-radius-ee); border-end-start-radius: var(--tab-radius-es); &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked, label:has(:checked)) { --tab-border: var(--border) var(--border) 0 var(--border); --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color); --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border) calc(var(--tab-p) - var(--border)); --tab-inset: auto auto 0 auto; --radius-start: radial-gradient(circle at top left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at top right, var(--tab-radius-grad)); background-color: var(--tab-bg); &:before { z-index: 1; content: ""; width: var(--tab-corner-width); height: var(--tab-corner-height); background-position: var(--tab-corner-position); background-image: var(--radius-start), var(--radius-end); background-size: var(--tab-radius-limit) var(--tab-radius-limit); inset: var(--tab-inset); background-repeat: no-repeat; display: block; position: absolute } &:first-child:before { --radius-start: none } [dir=rtl] &:first-child:before { transform: rotateY(180deg) } &:last-child:before { --radius-end: none } [dir=rtl] &:last-child:before { transform: rotateY(180deg) } } } &:has(>.tab-content) { &>.tab:first-child { &:not(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color) } } } &>.tab-content { --tabcontent-margin: calc(-1 * var(--border)) 0 0 0; --tabcontent-radius-ss: 0; --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box) } & :checked, & label:has(:checked), & :is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content { &:first-child, &:nth-child(n+3) { --tabcontent-radius-ss: var(--radius-box) } } } } } .lg\:tabs-top { @layer daisyui.l1.l2 { --tabs-height: auto; --tabs-direction: row; &>.tab { --tab-order: 0; --tab-border: 0 0 var(--border) 0; --tab-radius-ss: var(--tab-radius-limit); --tab-radius-se: var(--tab-radius-limit); --tab-radius-es: 0; --tab-radius-ee: 0; --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p); --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000; --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked), &:is(label:has(:checked)) { --tab-border: var(--border) var(--border) 0 var(--border); --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color); --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border) calc(var(--tab-p) - var(--border)); --tab-inset: auto auto 0 auto; --radius-start: radial-gradient(circle at top left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at top right, var(--tab-radius-grad)) } } &:has(>.tab-content) { &>.tab:first-child { &:not(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color) } } } &>.tab-content { --tabcontent-order: 1; --tabcontent-margin: calc(-1 * var(--border)) 0 0 0; --tabcontent-radius-ss: 0; --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box) } & :checked, & label:has(:checked), & :is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content { &:first-child, &:nth-child(n+3) { --tabcontent-radius-ss: var(--radius-box) } } } } } .lg\:tabs-bottom { @layer daisyui.l1.l2 { --tabs-height: auto; --tabs-direction: row; &>.tab { --tab-order: 1; --tab-border: var(--border) 0 0 0; --tab-radius-ss: 0; --tab-radius-se: 0; --tab-radius-es: var(--tab-radius-limit); --tab-radius-ee: var(--tab-radius-limit); --tab-border-colors: var(--tab-border-color) #0000 #0000 #0000; --tab-paddings: 0 var(--tab-p) var(--border) var(--tab-p); --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked), &:is(label:has(:checked)) { --tab-border: 0 var(--border) var(--border) var(--border); --tab-border-colors: #0000 var(--tab-border-color) var(--tab-border-color) var(--tab-border-color); --tab-paddings: var(--border) calc(var(--tab-p) - var(--border)) 0 calc(var(--tab-p) - var(--border)); --tab-inset: 0 auto auto auto; --radius-start: radial-gradient(circle at bottom left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at bottom right, var(--tab-radius-grad)) } } &:has(>.tab-content) { &>.tab:first-child { &:not(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { --tab-border-colors: #0000 var(--tab-border-color) var(--tab-border-color) var(--tab-border-color) } } } &>.tab-content { --tabcontent-order: 0; --tabcontent-margin: 0 0 calc(-1 * var(--border)) 0; --tabcontent-radius-ss: var(--radius-box); --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: 0; --tabcontent-radius-ee: var(--radius-box) } &>:checked, &>:is(label:has(:checked)), &>:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content:not(:nth-child(2)) { --tabcontent-radius-es: var(--radius-box) } } } } .lg\:tabs-box { @layer daisyui.l1.l2 { background-color: var(--color-base-200); --tabs-box-radius: calc(3 * var(--radius-field)); border-radius: calc(min(var(--tab-height) / 2, var(--radius-field)) + min(.25rem, var(--tabs-box-radius))); box-shadow: 0 -.5px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 .5px oklch(0% 0 0 / calc(var(--depth) * .05)) inset; padding: .25rem; &>.tab { border-radius: var(--radius-field); border-style: none; &:focus-visible, &:is(label:has(:checked:focus-visible)) { outline-offset: 2px } &:focus-visible { z-index: 1 } } &>:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &>:is(input:checked), &>:is(label:has(:checked)) { background-color: var(--tab-bg, var(--color-base-100)); box-shadow: 0 1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 100%), #0000); @media (forced-colors:active) { border: 1px solid } } &>.tab-content { height: calc(100% - var(--tab-height) + var(--border) - .5rem); border-radius: calc(min(var(--tab-height) / 2, var(--radius-field)) + min(.25rem, var(--tabs-box-radius)) - var(--border)); margin-top: .25rem } } } .lg\:tabs-xs { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 6); &>.tab { --tab-p: .375rem; --tab-radius-min: calc(.5rem - var(--border)); font-size: .75rem } } } .lg\:tabs-sm { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 8); &>.tab { --tab-p: .5rem; --tab-radius-min: calc(.5rem - var(--border)); font-size: .875rem } } } .lg\:tabs-md { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 10); &>.tab { --tab-p: .75rem; --tab-radius-min: calc(.75rem - var(--border)); font-size: .875rem } } } .lg\:tabs-lg { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 12); &>.tab { --tab-p: 1rem; --tab-radius-min: calc(1.5rem - var(--border)); font-size: 1.125rem } } } .lg\:tabs-xl { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 14); &>.tab { --tab-p: 1.25rem; --tab-radius-min: calc(2rem - var(--border)); font-size: 1.125rem } } } } @media (width>=1280px) { .xl\:tabs { @layer daisyui.l1.l2.l3 { --tabs-height: auto; --tabs-direction: row; --tab-height: calc(var(--size-field, .25rem) * 10); height: var(--tabs-height); flex-wrap: wrap; flex-direction: var(--tabs-direction); display: flex } } .xl\:tab { @layer daisyui.l1.l2.l3 { &:is(.tabs>.tab) { cursor: pointer; appearance: none; text-align: center; -webkit-user-select: none; user-select: none; flex-wrap: wrap; justify-content: center; align-items: center; display: inline-flex; position: relative; &:hover { @media (hover:hover) { color: var(--color-base-content) } } --tab-p:.75rem; --tab-bg:var(--color-base-100); --tab-border-color:var(--color-base-300); --tab-radius-ss:0; --tab-radius-se:0; --tab-radius-es:0; --tab-radius-ee:0; --tab-order:0; --tab-radius-min:calc(.75rem - var(--border)); --tab-radius-limit:min(var(--radius-field), var(--tab-radius-min)); --tab-radius-grad:#0000 calc(69% - var(--border)), var(--tab-border-color) calc(69% - var(--border) + .25px), var(--tab-border-color) 69%, var(--tab-bg) calc(69% + .25px); order:var(--tab-order); height:var(--tab-height); padding-inline:var(--tab-p); border-color:#0000; font-size:.875rem; &:is(input[type=radio]) { min-width: fit-content; &:after { --tw-content: attr(aria-label); content: var(--tw-content) } } &:is(label) { position: relative; & input { cursor: pointer; appearance: none; opacity: 0; position: absolute; inset: 0 } } &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content { display: block } } &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent) } &:not(input):empty { cursor: default; flex-grow: 1 } &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:focus-visible, &:is(label:has(:checked:focus-visible)) { outline-offset: -5px; outline: 2px solid } &[disabled] { pointer-events: none; opacity: .4 } } } } .xl\:tab-content { @layer daisyui.l1.l2.l3 { --tabcontent-radius-ss: var(--radius-box); --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box); --tabcontent-order: 1; width: 100%; height: calc(100% - var(--tab-height) + var(--border)); margin: var(--tabcontent-margin); order: 1; order: var(--tabcontent-order); border-color: #0000; border-width: var(--border); border-start-start-radius: var(--tabcontent-radius-ss); border-start-end-radius: var(--tabcontent-radius-se); border-end-end-radius: var(--tabcontent-radius-ee); border-end-start-radius: var(--tabcontent-radius-es); display: none } } .xl\:tab-disabled { @layer daisyui.l1.l2 { pointer-events: none; opacity: .4 } } .xl\:tabs-border { @layer daisyui.l1.l2 { &>.tab { --tab-border-color: #0000 #0000 var(--tab-border-color) #0000; border-radius: var(--radius-field); position: relative; &:before { content: ""; background-color: var(--tab-border-color); width: calc(100% - var(--tab-p) * 2); border-radius: var(--radius-field); height: 3px; bottom: 0; left: var(--tab-p); transition: background-color .2s; position: absolute } &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked), &:is(label:has(:checked)) { &:before { --tab-border-color: currentColor; border-top: 3px solid } } } } } .xl\:tabs-lift { @layer daisyui.l1.l2 { --tabs-height: auto; --tabs-direction: row; &>.tab { --tab-border: 0 0 var(--border) 0; --tab-radius-ss: var(--tab-radius-limit); --tab-radius-se: var(--tab-radius-limit); --tab-radius-es: 0; --tab-radius-ee: 0; --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p); --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000; --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; border-width: var(--tab-border); padding: var(--tab-paddings); border-color: var(--tab-border-colors); border-start-start-radius: var(--tab-radius-ss); border-start-end-radius: var(--tab-radius-se); border-end-end-radius: var(--tab-radius-ee); border-end-start-radius: var(--tab-radius-es); &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked, label:has(:checked)) { --tab-border: var(--border) var(--border) 0 var(--border); --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color); --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border) calc(var(--tab-p) - var(--border)); --tab-inset: auto auto 0 auto; --radius-start: radial-gradient(circle at top left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at top right, var(--tab-radius-grad)); background-color: var(--tab-bg); &:before { z-index: 1; content: ""; width: var(--tab-corner-width); height: var(--tab-corner-height); background-position: var(--tab-corner-position); background-image: var(--radius-start), var(--radius-end); background-size: var(--tab-radius-limit) var(--tab-radius-limit); inset: var(--tab-inset); background-repeat: no-repeat; display: block; position: absolute } &:first-child:before { --radius-start: none } [dir=rtl] &:first-child:before { transform: rotateY(180deg) } &:last-child:before { --radius-end: none } [dir=rtl] &:last-child:before { transform: rotateY(180deg) } } } &:has(>.tab-content) { &>.tab:first-child { &:not(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color) } } } &>.tab-content { --tabcontent-margin: calc(-1 * var(--border)) 0 0 0; --tabcontent-radius-ss: 0; --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box) } & :checked, & label:has(:checked), & :is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content { &:first-child, &:nth-child(n+3) { --tabcontent-radius-ss: var(--radius-box) } } } } } .xl\:tabs-top { @layer daisyui.l1.l2 { --tabs-height: auto; --tabs-direction: row; &>.tab { --tab-order: 0; --tab-border: 0 0 var(--border) 0; --tab-radius-ss: var(--tab-radius-limit); --tab-radius-se: var(--tab-radius-limit); --tab-radius-es: 0; --tab-radius-ee: 0; --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p); --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000; --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked), &:is(label:has(:checked)) { --tab-border: var(--border) var(--border) 0 var(--border); --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color); --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border) calc(var(--tab-p) - var(--border)); --tab-inset: auto auto 0 auto; --radius-start: radial-gradient(circle at top left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at top right, var(--tab-radius-grad)) } } &:has(>.tab-content) { &>.tab:first-child { &:not(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color) } } } &>.tab-content { --tabcontent-order: 1; --tabcontent-margin: calc(-1 * var(--border)) 0 0 0; --tabcontent-radius-ss: 0; --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box) } & :checked, & label:has(:checked), & :is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content { &:first-child, &:nth-child(n+3) { --tabcontent-radius-ss: var(--radius-box) } } } } } .xl\:tabs-bottom { @layer daisyui.l1.l2 { --tabs-height: auto; --tabs-direction: row; &>.tab { --tab-order: 1; --tab-border: var(--border) 0 0 0; --tab-radius-ss: 0; --tab-radius-se: 0; --tab-radius-es: var(--tab-radius-limit); --tab-radius-ee: var(--tab-radius-limit); --tab-border-colors: var(--tab-border-color) #0000 #0000 #0000; --tab-paddings: 0 var(--tab-p) var(--border) var(--tab-p); --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked), &:is(label:has(:checked)) { --tab-border: 0 var(--border) var(--border) var(--border); --tab-border-colors: #0000 var(--tab-border-color) var(--tab-border-color) var(--tab-border-color); --tab-paddings: var(--border) calc(var(--tab-p) - var(--border)) 0 calc(var(--tab-p) - var(--border)); --tab-inset: 0 auto auto auto; --radius-start: radial-gradient(circle at bottom left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at bottom right, var(--tab-radius-grad)) } } &:has(>.tab-content) { &>.tab:first-child { &:not(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { --tab-border-colors: #0000 var(--tab-border-color) var(--tab-border-color) var(--tab-border-color) } } } &>.tab-content { --tabcontent-order: 0; --tabcontent-margin: 0 0 calc(-1 * var(--border)) 0; --tabcontent-radius-ss: var(--radius-box); --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: 0; --tabcontent-radius-ee: var(--radius-box) } &>:checked, &>:is(label:has(:checked)), &>:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content:not(:nth-child(2)) { --tabcontent-radius-es: var(--radius-box) } } } } .xl\:tabs-box { @layer daisyui.l1.l2 { background-color: var(--color-base-200); --tabs-box-radius: calc(3 * var(--radius-field)); border-radius: calc(min(var(--tab-height) / 2, var(--radius-field)) + min(.25rem, var(--tabs-box-radius))); box-shadow: 0 -.5px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 .5px oklch(0% 0 0 / calc(var(--depth) * .05)) inset; padding: .25rem; &>.tab { border-radius: var(--radius-field); border-style: none; &:focus-visible, &:is(label:has(:checked:focus-visible)) { outline-offset: 2px } &:focus-visible { z-index: 1 } } &>:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &>:is(input:checked), &>:is(label:has(:checked)) { background-color: var(--tab-bg, var(--color-base-100)); box-shadow: 0 1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 100%), #0000); @media (forced-colors:active) { border: 1px solid } } &>.tab-content { height: calc(100% - var(--tab-height) + var(--border) - .5rem); border-radius: calc(min(var(--tab-height) / 2, var(--radius-field)) + min(.25rem, var(--tabs-box-radius)) - var(--border)); margin-top: .25rem } } } .xl\:tabs-xs { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 6); &>.tab { --tab-p: .375rem; --tab-radius-min: calc(.5rem - var(--border)); font-size: .75rem } } } .xl\:tabs-sm { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 8); &>.tab { --tab-p: .5rem; --tab-radius-min: calc(.5rem - var(--border)); font-size: .875rem } } } .xl\:tabs-md { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 10); &>.tab { --tab-p: .75rem; --tab-radius-min: calc(.75rem - var(--border)); font-size: .875rem } } } .xl\:tabs-lg { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 12); &>.tab { --tab-p: 1rem; --tab-radius-min: calc(1.5rem - var(--border)); font-size: 1.125rem } } } .xl\:tabs-xl { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 14); &>.tab { --tab-p: 1.25rem; --tab-radius-min: calc(2rem - var(--border)); font-size: 1.125rem } } } } @media (width>=1536px) { .\32 xl\:tabs { @layer daisyui.l1.l2.l3 { --tabs-height: auto; --tabs-direction: row; --tab-height: calc(var(--size-field, .25rem) * 10); height: var(--tabs-height); flex-wrap: wrap; flex-direction: var(--tabs-direction); display: flex } } .\32 xl\:tab { @layer daisyui.l1.l2.l3 { &:is(.tabs>.tab) { cursor: pointer; appearance: none; text-align: center; -webkit-user-select: none; user-select: none; flex-wrap: wrap; justify-content: center; align-items: center; display: inline-flex; position: relative; &:hover { @media (hover:hover) { color: var(--color-base-content) } } --tab-p:.75rem; --tab-bg:var(--color-base-100); --tab-border-color:var(--color-base-300); --tab-radius-ss:0; --tab-radius-se:0; --tab-radius-es:0; --tab-radius-ee:0; --tab-order:0; --tab-radius-min:calc(.75rem - var(--border)); --tab-radius-limit:min(var(--radius-field), var(--tab-radius-min)); --tab-radius-grad:#0000 calc(69% - var(--border)), var(--tab-border-color) calc(69% - var(--border) + .25px), var(--tab-border-color) 69%, var(--tab-bg) calc(69% + .25px); order:var(--tab-order); height:var(--tab-height); padding-inline:var(--tab-p); border-color:#0000; font-size:.875rem; &:is(input[type=radio]) { min-width: fit-content; &:after { --tw-content: attr(aria-label); content: var(--tw-content) } } &:is(label) { position: relative; & input { cursor: pointer; appearance: none; opacity: 0; position: absolute; inset: 0 } } &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content { display: block } } &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent) } &:not(input):empty { cursor: default; flex-grow: 1 } &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:focus-visible, &:is(label:has(:checked:focus-visible)) { outline-offset: -5px; outline: 2px solid } &[disabled] { pointer-events: none; opacity: .4 } } } } .\32 xl\:tab-content { @layer daisyui.l1.l2.l3 { --tabcontent-radius-ss: var(--radius-box); --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box); --tabcontent-order: 1; width: 100%; height: calc(100% - var(--tab-height) + var(--border)); margin: var(--tabcontent-margin); order: 1; order: var(--tabcontent-order); border-color: #0000; border-width: var(--border); border-start-start-radius: var(--tabcontent-radius-ss); border-start-end-radius: var(--tabcontent-radius-se); border-end-end-radius: var(--tabcontent-radius-ee); border-end-start-radius: var(--tabcontent-radius-es); display: none } } .\32 xl\:tab-disabled { @layer daisyui.l1.l2 { pointer-events: none; opacity: .4 } } .\32 xl\:tabs-border { @layer daisyui.l1.l2 { &>.tab { --tab-border-color: #0000 #0000 var(--tab-border-color) #0000; border-radius: var(--radius-field); position: relative; &:before { content: ""; background-color: var(--tab-border-color); width: calc(100% - var(--tab-p) * 2); border-radius: var(--radius-field); height: 3px; bottom: 0; left: var(--tab-p); transition: background-color .2s; position: absolute } &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked), &:is(label:has(:checked)) { &:before { --tab-border-color: currentColor; border-top: 3px solid } } } } } .\32 xl\:tabs-lift { @layer daisyui.l1.l2 { --tabs-height: auto; --tabs-direction: row; &>.tab { --tab-border: 0 0 var(--border) 0; --tab-radius-ss: var(--tab-radius-limit); --tab-radius-se: var(--tab-radius-limit); --tab-radius-es: 0; --tab-radius-ee: 0; --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p); --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000; --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; border-width: var(--tab-border); padding: var(--tab-paddings); border-color: var(--tab-border-colors); border-start-start-radius: var(--tab-radius-ss); border-start-end-radius: var(--tab-radius-se); border-end-end-radius: var(--tab-radius-ee); border-end-start-radius: var(--tab-radius-es); &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked, label:has(:checked)) { --tab-border: var(--border) var(--border) 0 var(--border); --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color); --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border) calc(var(--tab-p) - var(--border)); --tab-inset: auto auto 0 auto; --radius-start: radial-gradient(circle at top left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at top right, var(--tab-radius-grad)); background-color: var(--tab-bg); &:before { z-index: 1; content: ""; width: var(--tab-corner-width); height: var(--tab-corner-height); background-position: var(--tab-corner-position); background-image: var(--radius-start), var(--radius-end); background-size: var(--tab-radius-limit) var(--tab-radius-limit); inset: var(--tab-inset); background-repeat: no-repeat; display: block; position: absolute } &:first-child:before { --radius-start: none } [dir=rtl] &:first-child:before { transform: rotateY(180deg) } &:last-child:before { --radius-end: none } [dir=rtl] &:last-child:before { transform: rotateY(180deg) } } } &:has(>.tab-content) { &>.tab:first-child { &:not(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color) } } } &>.tab-content { --tabcontent-margin: calc(-1 * var(--border)) 0 0 0; --tabcontent-radius-ss: 0; --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box) } & :checked, & label:has(:checked), & :is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content { &:first-child, &:nth-child(n+3) { --tabcontent-radius-ss: var(--radius-box) } } } } } .\32 xl\:tabs-top { @layer daisyui.l1.l2 { --tabs-height: auto; --tabs-direction: row; &>.tab { --tab-order: 0; --tab-border: 0 0 var(--border) 0; --tab-radius-ss: var(--tab-radius-limit); --tab-radius-se: var(--tab-radius-limit); --tab-radius-es: 0; --tab-radius-ee: 0; --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p); --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000; --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked), &:is(label:has(:checked)) { --tab-border: var(--border) var(--border) 0 var(--border); --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color); --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border) calc(var(--tab-p) - var(--border)); --tab-inset: auto auto 0 auto; --radius-start: radial-gradient(circle at top left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at top right, var(--tab-radius-grad)) } } &:has(>.tab-content) { &>.tab:first-child { &:not(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000 var(--tab-border-color) } } } &>.tab-content { --tabcontent-order: 1; --tabcontent-margin: calc(-1 * var(--border)) 0 0 0; --tabcontent-radius-ss: 0; --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: var(--radius-box); --tabcontent-radius-ee: var(--radius-box) } & :checked, & label:has(:checked), & :is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content { &:first-child, &:nth-child(n+3) { --tabcontent-radius-ss: var(--radius-box) } } } } } .\32 xl\:tabs-bottom { @layer daisyui.l1.l2 { --tabs-height: auto; --tabs-direction: row; &>.tab { --tab-order: 1; --tab-border: var(--border) 0 0 0; --tab-radius-ss: 0; --tab-radius-se: 0; --tab-radius-es: var(--tab-radius-limit); --tab-radius-ee: var(--tab-radius-limit); --tab-border-colors: var(--tab-border-color) #0000 #0000 #0000; --tab-paddings: 0 var(--tab-p) var(--border) var(--tab-p); --tab-corner-width: calc(100% + var(--tab-radius-limit) * 2); --tab-corner-height: var(--tab-radius-limit); --tab-corner-position: top left, top right; &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &:is(input:checked), &:is(label:has(:checked)) { --tab-border: 0 var(--border) var(--border) var(--border); --tab-border-colors: #0000 var(--tab-border-color) var(--tab-border-color) var(--tab-border-color); --tab-paddings: var(--border) calc(var(--tab-p) - var(--border)) 0 calc(var(--tab-p) - var(--border)); --tab-inset: 0 auto auto auto; --radius-start: radial-gradient(circle at bottom left, var(--tab-radius-grad)); --radius-end: radial-gradient(circle at bottom right, var(--tab-radius-grad)) } } &:has(>.tab-content) { &>.tab:first-child { &:not(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { --tab-border-colors: #0000 var(--tab-border-color) var(--tab-border-color) var(--tab-border-color) } } } &>.tab-content { --tabcontent-order: 0; --tabcontent-margin: 0 0 calc(-1 * var(--border)) 0; --tabcontent-radius-ss: var(--radius-box); --tabcontent-radius-se: var(--radius-box); --tabcontent-radius-es: 0; --tabcontent-radius-ee: var(--radius-box) } &>:checked, &>:is(label:has(:checked)), &>:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) { &+.tab-content:not(:nth-child(2)) { --tabcontent-radius-es: var(--radius-box) } } } } .\32 xl\:tabs-box { @layer daisyui.l1.l2 { background-color: var(--color-base-200); --tabs-box-radius: calc(3 * var(--radius-field)); border-radius: calc(min(var(--tab-height) / 2, var(--radius-field)) + min(.25rem, var(--tabs-box-radius))); box-shadow: 0 -.5px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 .5px oklch(0% 0 0 / calc(var(--depth) * .05)) inset; padding: .25rem; &>.tab { border-radius: var(--radius-field); border-style: none; &:focus-visible, &:is(label:has(:checked:focus-visible)) { outline-offset: 2px } &:focus-visible { z-index: 1 } } &>:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]):not(.tab-disabled, [disabled]), &>:is(input:checked), &>:is(label:has(:checked)) { background-color: var(--tab-bg, var(--color-base-100)); box-shadow: 0 1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 100%), #0000); @media (forced-colors:active) { border: 1px solid } } &>.tab-content { height: calc(100% - var(--tab-height) + var(--border) - .5rem); border-radius: calc(min(var(--tab-height) / 2, var(--radius-field)) + min(.25rem, var(--tabs-box-radius)) - var(--border)); margin-top: .25rem } } } .\32 xl\:tabs-xs { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 6); &>.tab { --tab-p: .375rem; --tab-radius-min: calc(.5rem - var(--border)); font-size: .75rem } } } .\32 xl\:tabs-sm { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 8); &>.tab { --tab-p: .5rem; --tab-radius-min: calc(.5rem - var(--border)); font-size: .875rem } } } .\32 xl\:tabs-md { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 10); &>.tab { --tab-p: .75rem; --tab-radius-min: calc(.75rem - var(--border)); font-size: .875rem } } } .\32 xl\:tabs-lg { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 12); &>.tab { --tab-p: 1rem; --tab-radius-min: calc(1.5rem - var(--border)); font-size: 1.125rem } } } .\32 xl\:tabs-xl { @layer daisyui.l1.l2 { --tab-height: calc(var(--size-field, .25rem) * 14); &>.tab { --tab-p: 1.25rem; --tab-radius-min: calc(2rem - var(--border)); font-size: 1.125rem } } } } .cally { @layer daisyui.l1.l2.l3 { font-size: .7rem; &::part(container) { user-select: none; padding: .5rem 1rem } & ::part(th) { block-size: auto; font-weight: 400 } &::part(header) { direction: ltr } & ::part(head) { opacity: .5; font-size: .7rem } &::part(button) { border-radius: var(--radius-field); background: 0 0; border: none; padding: .5rem } &::part(button):hover { background: var(--color-base-200) } & ::part(day) { border-radius: var(--radius-field); font-size: .7rem } & ::part(day):hover { &:not(selected, today) { background: var(--color-base-200) } } & ::part(button day today) { background: var(--color-primary); color: var(--color-primary-content) } & ::part(selected) { color: var(--color-base-100); background: var(--color-base-content); border-radius: var(--radius-field) } & ::part(range-inner) { border-radius: 0 } & ::part(range-start) { border-start-end-radius: 0; border-end-end-radius: 0 } & ::part(range-end) { border-start-start-radius: 0; border-end-start-radius: 0 } & ::part(range-start range-end) { border-radius: var(--radius-field) } & calendar-month { width: 100% } } } .react-day-picker { @layer daisyui.l1.l2.l3 { user-select: none; background-color: var(--color-base-100); border-radius: var(--radius-box); border: var(--border) solid var(--color-base-200); font-size: .75rem; display: inline-block; position: relative; overflow: clip; &[dir=rtl] { & .rdp-nav { & .rdp-chevron { transform-origin: 50%; transform: rotate(180deg) } } } & * { box-sizing: border-box } & .rdp-day { text-align: center; width: 2.25rem; height: 2.25rem } & .rdp-day_button { cursor: pointer; font: inherit; color: inherit; border-radius: var(--radius-field); background: 0 0; border: 2px solid #0000; justify-content: center; align-items: center; width: 2.25rem; height: 2.25rem; margin: 0; padding: 0; display: flex; &:disabled { cursor: revert } &:hover { background-color: var(--color-base-200) } &:disabled:hover, &[aria-disabled=true]:hover { cursor: not-allowed; background-color: #0000 } } & .rdp-caption_label { z-index: 1; white-space: nowrap; border: 0; align-items: center; display: inline-flex; position: relative } & .rdp-button_next { border-radius: var(--radius-field); &:hover { background-color: var(--color-base-200) } } & .rdp-button_previous { border-radius: var(--radius-field); &:hover { background-color: var(--color-base-200) } } & .rdp-button_next, & .rdp-button_previous { cursor: pointer; font: inherit; color: inherit; appearance: none; background: 0 0; border: none; justify-content: center; align-items: center; width: 2.25rem; height: 2.25rem; margin: 0; padding: 0; display: inline-flex; position: relative; &:disabled, &[aria-disabled=true] { cursor: revert; opacity: .5 } &:disabled:hover, &[aria-disabled=true]:hover { background-color: #0000 } } & .rdp-chevron { fill: var(--color-base-content); width: 1rem; height: 1rem; display: inline-block } & .rdp-dropdowns { align-items: center; gap: .5rem; display: inline-flex; position: relative } & .rdp-dropdown { z-index: 2; opacity: 0; appearance: none; cursor: inherit; line-height: inherit; border: none; width: 100%; margin: 0; padding: 0; position: absolute; inset-block: 0; inset-inline-start: 0; &:focus-visible { &~.rdp-caption_label { outline: 5px auto highlight; outline: 5px auto -webkit-focus-ring-color } } } & .rdp-dropdown_root { align-items: center; display: inline-flex; position: relative; &[data-disabled=true] { & .rdp-chevron { opacity: .5 } } } & .rdp-month_caption { height: 2.75rem; font-size: .75rem; font-weight: inherit; place-content: center; display: flex } & .rdp-months { flex-wrap: wrap; gap: 2rem; max-width: fit-content; padding: .5rem; display: flex; position: relative } & .rdp-month_grid { border-collapse: collapse } & .rdp-nav { inset-block-start: 0; inset-inline-end: 0; justify-content: space-between; align-items: center; width: 100%; height: 2.75rem; padding-inline: .5rem; display: flex; position: absolute; top: .25rem } & .rdp-weekday { opacity: .6; text-align: center; padding: .5rem 0; font-size: smaller; font-weight: 500 } & .rdp-week_number { opacity: .6; text-align: center; border: none; border-radius: 100%; width: 2.25rem; height: 2.25rem; font-size: small; font-weight: 400 } & .rdp-today:not(.rdp-outside) { & .rdp-day_button { background: var(--color-primary); color: var(--color-primary-content) } } & .rdp-selected { font-weight: inherit; font-size: .75rem; & .rdp-day_button { color: var(--color-base-100); background-color: var(--color-base-content); border-radius: var(--radius-field); border: none; &:hover { background-color: var(--color-base-content) } } } & .rdp-outside { opacity: .75 } & .rdp-disabled { opacity: .5 } & .rdp-hidden { visibility: hidden; color: var(--color-base-content) } & .rdp-range_start { & .rdp-day_button { border-radius: var(--radius-field) 0 0 var(--radius-field) } } & .rdp-range_start .rdp-day_button { background-color: var(--color-base-content); color: var(--color-base-100) } & .rdp-range_middle { background-color: var(--color-base-200) } & .rdp-range_middle .rdp-day_button { border: unset; border-radius: unset; color: inherit; background-color: #0000; &:hover { background-color: #0000 } } & .rdp-range_end { color: var(--color-base-content); & .rdp-day_button { border-radius: 0 var(--radius-field) var(--radius-field) 0 } } & .rdp-range_end .rdp-day_button { background-color: var(--color-base-content); color: var(--color-base-100) } & .rdp-range_start.rdp-range_end { background: revert } & .rdp-focusable { cursor: pointer } & .rdp-footer { border-top: var(--border) solid var(--color-base-200); padding: .5rem } } } .pika-single { @layer daisyui.l1.l2.l3 { &:is(div) { user-select: none; z-index: 999; color: var(--color-base-content); background-color: var(--color-base-100); border-radius: var(--radius-box); border: var(--border) solid var(--color-base-200); padding: .5rem; font-size: .75rem; display: inline-block; position: relative; &:before, &:after { content: ""; display: table } &:after { clear: both } &.is-hidden { display: none } &.is-bound { position: absolute } & .pika-lendar { float: left } & .pika-title { text-align: center; position: relative } & .pika-label { z-index: 999; background-color: var(--color-base-100); margin: 0; padding: 5px 3px; display: inline-block; position: relative; overflow: hidden } & .pika-title { & select { cursor: pointer; z-index: 999; opacity: 0; margin: 0; position: absolute; top: 5px; left: 0 } } & .pika-prev, & .pika-next { cursor: pointer; color: #0000; border-radius: var(--radius-field); border: 0; outline: none; width: 2.25rem; height: 2.25rem; font-size: 1.2em; display: block; position: absolute; top: 0; &:hover { background-color: var(--color-base-200) } &.is-disabled { cursor: default; opacity: .2 } &:before { width: 2.25rem; height: 2.25rem; color: var(--color-base-content); line-height: 2.25; display: inline-block } } & .pika-prev { left: 0; &:before { --tw-content: "‹"; content: var(--tw-content) } } & .pika-next { right: 0; &:before { --tw-content: "›"; content: var(--tw-content) } } & .pika-select { display: inline-block } & .pika-table { border-collapse: collapse; border-spacing: 0; border: 0; width: 100% } & .pika-table { & th, & td { padding: 0 } & th { opacity: .6; text-align: center; width: 2.25rem; height: 2.25rem } } & .pika-button { cursor: pointer; text-align: right; text-align: center; border: 0; outline: none; width: 2.25rem; height: 2.25rem; margin: 0; padding: 5px; display: block } & .pika-week { color: var(--color-base-content) } & .is-today { & .pika-button { background: var(--color-primary); color: var(--color-primary-content) } } & .is-selected, & .has-event { & .pika-button { &, &:hover { color: var(--color-base-100); background-color: var(--color-base-content); border-radius: var(--radius-field) } } } & .has-event { & .pika-button { background: var(--color-primary) } } & .is-disabled, & .is-inrange { & .pika-button { background: var(--color-base-200) } } & .is-startrange { & .pika-button { color: var(--color-base-100); background: var(--color-base-content); border-radius: var(--radius-field) } } & .is-endrange { & .pika-button { color: var(--color-base-100); background: var(--color-base-content); border-radius: var(--radius-field) } } & .is-disabled { & .pika-button { pointer-events: none; cursor: default; color: var(--color-base-content); opacity: .3 } } & .is-outside-current-month { & .pika-button { color: var(--color-base-content); opacity: .3 } } & .is-selection-disabled { pointer-events: none; cursor: default } & .pika-button:hover, & .pika-row.pick-whole-week:hover .pika-button { color: var(--color-base-content); background-color: var(--color-base-200); border-radius: var(--radius-field) } & .pika-table abbr { font-weight: 400; text-decoration: none } } } } .vc { @layer daisyui.l1.l2.l3 { box-sizing: border-box; border-radius: var(--radius-box); border: var(--border) solid var(--color-base-200); background-color: var(--color-base-100); min-width: 286px; color: var(--color-base-content); opacity: 1; user-select: none; flex-direction: column; padding: 1rem; transition-property: opacity; transition-duration: .2s; display: inline-flex; position: relative; &:focus-visible, & button:focus-visible, & [tabindex="0"]:focus-visible { border-radius: var(--radius-field); outline: 1px solid var(--color-primary); outline-offset: -1px } &[data-vc-calendar-hidden] { pointer-events: none; opacity: 0; & * { pointer-events: none !important } } &[data-vc-input] { box-shadow: 0 9px 20px color-mix(in oklab, var(--color-base-content) 10%, transparent); position: absolute; &[data-vc-position=bottom] { margin-top: .25rem } &[data-vc-position=top] { margin-top: -.25rem } } & [data-vc=controls] { pointer-events: none; z-index: 20; box-sizing: content-box; justify-content: space-between; align-items: center; padding: 1.25rem 1rem 0; display: flex; position: absolute; inset-block-start: 0; inset-inline: 0 } & [data-vc-arrow], & .vc-arrow { pointer-events: auto; cursor: pointer; border-radius: var(--radius-field); width: 1.5rem; height: 1.5rem; color: var(--color-base-content); background-color: #0000; border: 0; display: block; position: relative; &:hover { background-color: var(--color-base-200) } &:hover:before { opacity: .6 } &:before { content: ""; background-position: 50%; background-repeat: no-repeat; border: 2px solid; border-width: 0 2px 2px 0; width: .5rem; height: .5rem; position: absolute; inset-block-start: 50%; inset-inline-start: 50% } &[data-vc-arrow=prev]:before { transform: translate(-35%, -50%)rotate(135deg) } &[data-vc-arrow=next]:before { transform: translate(-65%, -50%)rotate(-45deg) } } & [data-vc=grid] { flex-wrap: wrap; flex-grow: 1; gap: 1.75rem; display: flex; &[data-vc-grid=hidden] { & [data-vc=column] { pointer-events: none; opacity: .3 } & [data-vc=column][data-vc-column=month], & [data-vc=column][data-vc-column=year] { pointer-events: auto; opacity: 1 } } } & [data-vc=column] { flex-direction: column; flex-grow: 1; min-width: 240px; display: flex } & [data-vc=header] { align-items: center; margin-bottom: .75rem; display: flex; position: relative } & [data-vc-header=content], & .vc-header__content { color: var(--color-base-content) } & [data-vc-header=content] { white-space: pre-wrap; flex-grow: 1; grid-auto-columns: max-content; grid-auto-flow: column; justify-content: center; align-items: center; padding-inline: 1rem; display: grid } & [data-vc=month], & [data-vc=year], & .vc-month, & .vc-year { color: var(--color-base-content); &:hover { color: color-mix(in oklab, var(--color-base-content) 60%, transparent) } &:disabled { color: color-mix(in oklab, var(--color-base-content) 30%, transparent) } } & [data-vc=month], & [data-vc=year] { cursor: pointer; border-radius: var(--radius-field); background-color: #0000; border: 0; padding: .25rem; font-size: .875rem; font-weight: 600; &:hover { background-color: var(--color-base-200) } &:disabled { pointer-events: none; opacity: .4 } } & [data-vc=wrapper], & [data-vc=content] { flex-grow: 1; display: flex } & [data-vc=content] { flex-direction: column } & [data-vc=months], & [data-vc=years] { flex-grow: 1; align-items: center; gap: 1rem .25rem; display: grid } & [data-vc=months] { grid-template-columns: repeat(4, minmax(0, 1fr)) } & [data-vc=years] { grid-template-columns: repeat(5, minmax(0, 1fr)) } & [data-vc-months-month], & [data-vc-years-year], & .vc-months__month, & .vc-years__year { background-color: var(--color-base-100); color: color-mix(in oklab, var(--color-base-content) 70%, transparent); &:hover { background-color: var(--color-base-200); color: var(--color-base-content) } &:disabled { color: color-mix(in oklab, var(--color-base-content) 30%, transparent); opacity: .8; &:hover { color: color-mix(in oklab, var(--color-base-content) 30%, transparent) } } &[data-vc-months-month-selected], &[data-vc-years-year-selected] { background-color: var(--color-primary); color: var(--color-primary-content); &:hover { background-color: var(--color-primary); color: var(--color-primary-content) } } } & [data-vc-months-month], & [data-vc-years-year] { cursor: pointer; overflow-wrap: anywhere; border-radius: var(--radius-field); text-align: center; border: 0; justify-content: center; align-items: center; height: 2.5rem; padding: .25rem; font-size: .75rem; font-weight: 600; display: flex; &:disabled { pointer-events: none; opacity: .4 } } & [data-vc-week=numbers] { flex-direction: column; display: flex } & [data-vc-week-numbers=title], & .vc-week-numbers__title { color: color-mix(in oklab, var(--color-base-content) 60%, transparent) } & [data-vc-week-numbers=title] { justify-content: center; align-items: center; margin-bottom: .5rem; font-size: .75rem; font-weight: 700; display: flex } & [data-vc-week-numbers=content] { grid-auto-flow: row; place-items: center; row-gap: .25rem; display: grid } & [data-vc-week-number], & .vc-week-number { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); &:hover { color: color-mix(in oklab, var(--color-base-content) 80%, transparent) } } & [data-vc-week-number] { cursor: pointer; background-color: #0000; border: 0; justify-content: center; align-items: center; width: 100%; min-width: 1.875rem; min-height: 1.875rem; margin: 0; padding: 0; font-size: .75rem; font-weight: 600; display: flex } & [data-vc=week] { grid-template-columns: repeat(7, 1fr); justify-items: center; margin-bottom: .5rem; display: grid } & [data-vc-week-day], & .vc-week__day { color: color-mix(in oklab, var(--color-base-content) 60%, transparent) } & [data-vc-week-day] { background-color: #0000; border: 0; justify-content: center; align-items: center; width: 100%; min-width: 1.875rem; margin: 0; padding: 0; font-size: .75rem; font-weight: 400; display: flex } & button[data-vc-week-day], & button.vc-week__day { cursor: pointer; &:hover { color: var(--color-base-content) } } & [data-vc=dates] { pointer-events: none; flex-grow: 1; grid-template-rows: auto; grid-template-columns: 1fr; place-items: center; display: grid; &[data-vc-dates-disabled] [data-vc-date-btn] { cursor: default } } &[data-vc-type=multiple] [data-vc=dates] { flex-grow: 0 } & [data-vc-dates=row] { grid-template-columns: repeat(7, 1fr); place-items: center; width: 100%; display: grid } & [data-vc-date], & .vc-date { &[data-vc-date-month=prev], &[data-vc-date-month=next] { & [data-vc-date-btn], & .vc-date__btn { color: color-mix(in oklab, var(--color-base-content) 40%, transparent) } } &[data-vc-date-disabled] { pointer-events: none; & [data-vc-date-btn], & .vc-date__btn { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 30%, transparent); opacity: .8 } } &:not(:has([data-vc-date-btn])) { pointer-events: none } &[data-vc-date-hover] { & [data-vc-date-btn] { border-radius: 0 } & [data-vc-date-btn], & .vc-date__btn { background-color: var(--color-base-200) } &[data-vc-date-hover=first], &[data-vc-date-hover=last] { & [data-vc-date-btn], & .vc-date__btn { background-color: var(--color-base-300); &:hover { background-color: var(--color-base-300) } } } &[data-vc-date-hover=first] [data-vc-date-btn] { border-start-start-radius: var(--radius-field); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-field) } &[data-vc-date-hover=last] [data-vc-date-btn] { border-start-start-radius: 0; border-start-end-radius: var(--radius-field); border-end-end-radius: var(--radius-field); border-end-start-radius: 0 } &[data-vc-date-hover=first-and-last] [data-vc-date-btn] { border-radius: var(--radius-field) } &[data-vc-date-selected] { &[data-vc-date-hover=first] [data-vc-date-btn] { border-start-start-radius: var(--radius-field); border-end-start-radius: var(--radius-field) } &[data-vc-date-hover=last] [data-vc-date-btn] { border-start-end-radius: var(--radius-field); border-end-end-radius: var(--radius-field) } } &:has(+[data-vc-date-disabled]) [data-vc-date-btn] { border-start-end-radius: var(--radius-field); border-end-end-radius: var(--radius-field) } } &[data-vc-date-selected] { & [data-vc-date-btn], & .vc-date__btn { background-color: var(--color-base-content); color: var(--color-base-100); &:hover { background-color: var(--color-base-content); color: var(--color-base-100) } } &:has(+[data-vc-date-disabled]) [data-vc-date-btn] { border-start-end-radius: var(--radius-field); border-end-end-radius: var(--radius-field) } &[data-vc-date-selected=first] [data-vc-date-btn] { border-start-start-radius: var(--radius-field); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-field) } &[data-vc-date-selected=last] [data-vc-date-btn] { border-start-start-radius: 0; border-start-end-radius: var(--radius-field); border-end-end-radius: var(--radius-field); border-end-start-radius: 0 } &[data-vc-date-selected=first-and-last] [data-vc-date-btn] { border-start-start-radius: var(--radius-field); border-start-end-radius: var(--radius-field); border-end-end-radius: var(--radius-field); border-end-start-radius: var(--radius-field) } &[data-vc-date-selected=middle] { & [data-vc-date-btn] { border-radius: 0 } } &[data-vc-date-month=prev], &[data-vc-date-month=next] { & [data-vc-date-btn], & .vc-date__btn { background-color: var(--color-base-300); color: color-mix(in oklab, var(--color-base-content) 60%, transparent); &:hover { background-color: var(--color-base-300); color: color-mix(in oklab, var(--color-base-content) 60%, transparent) } } } &[data-vc-date-selected=middle][data-vc-date-month=prev], &[data-vc-date-selected=middle][data-vc-date-month=next] { & [data-vc-date-btn], & .vc-date__btn { background-color: var(--color-base-200); color: color-mix(in oklab, var(--color-base-content) 60%, transparent); &:hover { background-color: var(--color-base-200); color: color-mix(in oklab, var(--color-base-content) 60%, transparent) } } } } &[data-vc-date-today] { & [data-vc-date-btn], & .vc-date__btn { background-color: var(--color-primary); color: var(--color-primary-content); font-weight: 700; &:hover { color: var(--color-primary-content) } } &[data-vc-date-month=prev], &[data-vc-date-month=next] { & [data-vc-date-btn], & .vc-date__btn { color: color-mix(in oklab, var(--color-base-content) 50%, transparent) } } } &[data-vc-date-holiday] { & [data-vc-date-btn], & .vc-date__btn { color: var(--color-error); &:hover { background-color: color-mix(in oklab, var(--color-error) 10%, transparent) } } &[data-vc-date-hover] { & [data-vc-date-btn], & .vc-date__btn { background-color: color-mix(in oklab, var(--color-error) 10%, transparent) } &[data-vc-date-hover=first], &[data-vc-date-hover=last] { & [data-vc-date-btn], & .vc-date__btn { background-color: color-mix(in oklab, var(--color-error) 20%, transparent); &:hover { background-color: color-mix(in oklab, var(--color-error) 20%, transparent) } } } } &[data-vc-date-disabled] { & [data-vc-date-btn], & .vc-date__btn { color: color-mix(in oklab, var(--color-base-content) 30%, transparent); opacity: .8 } } &[data-vc-date-today] { & [data-vc-date-btn], & .vc-date__btn { background-color: var(--color-error); color: var(--color-error-content) } &[data-vc-date-disabled] { & [data-vc-date-btn], & .vc-date__btn { color: color-mix(in oklab, var(--color-base-content) 30%, transparent) } } &[data-vc-date-month=prev], &[data-vc-date-month=next] { & [data-vc-date-btn], & .vc-date__btn { color: color-mix(in oklab, var(--color-base-content) 40%, transparent) } } } &[data-vc-date-month=prev], &[data-vc-date-month=next] { & [data-vc-date-btn], & .vc-date__btn { background-color: var(--color-base-100); color: color-mix(in oklab, var(--color-base-content) 40%, transparent); &:hover { background-color: var(--color-base-200); color: color-mix(in oklab, var(--color-base-content) 60%, transparent) } } } &[data-vc-date-hover][data-vc-date-month=prev], &[data-vc-date-hover][data-vc-date-month=next] { & [data-vc-date-btn], & .vc-date__btn { background-color: var(--color-base-200) } } &[data-vc-date-disabled][data-vc-date-month=prev], &[data-vc-date-disabled][data-vc-date-month=next] { & [data-vc-date-btn], & .vc-date__btn { color: color-mix(in oklab, var(--color-base-content) 30%, transparent); opacity: .8 } } &[data-vc-date-selected] { & [data-vc-date-btn], & .vc-date__btn { background-color: var(--color-error); color: var(--color-error-content); &:hover { background-color: var(--color-error); color: var(--color-error-content) } } &[data-vc-date-selected=middle] { & [data-vc-date-btn], & .vc-date__btn { background-color: color-mix(in oklab, var(--color-error) 75%, transparent); color: var(--color-error-content); &:hover { background-color: color-mix(in oklab, var(--color-error) 75%, transparent); color: var(--color-error-content) } } } &[data-vc-date-month=prev], &[data-vc-date-month=next] { & [data-vc-date-btn], & .vc-date__btn { background-color: var(--color-base-300); color: color-mix(in oklab, var(--color-base-content) 60%, transparent); &:hover { background-color: var(--color-base-300); color: color-mix(in oklab, var(--color-base-content) 60%, transparent) } } } &[data-vc-date-selected=middle][data-vc-date-month=prev], &[data-vc-date-selected=middle][data-vc-date-month=next] { & [data-vc-date-btn], & .vc-date__btn { background-color: var(--color-base-200); color: color-mix(in oklab, var(--color-base-content) 60%, transparent); &:hover { background-color: var(--color-base-200); color: color-mix(in oklab, var(--color-base-content) 60%, transparent) } } } } } } & [data-vc-date] { pointer-events: auto; justify-content: center; align-items: center; width: 100%; padding-block: .125rem; display: flex; position: relative; &[data-vc-date-disabled]+[data-vc-date-selected] [data-vc-date-btn], &[data-vc-date-disabled]+[data-vc-date-hover] [data-vc-date-btn] { border-start-start-radius: var(--radius-field); border-end-start-radius: var(--radius-field) } } & [data-vc-date-btn], & .vc-date__btn { background-color: var(--color-base-100); color: var(--color-base-content); &:hover { background-color: var(--color-base-200) } } & [data-vc-date-btn] { cursor: pointer; border-radius: var(--radius-field); border: 0; justify-content: center; align-items: center; width: 100%; min-width: 1.875rem; height: 100%; min-height: 1.875rem; padding: 0; font-size: .75rem; font-weight: 400; transition-property: color, background-color, border-color, opacity, box-shadow, transform; transition-duration: 75ms; display: flex } & [data-vc-date-btn]:focus-visible+[data-vc-date-popup], & [data-vc-date-btn]:hover+[data-vc-date-popup], & [data-vc-date-popup]:focus-visible, & [data-vc-date-popup]:hover { pointer-events: auto; opacity: 1 } & [data-vc-date-popup], & .vc-date__popup { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: 0 3px 15px color-mix(in oklab, var(--color-base-content) 20%, transparent) } & [data-vc-date-popup] { pointer-events: none; z-index: 20; border-radius: var(--radius-field); opacity: 0; min-width: 5rem; max-width: 9rem; padding: .25rem .5rem; font-size: .75rem; font-weight: 400; transition-property: opacity; transition-duration: 75ms; position: absolute; transform: translate(-50%); &:hover { pointer-events: auto; opacity: 1 } } & [data-vc-date-range-tooltip], & .vc-date-range-tooltip { background-color: var(--color-base-200); color: color-mix(in oklab, var(--color-base-content) 70%, transparent); box-shadow: 0 1px 4px color-mix(in oklab, var(--color-base-content) 20%, transparent) } & [data-vc-date-range-tooltip] { pointer-events: none; z-index: 30; border-radius: var(--radius-field); max-width: 9rem; padding: .25rem .5rem; font-size: .75rem; font-weight: 400; position: absolute; transform: translate(-50%, -100%); &[data-vc-date-range-tooltip=hidden] { opacity: 0 } &[data-vc-date-range-tooltip=visible] { opacity: 1 } } & [data-vc=time], & .vc-time { border-color: var(--color-base-200) } & [data-vc=time] { border-style: solid; border-width: var(--border) 0 0; grid-template-columns: auto 1fr; gap: .75rem; margin-top: .75rem; padding-top: .75rem; display: grid } & [data-vc-time=content] { grid-auto-flow: column; align-items: center; display: grid } & [data-vc-time-input=hour], & [data-vc-time-input=minute], & .vc-time__hour, & .vc-time__minute { &:after { color: var(--color-base-content) } } & [data-vc-time-input=hour] { width: 1.75rem; margin-right: .35rem; position: relative; &:after { content: ":"; margin-top: calc(1px - 50%); display: block; position: absolute; inset-block-start: 50%; inset-inline-end: -5px } } & [data-vc-time-input=minute] { width: 1.75rem } & [data-vc-time-input=hour] input, & [data-vc-time-input=minute] input, & .vc-time__hour input, & .vc-time__minute input { background-color: var(--color-base-100); color: var(--color-base-content); &:hover, &[data-vc-input-focus] { background-color: var(--color-base-200) } &:focus-visible { outline-color: var(--color-primary) } &[data-vc-input-focus] { background-color: var(--color-base-200) } } & [data-vc-time-input=hour] input, & [data-vc-time-input=minute] input { box-sizing: border-box; border-radius: var(--radius-field); text-align: center; border: 0; width: 100%; margin: 0; padding: .125rem; font-size: 1.125rem; font-weight: 600; line-height: 1.125rem; display: block; position: relative; &:disabled { cursor: default; &:hover { background-color: #0000 } } &:focus-visible { outline: 1px solid var(--color-primary) } } & [data-vc-time=keeping], & .vc-time__keeping { color: color-mix(in oklab, var(--color-base-content) 70%, transparent); &:hover { background-color: var(--color-base-200); color: var(--color-base-content) } &:focus-visible { outline-color: var(--color-primary) } } & [data-vc-time=keeping] { cursor: pointer; border-radius: var(--radius-field); background-color: #0000; border: 0; width: 22px; margin-top: .25rem; margin-left: 1px; padding: 0; font-size: .69rem; &:disabled { cursor: default; &:hover { background-color: #0000 } } &:focus-visible { outline: 1px solid var(--color-primary) } } & [data-vc-time=ranges] { grid-auto-flow: row; display: grid } & [data-vc-time-range], & .vc-time__range { & input { background-color: var(--color-base-100); &:focus-visible { &::-webkit-slider-thumb, &::-moz-range-thumb { border-color: var(--color-primary) } } &::-webkit-slider-thumb, &::-moz-range-thumb { border-color: var(--color-base-300); background-color: var(--color-base-100) } &::-webkit-slider-runnable-track, &::-moz-range-track { background-color: var(--color-base-300) } } &:hover input { &::-webkit-slider-thumb, &::-moz-range-thumb { border-color: color-mix(in oklab, var(--color-base-content) 40%, transparent) } } &:before, &:after { background-color: var(--color-base-300) } } & [data-vc-time-range] { z-index: 10; font-size: 0; position: relative; &:before { inset-inline-start: 0 } &:after { inset-inline-end: 0 } &:before, &:after { content: ""; pointer-events: none; z-index: 10; width: 1px; height: .5rem; position: absolute; inset-block-start: 50%; transform: translateY(-50%) } & input { cursor: pointer; appearance: none; outline: 0; width: 100%; height: 1.25rem; margin: 0; position: relative; &::-webkit-slider-thumb { appearance: none; margin-top: -.5rem } &::-webkit-slider-thumb, &::-moz-range-thumb { z-index: 20; box-sizing: border-box; cursor: pointer; border: var(--border) solid var(--color-base-300); border-radius: var(--radius-field); width: .75rem; height: 1rem; box-shadow: none; position: relative } &::-webkit-slider-runnable-track, &::-moz-range-track { box-sizing: border-box; cursor: pointer; width: 100%; height: 1px; box-shadow: none; margin-top: 1px } } } } } .input { @layer daisyui.l1.l2.l3 { appearance: none; background-color: var(--color-base-100); vertical-align: middle; white-space: nowrap; --size: calc(var(--size-field, .25rem) * var(--in-size-mul)); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); cursor: text; width: clamp(3rem, 20rem, 100%); height: var(--size); font-size: max(var(--font-size, 0rem), var(--font-size-min)); touch-action: manipulation; border: var(--border) solid var(--input-color, #0000); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-shrink: 1; align-items: center; gap: .5rem; padding-inline: .75rem; display: inline-flex; position: relative; & input { appearance: none; background-color: #0000; border: none; width: 100%; height: 100%; &::placeholder { color: var(--color-base-content); opacity: .5 } &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &::-webkit-calendar-picker-indicator { inset-inline-end: -.15em } } &::-webkit-inner-spin-button { margin-inline-end: -10px } &::-webkit-calendar-picker-indicator { inset-inline-end: .75em } input&, & input { display: inline-flex; position: relative; &[type=url], &[type=email] { text-align: left } &::-webkit-datetime-edit, &::-webkit-date-and-time-value { min-height: 100%; text-align: inherit; align-items: center; display: grid } &::-webkit-inner-spin-button { margin-block: calc(.25rem * var(--spin-my)) } &::-webkit-calendar-picker-indicator { cursor: pointer; width: 1em; height: 1em; position: absolute } &::-webkit-color-swatch-wrapper { padding-block: .25rem } } &:focus, &:focus-within { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate } @media (pointer:coarse) { @supports (-webkit-touch-callout:none) { &:focus, &:focus-within { --font-size: 1rem } } } &:has(>input[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); &:is(input), & :is(input) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent) } box-shadow:none; &::placeholder, & ::placeholder { color: var(--color-base-content); opacity: .2 } } &:has(>input[disabled])>input[disabled] { cursor: not-allowed } } } .input-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; &:focus, &:focus-within { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } } } .input-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .input-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .input-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .input-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .input-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .input-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .input-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .input-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-error) } } } .input-xs { @layer daisyui.l1.l2 { --in-size-mul: 6; --font-size-min: .6875rem; --spin-my: -1; .floating-label:has(&) { --top-mul: 3; --font-size: .6875rem } } } .input-sm { @layer daisyui.l1.l2 { --in-size-mul: 8; --font-size-min: .75rem; --spin-my: -2; .floating-label:has(&) { --top-mul: 4; --font-size: .75rem } } } .input, .input-md { @layer daisyui.l1.l2 { --in-size-mul: 10; --font-size-min: .875rem; --spin-my: -3; .floating-label:has(&) { --top-mul: 5; --font-size: .875rem } } } .input-lg { @layer daisyui.l1.l2 { --in-size-mul: 12; --font-size-min: 1.125rem; --spin-my: -3; .floating-label:has(&) { --top-mul: 6; --font-size: 1.125rem } } } .input-xl { @layer daisyui.l1.l2 { --in-size-mul: 14; --font-size-min: 1.375rem; --spin-my: -4; .floating-label:has(&) { --top-mul: 7; --font-size: 1.375rem } } } @media (width>=640px) { .sm\:input { @layer daisyui.l1.l2.l3 { appearance: none; background-color: var(--color-base-100); vertical-align: middle; white-space: nowrap; --size: calc(var(--size-field, .25rem) * var(--in-size-mul)); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); cursor: text; width: clamp(3rem, 20rem, 100%); height: var(--size); font-size: max(var(--font-size, 0rem), var(--font-size-min)); touch-action: manipulation; border: var(--border) solid var(--input-color, #0000); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-shrink: 1; align-items: center; gap: .5rem; padding-inline: .75rem; display: inline-flex; position: relative; & input { appearance: none; background-color: #0000; border: none; width: 100%; height: 100%; &::placeholder { color: var(--color-base-content); opacity: .5 } &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &::-webkit-calendar-picker-indicator { inset-inline-end: -.15em } } &::-webkit-inner-spin-button { margin-inline-end: -10px } &::-webkit-calendar-picker-indicator { inset-inline-end: .75em } input&, & input { display: inline-flex; position: relative; &[type=url], &[type=email] { text-align: left } &::-webkit-datetime-edit, &::-webkit-date-and-time-value { min-height: 100%; text-align: inherit; align-items: center; display: grid } &::-webkit-inner-spin-button { margin-block: calc(.25rem * var(--spin-my)) } &::-webkit-calendar-picker-indicator { cursor: pointer; width: 1em; height: 1em; position: absolute } &::-webkit-color-swatch-wrapper { padding-block: .25rem } } &:focus, &:focus-within { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate } @media (pointer:coarse) { @supports (-webkit-touch-callout:none) { &:focus, &:focus-within { --font-size: 1rem } } } &:has(>input[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); &:is(input), & :is(input) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent) } box-shadow:none; &::placeholder, & ::placeholder { color: var(--color-base-content); opacity: .2 } } &:has(>input[disabled])>input[disabled] { cursor: not-allowed } } } .sm\:input-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; &:focus, &:focus-within { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } } } .sm\:input-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .sm\:input-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .sm\:input-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .sm\:input-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .sm\:input-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .sm\:input-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .sm\:input-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .sm\:input-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-error) } } } .sm\:input-xs { @layer daisyui.l1.l2 { --in-size-mul: 6; --font-size-min: .6875rem; --spin-my: -1; .floating-label:has(&) { --top-mul: 3; --font-size: .6875rem } } } .sm\:input-sm { @layer daisyui.l1.l2 { --in-size-mul: 8; --font-size-min: .75rem; --spin-my: -2; .floating-label:has(&) { --top-mul: 4; --font-size: .75rem } } } .sm\:input, .sm\:input-md { @layer daisyui.l1.l2 { --in-size-mul: 10; --font-size-min: .875rem; --spin-my: -3; .floating-label:has(&) { --top-mul: 5; --font-size: .875rem } } } .sm\:input-lg { @layer daisyui.l1.l2 { --in-size-mul: 12; --font-size-min: 1.125rem; --spin-my: -3; .floating-label:has(&) { --top-mul: 6; --font-size: 1.125rem } } } .sm\:input-xl { @layer daisyui.l1.l2 { --in-size-mul: 14; --font-size-min: 1.375rem; --spin-my: -4; .floating-label:has(&) { --top-mul: 7; --font-size: 1.375rem } } } } @media (width>=768px) { .md\:input { @layer daisyui.l1.l2.l3 { appearance: none; background-color: var(--color-base-100); vertical-align: middle; white-space: nowrap; --size: calc(var(--size-field, .25rem) * var(--in-size-mul)); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); cursor: text; width: clamp(3rem, 20rem, 100%); height: var(--size); font-size: max(var(--font-size, 0rem), var(--font-size-min)); touch-action: manipulation; border: var(--border) solid var(--input-color, #0000); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-shrink: 1; align-items: center; gap: .5rem; padding-inline: .75rem; display: inline-flex; position: relative; & input { appearance: none; background-color: #0000; border: none; width: 100%; height: 100%; &::placeholder { color: var(--color-base-content); opacity: .5 } &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &::-webkit-calendar-picker-indicator { inset-inline-end: -.15em } } &::-webkit-inner-spin-button { margin-inline-end: -10px } &::-webkit-calendar-picker-indicator { inset-inline-end: .75em } input&, & input { display: inline-flex; position: relative; &[type=url], &[type=email] { text-align: left } &::-webkit-datetime-edit, &::-webkit-date-and-time-value { min-height: 100%; text-align: inherit; align-items: center; display: grid } &::-webkit-inner-spin-button { margin-block: calc(.25rem * var(--spin-my)) } &::-webkit-calendar-picker-indicator { cursor: pointer; width: 1em; height: 1em; position: absolute } &::-webkit-color-swatch-wrapper { padding-block: .25rem } } &:focus, &:focus-within { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate } @media (pointer:coarse) { @supports (-webkit-touch-callout:none) { &:focus, &:focus-within { --font-size: 1rem } } } &:has(>input[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); &:is(input), & :is(input) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent) } box-shadow:none; &::placeholder, & ::placeholder { color: var(--color-base-content); opacity: .2 } } &:has(>input[disabled])>input[disabled] { cursor: not-allowed } } } .md\:input-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; &:focus, &:focus-within { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } } } .md\:input-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .md\:input-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .md\:input-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .md\:input-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .md\:input-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .md\:input-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .md\:input-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .md\:input-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-error) } } } .md\:input-xs { @layer daisyui.l1.l2 { --in-size-mul: 6; --font-size-min: .6875rem; --spin-my: -1; .floating-label:has(&) { --top-mul: 3; --font-size: .6875rem } } } .md\:input-sm { @layer daisyui.l1.l2 { --in-size-mul: 8; --font-size-min: .75rem; --spin-my: -2; .floating-label:has(&) { --top-mul: 4; --font-size: .75rem } } } .md\:input, .md\:input-md { @layer daisyui.l1.l2 { --in-size-mul: 10; --font-size-min: .875rem; --spin-my: -3; .floating-label:has(&) { --top-mul: 5; --font-size: .875rem } } } .md\:input-lg { @layer daisyui.l1.l2 { --in-size-mul: 12; --font-size-min: 1.125rem; --spin-my: -3; .floating-label:has(&) { --top-mul: 6; --font-size: 1.125rem } } } .md\:input-xl { @layer daisyui.l1.l2 { --in-size-mul: 14; --font-size-min: 1.375rem; --spin-my: -4; .floating-label:has(&) { --top-mul: 7; --font-size: 1.375rem } } } } @media (width>=1024px) { .lg\:input { @layer daisyui.l1.l2.l3 { appearance: none; background-color: var(--color-base-100); vertical-align: middle; white-space: nowrap; --size: calc(var(--size-field, .25rem) * var(--in-size-mul)); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); cursor: text; width: clamp(3rem, 20rem, 100%); height: var(--size); font-size: max(var(--font-size, 0rem), var(--font-size-min)); touch-action: manipulation; border: var(--border) solid var(--input-color, #0000); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-shrink: 1; align-items: center; gap: .5rem; padding-inline: .75rem; display: inline-flex; position: relative; & input { appearance: none; background-color: #0000; border: none; width: 100%; height: 100%; &::placeholder { color: var(--color-base-content); opacity: .5 } &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &::-webkit-calendar-picker-indicator { inset-inline-end: -.15em } } &::-webkit-inner-spin-button { margin-inline-end: -10px } &::-webkit-calendar-picker-indicator { inset-inline-end: .75em } input&, & input { display: inline-flex; position: relative; &[type=url], &[type=email] { text-align: left } &::-webkit-datetime-edit, &::-webkit-date-and-time-value { min-height: 100%; text-align: inherit; align-items: center; display: grid } &::-webkit-inner-spin-button { margin-block: calc(.25rem * var(--spin-my)) } &::-webkit-calendar-picker-indicator { cursor: pointer; width: 1em; height: 1em; position: absolute } &::-webkit-color-swatch-wrapper { padding-block: .25rem } } &:focus, &:focus-within { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate } @media (pointer:coarse) { @supports (-webkit-touch-callout:none) { &:focus, &:focus-within { --font-size: 1rem } } } &:has(>input[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); &:is(input), & :is(input) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent) } box-shadow:none; &::placeholder, & ::placeholder { color: var(--color-base-content); opacity: .2 } } &:has(>input[disabled])>input[disabled] { cursor: not-allowed } } } .lg\:input-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; &:focus, &:focus-within { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } } } .lg\:input-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .lg\:input-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .lg\:input-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .lg\:input-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .lg\:input-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .lg\:input-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .lg\:input-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .lg\:input-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-error) } } } .lg\:input-xs { @layer daisyui.l1.l2 { --in-size-mul: 6; --font-size-min: .6875rem; --spin-my: -1; .floating-label:has(&) { --top-mul: 3; --font-size: .6875rem } } } .lg\:input-sm { @layer daisyui.l1.l2 { --in-size-mul: 8; --font-size-min: .75rem; --spin-my: -2; .floating-label:has(&) { --top-mul: 4; --font-size: .75rem } } } .lg\:input, .lg\:input-md { @layer daisyui.l1.l2 { --in-size-mul: 10; --font-size-min: .875rem; --spin-my: -3; .floating-label:has(&) { --top-mul: 5; --font-size: .875rem } } } .lg\:input-lg { @layer daisyui.l1.l2 { --in-size-mul: 12; --font-size-min: 1.125rem; --spin-my: -3; .floating-label:has(&) { --top-mul: 6; --font-size: 1.125rem } } } .lg\:input-xl { @layer daisyui.l1.l2 { --in-size-mul: 14; --font-size-min: 1.375rem; --spin-my: -4; .floating-label:has(&) { --top-mul: 7; --font-size: 1.375rem } } } } @media (width>=1280px) { .xl\:input { @layer daisyui.l1.l2.l3 { appearance: none; background-color: var(--color-base-100); vertical-align: middle; white-space: nowrap; --size: calc(var(--size-field, .25rem) * var(--in-size-mul)); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); cursor: text; width: clamp(3rem, 20rem, 100%); height: var(--size); font-size: max(var(--font-size, 0rem), var(--font-size-min)); touch-action: manipulation; border: var(--border) solid var(--input-color, #0000); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-shrink: 1; align-items: center; gap: .5rem; padding-inline: .75rem; display: inline-flex; position: relative; & input { appearance: none; background-color: #0000; border: none; width: 100%; height: 100%; &::placeholder { color: var(--color-base-content); opacity: .5 } &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &::-webkit-calendar-picker-indicator { inset-inline-end: -.15em } } &::-webkit-inner-spin-button { margin-inline-end: -10px } &::-webkit-calendar-picker-indicator { inset-inline-end: .75em } input&, & input { display: inline-flex; position: relative; &[type=url], &[type=email] { text-align: left } &::-webkit-datetime-edit, &::-webkit-date-and-time-value { min-height: 100%; text-align: inherit; align-items: center; display: grid } &::-webkit-inner-spin-button { margin-block: calc(.25rem * var(--spin-my)) } &::-webkit-calendar-picker-indicator { cursor: pointer; width: 1em; height: 1em; position: absolute } &::-webkit-color-swatch-wrapper { padding-block: .25rem } } &:focus, &:focus-within { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate } @media (pointer:coarse) { @supports (-webkit-touch-callout:none) { &:focus, &:focus-within { --font-size: 1rem } } } &:has(>input[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); &:is(input), & :is(input) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent) } box-shadow:none; &::placeholder, & ::placeholder { color: var(--color-base-content); opacity: .2 } } &:has(>input[disabled])>input[disabled] { cursor: not-allowed } } } .xl\:input-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; &:focus, &:focus-within { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } } } .xl\:input-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .xl\:input-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .xl\:input-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .xl\:input-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .xl\:input-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .xl\:input-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .xl\:input-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .xl\:input-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-error) } } } .xl\:input-xs { @layer daisyui.l1.l2 { --in-size-mul: 6; --font-size-min: .6875rem; --spin-my: -1; .floating-label:has(&) { --top-mul: 3; --font-size: .6875rem } } } .xl\:input-sm { @layer daisyui.l1.l2 { --in-size-mul: 8; --font-size-min: .75rem; --spin-my: -2; .floating-label:has(&) { --top-mul: 4; --font-size: .75rem } } } .xl\:input, .xl\:input-md { @layer daisyui.l1.l2 { --in-size-mul: 10; --font-size-min: .875rem; --spin-my: -3; .floating-label:has(&) { --top-mul: 5; --font-size: .875rem } } } .xl\:input-lg { @layer daisyui.l1.l2 { --in-size-mul: 12; --font-size-min: 1.125rem; --spin-my: -3; .floating-label:has(&) { --top-mul: 6; --font-size: 1.125rem } } } .xl\:input-xl { @layer daisyui.l1.l2 { --in-size-mul: 14; --font-size-min: 1.375rem; --spin-my: -4; .floating-label:has(&) { --top-mul: 7; --font-size: 1.375rem } } } } @media (width>=1536px) { .\32 xl\:input { @layer daisyui.l1.l2.l3 { appearance: none; background-color: var(--color-base-100); vertical-align: middle; white-space: nowrap; --size: calc(var(--size-field, .25rem) * var(--in-size-mul)); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); cursor: text; width: clamp(3rem, 20rem, 100%); height: var(--size); font-size: max(var(--font-size, 0rem), var(--font-size-min)); touch-action: manipulation; border: var(--border) solid var(--input-color, #0000); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-shrink: 1; align-items: center; gap: .5rem; padding-inline: .75rem; display: inline-flex; position: relative; & input { appearance: none; background-color: #0000; border: none; width: 100%; height: 100%; &::placeholder { color: var(--color-base-content); opacity: .5 } &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &::-webkit-calendar-picker-indicator { inset-inline-end: -.15em } } &::-webkit-inner-spin-button { margin-inline-end: -10px } &::-webkit-calendar-picker-indicator { inset-inline-end: .75em } input&, & input { display: inline-flex; position: relative; &[type=url], &[type=email] { text-align: left } &::-webkit-datetime-edit, &::-webkit-date-and-time-value { min-height: 100%; text-align: inherit; align-items: center; display: grid } &::-webkit-inner-spin-button { margin-block: calc(.25rem * var(--spin-my)) } &::-webkit-calendar-picker-indicator { cursor: pointer; width: 1em; height: 1em; position: absolute } &::-webkit-color-swatch-wrapper { padding-block: .25rem } } &:focus, &:focus-within { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate } @media (pointer:coarse) { @supports (-webkit-touch-callout:none) { &:focus, &:focus-within { --font-size: 1rem } } } &:has(>input[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); &:is(input), & :is(input) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent) } box-shadow:none; &::placeholder, & ::placeholder { color: var(--color-base-content); opacity: .2 } } &:has(>input[disabled])>input[disabled] { cursor: not-allowed } } } .\32 xl\:input-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; &:focus, &:focus-within { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } } } .\32 xl\:input-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .\32 xl\:input-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .\32 xl\:input-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .\32 xl\:input-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .\32 xl\:input-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .\32 xl\:input-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .\32 xl\:input-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .\32 xl\:input-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-error) } } } .\32 xl\:input-xs { @layer daisyui.l1.l2 { --in-size-mul: 6; --font-size-min: .6875rem; --spin-my: -1; .floating-label:has(&) { --top-mul: 3; --font-size: .6875rem } } } .\32 xl\:input-sm { @layer daisyui.l1.l2 { --in-size-mul: 8; --font-size-min: .75rem; --spin-my: -2; .floating-label:has(&) { --top-mul: 4; --font-size: .75rem } } } .\32 xl\:input, .\32 xl\:input-md { @layer daisyui.l1.l2 { --in-size-mul: 10; --font-size-min: .875rem; --spin-my: -3; .floating-label:has(&) { --top-mul: 5; --font-size: .875rem } } } .\32 xl\:input-lg { @layer daisyui.l1.l2 { --in-size-mul: 12; --font-size-min: 1.125rem; --spin-my: -3; .floating-label:has(&) { --top-mul: 6; --font-size: 1.125rem } } } .\32 xl\:input-xl { @layer daisyui.l1.l2 { --in-size-mul: 14; --font-size-min: 1.375rem; --spin-my: -4; .floating-label:has(&) { --top-mul: 7; --font-size: 1.375rem } } } } .carousel { @layer daisyui.l1.l2.l3 { scroll-snap-type: x mandatory; scrollbar-width: none; display: inline-flex; overflow-x: scroll; @media (prefers-reduced-motion:no-preference) { scroll-behavior: smooth } &::-webkit-scrollbar { display: none } } } .carousel-vertical { @layer daisyui.l1.l2 { scroll-snap-type: y mandatory; flex-direction: column; overflow-y: scroll } } .carousel-horizontal { @layer daisyui.l1.l2 { scroll-snap-type: x mandatory; flex-direction: row; overflow-x: scroll } } .carousel-item { @layer daisyui.l1.l2.l3 { box-sizing: content-box; scroll-snap-align: start; flex: none; display: flex } } .carousel-start { @layer daisyui.l1.l2 { & .carousel-item { scroll-snap-align: start } } } .carousel-center { @layer daisyui.l1.l2 { & .carousel-item { scroll-snap-align: center } } } .carousel-end { @layer daisyui.l1.l2 { & .carousel-item { scroll-snap-align: end } } } @media (width>=640px) { .sm\:carousel { @layer daisyui.l1.l2.l3 { scroll-snap-type: x mandatory; scrollbar-width: none; display: inline-flex; overflow-x: scroll; @media (prefers-reduced-motion:no-preference) { scroll-behavior: smooth } &::-webkit-scrollbar { display: none } } } .sm\:carousel-vertical { @layer daisyui.l1.l2 { scroll-snap-type: y mandatory; flex-direction: column; overflow-y: scroll } } .sm\:carousel-horizontal { @layer daisyui.l1.l2 { scroll-snap-type: x mandatory; flex-direction: row; overflow-x: scroll } } .sm\:carousel-item { @layer daisyui.l1.l2.l3 { box-sizing: content-box; scroll-snap-align: start; flex: none; display: flex } } .sm\:carousel-start { @layer daisyui.l1.l2 { & .carousel-item { scroll-snap-align: start } } } .sm\:carousel-center { @layer daisyui.l1.l2 { & .carousel-item { scroll-snap-align: center } } } .sm\:carousel-end { @layer daisyui.l1.l2 { & .carousel-item { scroll-snap-align: end } } } } @media (width>=768px) { .md\:carousel { @layer daisyui.l1.l2.l3 { scroll-snap-type: x mandatory; scrollbar-width: none; display: inline-flex; overflow-x: scroll; @media (prefers-reduced-motion:no-preference) { scroll-behavior: smooth } &::-webkit-scrollbar { display: none } } } .md\:carousel-vertical { @layer daisyui.l1.l2 { scroll-snap-type: y mandatory; flex-direction: column; overflow-y: scroll } } .md\:carousel-horizontal { @layer daisyui.l1.l2 { scroll-snap-type: x mandatory; flex-direction: row; overflow-x: scroll } } .md\:carousel-item { @layer daisyui.l1.l2.l3 { box-sizing: content-box; scroll-snap-align: start; flex: none; display: flex } } .md\:carousel-start { @layer daisyui.l1.l2 { & .carousel-item { scroll-snap-align: start } } } .md\:carousel-center { @layer daisyui.l1.l2 { & .carousel-item { scroll-snap-align: center } } } .md\:carousel-end { @layer daisyui.l1.l2 { & .carousel-item { scroll-snap-align: end } } } } @media (width>=1024px) { .lg\:carousel { @layer daisyui.l1.l2.l3 { scroll-snap-type: x mandatory; scrollbar-width: none; display: inline-flex; overflow-x: scroll; @media (prefers-reduced-motion:no-preference) { scroll-behavior: smooth } &::-webkit-scrollbar { display: none } } } .lg\:carousel-vertical { @layer daisyui.l1.l2 { scroll-snap-type: y mandatory; flex-direction: column; overflow-y: scroll } } .lg\:carousel-horizontal { @layer daisyui.l1.l2 { scroll-snap-type: x mandatory; flex-direction: row; overflow-x: scroll } } .lg\:carousel-item { @layer daisyui.l1.l2.l3 { box-sizing: content-box; scroll-snap-align: start; flex: none; display: flex } } .lg\:carousel-start { @layer daisyui.l1.l2 { & .carousel-item { scroll-snap-align: start } } } .lg\:carousel-center { @layer daisyui.l1.l2 { & .carousel-item { scroll-snap-align: center } } } .lg\:carousel-end { @layer daisyui.l1.l2 { & .carousel-item { scroll-snap-align: end } } } } @media (width>=1280px) { .xl\:carousel { @layer daisyui.l1.l2.l3 { scroll-snap-type: x mandatory; scrollbar-width: none; display: inline-flex; overflow-x: scroll; @media (prefers-reduced-motion:no-preference) { scroll-behavior: smooth } &::-webkit-scrollbar { display: none } } } .xl\:carousel-vertical { @layer daisyui.l1.l2 { scroll-snap-type: y mandatory; flex-direction: column; overflow-y: scroll } } .xl\:carousel-horizontal { @layer daisyui.l1.l2 { scroll-snap-type: x mandatory; flex-direction: row; overflow-x: scroll } } .xl\:carousel-item { @layer daisyui.l1.l2.l3 { box-sizing: content-box; scroll-snap-align: start; flex: none; display: flex } } .xl\:carousel-start { @layer daisyui.l1.l2 { & .carousel-item { scroll-snap-align: start } } } .xl\:carousel-center { @layer daisyui.l1.l2 { & .carousel-item { scroll-snap-align: center } } } .xl\:carousel-end { @layer daisyui.l1.l2 { & .carousel-item { scroll-snap-align: end } } } } @media (width>=1536px) { .\32 xl\:carousel { @layer daisyui.l1.l2.l3 { scroll-snap-type: x mandatory; scrollbar-width: none; display: inline-flex; overflow-x: scroll; @media (prefers-reduced-motion:no-preference) { scroll-behavior: smooth } &::-webkit-scrollbar { display: none } } } .\32 xl\:carousel-vertical { @layer daisyui.l1.l2 { scroll-snap-type: y mandatory; flex-direction: column; overflow-y: scroll } } .\32 xl\:carousel-horizontal { @layer daisyui.l1.l2 { scroll-snap-type: x mandatory; flex-direction: row; overflow-x: scroll } } .\32 xl\:carousel-item { @layer daisyui.l1.l2.l3 { box-sizing: content-box; scroll-snap-align: start; flex: none; display: flex } } .\32 xl\:carousel-start { @layer daisyui.l1.l2 { & .carousel-item { scroll-snap-align: start } } } .\32 xl\:carousel-center { @layer daisyui.l1.l2 { & .carousel-item { scroll-snap-align: center } } } .\32 xl\:carousel-end { @layer daisyui.l1.l2 { & .carousel-item { scroll-snap-align: end } } } } .card { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box); outline-offset: 2px; outline: 2px solid #0000; flex-direction: column; transition: outline .2s ease-in-out; display: flex; position: relative; &:focus-visible, &[aria-checked=true], &:has(>:checked, >:is([type=checkbox], [type=radio]):focus-visible) { outline-color: currentColor } &:has(>:checked:focus-visible), &[aria-checked=true]:focus-visible, &[aria-checked=true]:has(>:is([type=checkbox], [type=radio]):focus-visible) { outline-width: 4px } &:has(>:is([type=checkbox], [type=radio])) { cursor: pointer; user-select: none } &>:is([type=checkbox], [type=radio]) { appearance: none } } @layer daisyui.l1.l2.l3.l4 { & figure:first-child { border-start-start-radius: inherit; border-start-end-radius: inherit; border-end-end-radius: unset; border-end-start-radius: unset; overflow: hidden } & figure:last-child { border-start-start-radius: unset; border-start-end-radius: unset; border-end-end-radius: inherit; border-end-start-radius: inherit; overflow: hidden } & figure { justify-content: center; align-items: center; display: flex } } } .card-border { @layer daisyui.l1.l2 { border: var(--border) solid var(--color-base-200) } } .card-dash { @layer daisyui.l1.l2 { border: var(--border) dashed var(--color-base-200) } } .image-full { @layer daisyui.l1.l2 { display: grid; &>* { grid-row-start: 1; grid-column-start: 1 } &>.card-body { color: var(--color-neutral-content); position: relative } & :where(figure) { border-radius: inherit; overflow: hidden } &>figure img { object-fit: cover; filter: brightness(28%); height: 100% } } } .card-title { @layer daisyui.l1.l2.l3 { font-size: var(--cardtitle-fs, 1.125rem); align-items: center; gap: .5rem; font-weight: 600; display: flex } } .card-body { @layer daisyui.l1.l2.l3 { padding: var(--card-p, 1.5rem); font-size: var(--card-fs, .875rem); flex-direction: column; flex: auto; gap: .5rem; display: flex } @layer daisyui.l1.l2.l3.l4 { & p { flex-grow: 1 } } } .card-actions { @layer daisyui.l1.l2.l3 { flex-wrap: wrap; align-items: flex-start; gap: .5rem; display: flex } } .card-xs { @layer daisyui.l1.l2 { & .card-body { --card-p: .5rem; --card-fs: .6875rem } & .card-title { --cardtitle-fs: .875rem } } } .card-sm { @layer daisyui.l1.l2 { & .card-body { --card-p: 1rem; --card-fs: .75rem } & .card-title { --cardtitle-fs: 1rem } } } .card-md { @layer daisyui.l1.l2 { & .card-body { --card-p: 1.5rem; --card-fs: .875rem } & .card-title { --cardtitle-fs: 1.125rem } } } .card-lg { @layer daisyui.l1.l2 { & .card-body { --card-p: 2rem; --card-fs: 1rem } & .card-title { --cardtitle-fs: 1.25rem } } } .card-xl { @layer daisyui.l1.l2 { & .card-body { --card-p: 2.5rem; --card-fs: 1.125rem } & .card-title { --cardtitle-fs: 1.375rem } } } .card-side { @layer daisyui.l1.l2 { flex-direction: row; align-items: stretch; & :where(figure:first-child) { border-start-start-radius: inherit; border-start-end-radius: unset; border-end-end-radius: unset; border-end-start-radius: inherit; overflow: hidden } & :where(figure:last-child) { border-start-start-radius: unset; border-start-end-radius: inherit; border-end-end-radius: inherit; border-end-start-radius: unset; overflow: hidden } & figure>* { max-width: unset } & :where(figure>*) { object-fit: cover; width: 100%; height: 100% } } } @media (width>=640px) { .sm\:card { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box); outline-offset: 2px; outline: 2px solid #0000; flex-direction: column; transition: outline .2s ease-in-out; display: flex; position: relative; &:focus-visible, &[aria-checked=true], &:has(>:checked, >:is([type=checkbox], [type=radio]):focus-visible) { outline-color: currentColor } &:has(>:checked:focus-visible), &[aria-checked=true]:focus-visible, &[aria-checked=true]:has(>:is([type=checkbox], [type=radio]):focus-visible) { outline-width: 4px } &:has(>:is([type=checkbox], [type=radio])) { cursor: pointer; user-select: none } &>:is([type=checkbox], [type=radio]) { appearance: none } } @layer daisyui.l1.l2.l3.l4 { & figure:first-child { border-start-start-radius: inherit; border-start-end-radius: inherit; border-end-end-radius: unset; border-end-start-radius: unset; overflow: hidden } & figure:last-child { border-start-start-radius: unset; border-start-end-radius: unset; border-end-end-radius: inherit; border-end-start-radius: inherit; overflow: hidden } & figure { justify-content: center; align-items: center; display: flex } } } .sm\:card-border { @layer daisyui.l1.l2 { border: var(--border) solid var(--color-base-200) } } .sm\:card-dash { @layer daisyui.l1.l2 { border: var(--border) dashed var(--color-base-200) } } .sm\:image-full { @layer daisyui.l1.l2 { display: grid; &>* { grid-row-start: 1; grid-column-start: 1 } &>.card-body { color: var(--color-neutral-content); position: relative } & :where(figure) { border-radius: inherit; overflow: hidden } &>figure img { object-fit: cover; filter: brightness(28%); height: 100% } } } .sm\:card-title { @layer daisyui.l1.l2.l3 { font-size: var(--cardtitle-fs, 1.125rem); align-items: center; gap: .5rem; font-weight: 600; display: flex } } .sm\:card-body { @layer daisyui.l1.l2.l3 { padding: var(--card-p, 1.5rem); font-size: var(--card-fs, .875rem); flex-direction: column; flex: auto; gap: .5rem; display: flex } @layer daisyui.l1.l2.l3.l4 { & p { flex-grow: 1 } } } .sm\:card-actions { @layer daisyui.l1.l2.l3 { flex-wrap: wrap; align-items: flex-start; gap: .5rem; display: flex } } .sm\:card-xs { @layer daisyui.l1.l2 { & .card-body { --card-p: .5rem; --card-fs: .6875rem } & .card-title { --cardtitle-fs: .875rem } } } .sm\:card-sm { @layer daisyui.l1.l2 { & .card-body { --card-p: 1rem; --card-fs: .75rem } & .card-title { --cardtitle-fs: 1rem } } } .sm\:card-md { @layer daisyui.l1.l2 { & .card-body { --card-p: 1.5rem; --card-fs: .875rem } & .card-title { --cardtitle-fs: 1.125rem } } } .sm\:card-lg { @layer daisyui.l1.l2 { & .card-body { --card-p: 2rem; --card-fs: 1rem } & .card-title { --cardtitle-fs: 1.25rem } } } .sm\:card-xl { @layer daisyui.l1.l2 { & .card-body { --card-p: 2.5rem; --card-fs: 1.125rem } & .card-title { --cardtitle-fs: 1.375rem } } } .sm\:card-side { @layer daisyui.l1.l2 { flex-direction: row; align-items: stretch; & :where(figure:first-child) { border-start-start-radius: inherit; border-start-end-radius: unset; border-end-end-radius: unset; border-end-start-radius: inherit; overflow: hidden } & :where(figure:last-child) { border-start-start-radius: unset; border-start-end-radius: inherit; border-end-end-radius: inherit; border-end-start-radius: unset; overflow: hidden } & figure>* { max-width: unset } & :where(figure>*) { object-fit: cover; width: 100%; height: 100% } } } } @media (width>=768px) { .md\:card { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box); outline-offset: 2px; outline: 2px solid #0000; flex-direction: column; transition: outline .2s ease-in-out; display: flex; position: relative; &:focus-visible, &[aria-checked=true], &:has(>:checked, >:is([type=checkbox], [type=radio]):focus-visible) { outline-color: currentColor } &:has(>:checked:focus-visible), &[aria-checked=true]:focus-visible, &[aria-checked=true]:has(>:is([type=checkbox], [type=radio]):focus-visible) { outline-width: 4px } &:has(>:is([type=checkbox], [type=radio])) { cursor: pointer; user-select: none } &>:is([type=checkbox], [type=radio]) { appearance: none } } @layer daisyui.l1.l2.l3.l4 { & figure:first-child { border-start-start-radius: inherit; border-start-end-radius: inherit; border-end-end-radius: unset; border-end-start-radius: unset; overflow: hidden } & figure:last-child { border-start-start-radius: unset; border-start-end-radius: unset; border-end-end-radius: inherit; border-end-start-radius: inherit; overflow: hidden } & figure { justify-content: center; align-items: center; display: flex } } } .md\:card-border { @layer daisyui.l1.l2 { border: var(--border) solid var(--color-base-200) } } .md\:card-dash { @layer daisyui.l1.l2 { border: var(--border) dashed var(--color-base-200) } } .md\:image-full { @layer daisyui.l1.l2 { display: grid; &>* { grid-row-start: 1; grid-column-start: 1 } &>.card-body { color: var(--color-neutral-content); position: relative } & :where(figure) { border-radius: inherit; overflow: hidden } &>figure img { object-fit: cover; filter: brightness(28%); height: 100% } } } .md\:card-title { @layer daisyui.l1.l2.l3 { font-size: var(--cardtitle-fs, 1.125rem); align-items: center; gap: .5rem; font-weight: 600; display: flex } } .md\:card-body { @layer daisyui.l1.l2.l3 { padding: var(--card-p, 1.5rem); font-size: var(--card-fs, .875rem); flex-direction: column; flex: auto; gap: .5rem; display: flex } @layer daisyui.l1.l2.l3.l4 { & p { flex-grow: 1 } } } .md\:card-actions { @layer daisyui.l1.l2.l3 { flex-wrap: wrap; align-items: flex-start; gap: .5rem; display: flex } } .md\:card-xs { @layer daisyui.l1.l2 { & .card-body { --card-p: .5rem; --card-fs: .6875rem } & .card-title { --cardtitle-fs: .875rem } } } .md\:card-sm { @layer daisyui.l1.l2 { & .card-body { --card-p: 1rem; --card-fs: .75rem } & .card-title { --cardtitle-fs: 1rem } } } .md\:card-md { @layer daisyui.l1.l2 { & .card-body { --card-p: 1.5rem; --card-fs: .875rem } & .card-title { --cardtitle-fs: 1.125rem } } } .md\:card-lg { @layer daisyui.l1.l2 { & .card-body { --card-p: 2rem; --card-fs: 1rem } & .card-title { --cardtitle-fs: 1.25rem } } } .md\:card-xl { @layer daisyui.l1.l2 { & .card-body { --card-p: 2.5rem; --card-fs: 1.125rem } & .card-title { --cardtitle-fs: 1.375rem } } } .md\:card-side { @layer daisyui.l1.l2 { flex-direction: row; align-items: stretch; & :where(figure:first-child) { border-start-start-radius: inherit; border-start-end-radius: unset; border-end-end-radius: unset; border-end-start-radius: inherit; overflow: hidden } & :where(figure:last-child) { border-start-start-radius: unset; border-start-end-radius: inherit; border-end-end-radius: inherit; border-end-start-radius: unset; overflow: hidden } & figure>* { max-width: unset } & :where(figure>*) { object-fit: cover; width: 100%; height: 100% } } } } @media (width>=1024px) { .lg\:card { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box); outline-offset: 2px; outline: 2px solid #0000; flex-direction: column; transition: outline .2s ease-in-out; display: flex; position: relative; &:focus-visible, &[aria-checked=true], &:has(>:checked, >:is([type=checkbox], [type=radio]):focus-visible) { outline-color: currentColor } &:has(>:checked:focus-visible), &[aria-checked=true]:focus-visible, &[aria-checked=true]:has(>:is([type=checkbox], [type=radio]):focus-visible) { outline-width: 4px } &:has(>:is([type=checkbox], [type=radio])) { cursor: pointer; user-select: none } &>:is([type=checkbox], [type=radio]) { appearance: none } } @layer daisyui.l1.l2.l3.l4 { & figure:first-child { border-start-start-radius: inherit; border-start-end-radius: inherit; border-end-end-radius: unset; border-end-start-radius: unset; overflow: hidden } & figure:last-child { border-start-start-radius: unset; border-start-end-radius: unset; border-end-end-radius: inherit; border-end-start-radius: inherit; overflow: hidden } & figure { justify-content: center; align-items: center; display: flex } } } .lg\:card-border { @layer daisyui.l1.l2 { border: var(--border) solid var(--color-base-200) } } .lg\:card-dash { @layer daisyui.l1.l2 { border: var(--border) dashed var(--color-base-200) } } .lg\:image-full { @layer daisyui.l1.l2 { display: grid; &>* { grid-row-start: 1; grid-column-start: 1 } &>.card-body { color: var(--color-neutral-content); position: relative } & :where(figure) { border-radius: inherit; overflow: hidden } &>figure img { object-fit: cover; filter: brightness(28%); height: 100% } } } .lg\:card-title { @layer daisyui.l1.l2.l3 { font-size: var(--cardtitle-fs, 1.125rem); align-items: center; gap: .5rem; font-weight: 600; display: flex } } .lg\:card-body { @layer daisyui.l1.l2.l3 { padding: var(--card-p, 1.5rem); font-size: var(--card-fs, .875rem); flex-direction: column; flex: auto; gap: .5rem; display: flex } @layer daisyui.l1.l2.l3.l4 { & p { flex-grow: 1 } } } .lg\:card-actions { @layer daisyui.l1.l2.l3 { flex-wrap: wrap; align-items: flex-start; gap: .5rem; display: flex } } .lg\:card-xs { @layer daisyui.l1.l2 { & .card-body { --card-p: .5rem; --card-fs: .6875rem } & .card-title { --cardtitle-fs: .875rem } } } .lg\:card-sm { @layer daisyui.l1.l2 { & .card-body { --card-p: 1rem; --card-fs: .75rem } & .card-title { --cardtitle-fs: 1rem } } } .lg\:card-md { @layer daisyui.l1.l2 { & .card-body { --card-p: 1.5rem; --card-fs: .875rem } & .card-title { --cardtitle-fs: 1.125rem } } } .lg\:card-lg { @layer daisyui.l1.l2 { & .card-body { --card-p: 2rem; --card-fs: 1rem } & .card-title { --cardtitle-fs: 1.25rem } } } .lg\:card-xl { @layer daisyui.l1.l2 { & .card-body { --card-p: 2.5rem; --card-fs: 1.125rem } & .card-title { --cardtitle-fs: 1.375rem } } } .lg\:card-side { @layer daisyui.l1.l2 { flex-direction: row; align-items: stretch; & :where(figure:first-child) { border-start-start-radius: inherit; border-start-end-radius: unset; border-end-end-radius: unset; border-end-start-radius: inherit; overflow: hidden } & :where(figure:last-child) { border-start-start-radius: unset; border-start-end-radius: inherit; border-end-end-radius: inherit; border-end-start-radius: unset; overflow: hidden } & figure>* { max-width: unset } & :where(figure>*) { object-fit: cover; width: 100%; height: 100% } } } } @media (width>=1280px) { .xl\:card { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box); outline-offset: 2px; outline: 2px solid #0000; flex-direction: column; transition: outline .2s ease-in-out; display: flex; position: relative; &:focus-visible, &[aria-checked=true], &:has(>:checked, >:is([type=checkbox], [type=radio]):focus-visible) { outline-color: currentColor } &:has(>:checked:focus-visible), &[aria-checked=true]:focus-visible, &[aria-checked=true]:has(>:is([type=checkbox], [type=radio]):focus-visible) { outline-width: 4px } &:has(>:is([type=checkbox], [type=radio])) { cursor: pointer; user-select: none } &>:is([type=checkbox], [type=radio]) { appearance: none } } @layer daisyui.l1.l2.l3.l4 { & figure:first-child { border-start-start-radius: inherit; border-start-end-radius: inherit; border-end-end-radius: unset; border-end-start-radius: unset; overflow: hidden } & figure:last-child { border-start-start-radius: unset; border-start-end-radius: unset; border-end-end-radius: inherit; border-end-start-radius: inherit; overflow: hidden } & figure { justify-content: center; align-items: center; display: flex } } } .xl\:card-border { @layer daisyui.l1.l2 { border: var(--border) solid var(--color-base-200) } } .xl\:card-dash { @layer daisyui.l1.l2 { border: var(--border) dashed var(--color-base-200) } } .xl\:image-full { @layer daisyui.l1.l2 { display: grid; &>* { grid-row-start: 1; grid-column-start: 1 } &>.card-body { color: var(--color-neutral-content); position: relative } & :where(figure) { border-radius: inherit; overflow: hidden } &>figure img { object-fit: cover; filter: brightness(28%); height: 100% } } } .xl\:card-title { @layer daisyui.l1.l2.l3 { font-size: var(--cardtitle-fs, 1.125rem); align-items: center; gap: .5rem; font-weight: 600; display: flex } } .xl\:card-body { @layer daisyui.l1.l2.l3 { padding: var(--card-p, 1.5rem); font-size: var(--card-fs, .875rem); flex-direction: column; flex: auto; gap: .5rem; display: flex } @layer daisyui.l1.l2.l3.l4 { & p { flex-grow: 1 } } } .xl\:card-actions { @layer daisyui.l1.l2.l3 { flex-wrap: wrap; align-items: flex-start; gap: .5rem; display: flex } } .xl\:card-xs { @layer daisyui.l1.l2 { & .card-body { --card-p: .5rem; --card-fs: .6875rem } & .card-title { --cardtitle-fs: .875rem } } } .xl\:card-sm { @layer daisyui.l1.l2 { & .card-body { --card-p: 1rem; --card-fs: .75rem } & .card-title { --cardtitle-fs: 1rem } } } .xl\:card-md { @layer daisyui.l1.l2 { & .card-body { --card-p: 1.5rem; --card-fs: .875rem } & .card-title { --cardtitle-fs: 1.125rem } } } .xl\:card-lg { @layer daisyui.l1.l2 { & .card-body { --card-p: 2rem; --card-fs: 1rem } & .card-title { --cardtitle-fs: 1.25rem } } } .xl\:card-xl { @layer daisyui.l1.l2 { & .card-body { --card-p: 2.5rem; --card-fs: 1.125rem } & .card-title { --cardtitle-fs: 1.375rem } } } .xl\:card-side { @layer daisyui.l1.l2 { flex-direction: row; align-items: stretch; & :where(figure:first-child) { border-start-start-radius: inherit; border-start-end-radius: unset; border-end-end-radius: unset; border-end-start-radius: inherit; overflow: hidden } & :where(figure:last-child) { border-start-start-radius: unset; border-start-end-radius: inherit; border-end-end-radius: inherit; border-end-start-radius: unset; overflow: hidden } & figure>* { max-width: unset } & :where(figure>*) { object-fit: cover; width: 100%; height: 100% } } } } @media (width>=1536px) { .\32 xl\:card { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box); outline-offset: 2px; outline: 2px solid #0000; flex-direction: column; transition: outline .2s ease-in-out; display: flex; position: relative; &:focus-visible, &[aria-checked=true], &:has(>:checked, >:is([type=checkbox], [type=radio]):focus-visible) { outline-color: currentColor } &:has(>:checked:focus-visible), &[aria-checked=true]:focus-visible, &[aria-checked=true]:has(>:is([type=checkbox], [type=radio]):focus-visible) { outline-width: 4px } &:has(>:is([type=checkbox], [type=radio])) { cursor: pointer; user-select: none } &>:is([type=checkbox], [type=radio]) { appearance: none } } @layer daisyui.l1.l2.l3.l4 { & figure:first-child { border-start-start-radius: inherit; border-start-end-radius: inherit; border-end-end-radius: unset; border-end-start-radius: unset; overflow: hidden } & figure:last-child { border-start-start-radius: unset; border-start-end-radius: unset; border-end-end-radius: inherit; border-end-start-radius: inherit; overflow: hidden } & figure { justify-content: center; align-items: center; display: flex } } } .\32 xl\:card-border { @layer daisyui.l1.l2 { border: var(--border) solid var(--color-base-200) } } .\32 xl\:card-dash { @layer daisyui.l1.l2 { border: var(--border) dashed var(--color-base-200) } } .\32 xl\:image-full { @layer daisyui.l1.l2 { display: grid; &>* { grid-row-start: 1; grid-column-start: 1 } &>.card-body { color: var(--color-neutral-content); position: relative } & :where(figure) { border-radius: inherit; overflow: hidden } &>figure img { object-fit: cover; filter: brightness(28%); height: 100% } } } .\32 xl\:card-title { @layer daisyui.l1.l2.l3 { font-size: var(--cardtitle-fs, 1.125rem); align-items: center; gap: .5rem; font-weight: 600; display: flex } } .\32 xl\:card-body { @layer daisyui.l1.l2.l3 { padding: var(--card-p, 1.5rem); font-size: var(--card-fs, .875rem); flex-direction: column; flex: auto; gap: .5rem; display: flex } @layer daisyui.l1.l2.l3.l4 { & p { flex-grow: 1 } } } .\32 xl\:card-actions { @layer daisyui.l1.l2.l3 { flex-wrap: wrap; align-items: flex-start; gap: .5rem; display: flex } } .\32 xl\:card-xs { @layer daisyui.l1.l2 { & .card-body { --card-p: .5rem; --card-fs: .6875rem } & .card-title { --cardtitle-fs: .875rem } } } .\32 xl\:card-sm { @layer daisyui.l1.l2 { & .card-body { --card-p: 1rem; --card-fs: .75rem } & .card-title { --cardtitle-fs: 1rem } } } .\32 xl\:card-md { @layer daisyui.l1.l2 { & .card-body { --card-p: 1.5rem; --card-fs: .875rem } & .card-title { --cardtitle-fs: 1.125rem } } } .\32 xl\:card-lg { @layer daisyui.l1.l2 { & .card-body { --card-p: 2rem; --card-fs: 1rem } & .card-title { --cardtitle-fs: 1.25rem } } } .\32 xl\:card-xl { @layer daisyui.l1.l2 { & .card-body { --card-p: 2.5rem; --card-fs: 1.125rem } & .card-title { --cardtitle-fs: 1.375rem } } } .\32 xl\:card-side { @layer daisyui.l1.l2 { flex-direction: row; align-items: stretch; & :where(figure:first-child) { border-start-start-radius: inherit; border-start-end-radius: unset; border-end-end-radius: unset; border-end-start-radius: inherit; overflow: hidden } & :where(figure:last-child) { border-start-start-radius: unset; border-start-end-radius: inherit; border-end-end-radius: inherit; border-end-start-radius: unset; overflow: hidden } & figure>* { max-width: unset } & :where(figure>*) { object-fit: cover; width: 100%; height: 100% } } } } .indicator { @layer daisyui.l1.l2.l3 { width: max-content; display: inline-flex; position: relative; & :where(.indicator-item) { z-index: 1; white-space: nowrap; top: var(--indicator-t, 0); bottom: var(--indicator-b, auto); left: var(--indicator-s, auto); right: var(--indicator-e, 0); translate: var(--indicator-x, 50%) var(--indicator-y, -50%); position: absolute } } } .indicator-start { @layer daisyui.l1.l2 { --indicator-s: 0; --indicator-e: auto; --indicator-x: -50%; [dir=rtl] & { --indicator-s: auto; --indicator-e: 0; --indicator-x: 50% } } } .indicator-center { @layer daisyui.l1.l2 { --indicator-s: 50%; --indicator-e: auto; --indicator-x: -50%; [dir=rtl] & { --indicator-e: 50%; --indicator-x: 50% } } } .indicator-end { @layer daisyui.l1.l2 { --indicator-s: auto; --indicator-e: 0; --indicator-x: 50%; [dir=rtl] & { --indicator-s: 0; --indicator-e: auto; --indicator-x: -50% } } } .indicator-bottom { @layer daisyui.l1.l2 { --indicator-t: auto; --indicator-b: 0; --indicator-y: 50% } } .indicator-middle { @layer daisyui.l1.l2 { --indicator-t: 50%; --indicator-b: auto; --indicator-y: -50% } } .indicator-top { @layer daisyui.l1.l2 { --indicator-t: 0; --indicator-b: auto; --indicator-y: -50% } } @media (width>=640px) { .sm\:indicator { @layer daisyui.l1.l2.l3 { width: max-content; display: inline-flex; position: relative; & :where(.indicator-item) { z-index: 1; white-space: nowrap; top: var(--indicator-t, 0); bottom: var(--indicator-b, auto); left: var(--indicator-s, auto); right: var(--indicator-e, 0); translate: var(--indicator-x, 50%) var(--indicator-y, -50%); position: absolute } } } .sm\:indicator-start { @layer daisyui.l1.l2 { --indicator-s: 0; --indicator-e: auto; --indicator-x: -50%; [dir=rtl] & { --indicator-s: auto; --indicator-e: 0; --indicator-x: 50% } } } .sm\:indicator-center { @layer daisyui.l1.l2 { --indicator-s: 50%; --indicator-e: auto; --indicator-x: -50%; [dir=rtl] & { --indicator-e: 50%; --indicator-x: 50% } } } .sm\:indicator-end { @layer daisyui.l1.l2 { --indicator-s: auto; --indicator-e: 0; --indicator-x: 50%; [dir=rtl] & { --indicator-s: 0; --indicator-e: auto; --indicator-x: -50% } } } .sm\:indicator-bottom { @layer daisyui.l1.l2 { --indicator-t: auto; --indicator-b: 0; --indicator-y: 50% } } .sm\:indicator-middle { @layer daisyui.l1.l2 { --indicator-t: 50%; --indicator-b: auto; --indicator-y: -50% } } .sm\:indicator-top { @layer daisyui.l1.l2 { --indicator-t: 0; --indicator-b: auto; --indicator-y: -50% } } } @media (width>=768px) { .md\:indicator { @layer daisyui.l1.l2.l3 { width: max-content; display: inline-flex; position: relative; & :where(.indicator-item) { z-index: 1; white-space: nowrap; top: var(--indicator-t, 0); bottom: var(--indicator-b, auto); left: var(--indicator-s, auto); right: var(--indicator-e, 0); translate: var(--indicator-x, 50%) var(--indicator-y, -50%); position: absolute } } } .md\:indicator-start { @layer daisyui.l1.l2 { --indicator-s: 0; --indicator-e: auto; --indicator-x: -50%; [dir=rtl] & { --indicator-s: auto; --indicator-e: 0; --indicator-x: 50% } } } .md\:indicator-center { @layer daisyui.l1.l2 { --indicator-s: 50%; --indicator-e: auto; --indicator-x: -50%; [dir=rtl] & { --indicator-e: 50%; --indicator-x: 50% } } } .md\:indicator-end { @layer daisyui.l1.l2 { --indicator-s: auto; --indicator-e: 0; --indicator-x: 50%; [dir=rtl] & { --indicator-s: 0; --indicator-e: auto; --indicator-x: -50% } } } .md\:indicator-bottom { @layer daisyui.l1.l2 { --indicator-t: auto; --indicator-b: 0; --indicator-y: 50% } } .md\:indicator-middle { @layer daisyui.l1.l2 { --indicator-t: 50%; --indicator-b: auto; --indicator-y: -50% } } .md\:indicator-top { @layer daisyui.l1.l2 { --indicator-t: 0; --indicator-b: auto; --indicator-y: -50% } } } @media (width>=1024px) { .lg\:indicator { @layer daisyui.l1.l2.l3 { width: max-content; display: inline-flex; position: relative; & :where(.indicator-item) { z-index: 1; white-space: nowrap; top: var(--indicator-t, 0); bottom: var(--indicator-b, auto); left: var(--indicator-s, auto); right: var(--indicator-e, 0); translate: var(--indicator-x, 50%) var(--indicator-y, -50%); position: absolute } } } .lg\:indicator-start { @layer daisyui.l1.l2 { --indicator-s: 0; --indicator-e: auto; --indicator-x: -50%; [dir=rtl] & { --indicator-s: auto; --indicator-e: 0; --indicator-x: 50% } } } .lg\:indicator-center { @layer daisyui.l1.l2 { --indicator-s: 50%; --indicator-e: auto; --indicator-x: -50%; [dir=rtl] & { --indicator-e: 50%; --indicator-x: 50% } } } .lg\:indicator-end { @layer daisyui.l1.l2 { --indicator-s: auto; --indicator-e: 0; --indicator-x: 50%; [dir=rtl] & { --indicator-s: 0; --indicator-e: auto; --indicator-x: -50% } } } .lg\:indicator-bottom { @layer daisyui.l1.l2 { --indicator-t: auto; --indicator-b: 0; --indicator-y: 50% } } .lg\:indicator-middle { @layer daisyui.l1.l2 { --indicator-t: 50%; --indicator-b: auto; --indicator-y: -50% } } .lg\:indicator-top { @layer daisyui.l1.l2 { --indicator-t: 0; --indicator-b: auto; --indicator-y: -50% } } } @media (width>=1280px) { .xl\:indicator { @layer daisyui.l1.l2.l3 { width: max-content; display: inline-flex; position: relative; & :where(.indicator-item) { z-index: 1; white-space: nowrap; top: var(--indicator-t, 0); bottom: var(--indicator-b, auto); left: var(--indicator-s, auto); right: var(--indicator-e, 0); translate: var(--indicator-x, 50%) var(--indicator-y, -50%); position: absolute } } } .xl\:indicator-start { @layer daisyui.l1.l2 { --indicator-s: 0; --indicator-e: auto; --indicator-x: -50%; [dir=rtl] & { --indicator-s: auto; --indicator-e: 0; --indicator-x: 50% } } } .xl\:indicator-center { @layer daisyui.l1.l2 { --indicator-s: 50%; --indicator-e: auto; --indicator-x: -50%; [dir=rtl] & { --indicator-e: 50%; --indicator-x: 50% } } } .xl\:indicator-end { @layer daisyui.l1.l2 { --indicator-s: auto; --indicator-e: 0; --indicator-x: 50%; [dir=rtl] & { --indicator-s: 0; --indicator-e: auto; --indicator-x: -50% } } } .xl\:indicator-bottom { @layer daisyui.l1.l2 { --indicator-t: auto; --indicator-b: 0; --indicator-y: 50% } } .xl\:indicator-middle { @layer daisyui.l1.l2 { --indicator-t: 50%; --indicator-b: auto; --indicator-y: -50% } } .xl\:indicator-top { @layer daisyui.l1.l2 { --indicator-t: 0; --indicator-b: auto; --indicator-y: -50% } } } @media (width>=1536px) { .\32 xl\:indicator { @layer daisyui.l1.l2.l3 { width: max-content; display: inline-flex; position: relative; & :where(.indicator-item) { z-index: 1; white-space: nowrap; top: var(--indicator-t, 0); bottom: var(--indicator-b, auto); left: var(--indicator-s, auto); right: var(--indicator-e, 0); translate: var(--indicator-x, 50%) var(--indicator-y, -50%); position: absolute } } } .\32 xl\:indicator-start { @layer daisyui.l1.l2 { --indicator-s: 0; --indicator-e: auto; --indicator-x: -50%; [dir=rtl] & { --indicator-s: auto; --indicator-e: 0; --indicator-x: 50% } } } .\32 xl\:indicator-center { @layer daisyui.l1.l2 { --indicator-s: 50%; --indicator-e: auto; --indicator-x: -50%; [dir=rtl] & { --indicator-e: 50%; --indicator-x: 50% } } } .\32 xl\:indicator-end { @layer daisyui.l1.l2 { --indicator-s: auto; --indicator-e: 0; --indicator-x: 50%; [dir=rtl] & { --indicator-s: 0; --indicator-e: auto; --indicator-x: -50% } } } .\32 xl\:indicator-bottom { @layer daisyui.l1.l2 { --indicator-t: auto; --indicator-b: 0; --indicator-y: 50% } } .\32 xl\:indicator-middle { @layer daisyui.l1.l2 { --indicator-t: 50%; --indicator-b: auto; --indicator-y: -50% } } .\32 xl\:indicator-top { @layer daisyui.l1.l2 { --indicator-t: 0; --indicator-b: auto; --indicator-y: -50% } } } .aura { @layer daisyui.l1.l2.l3 { --aura-padding: .125rem; padding: var(--aura-padding); border-radius: calc(var(--aura-padding) + var(--aura-radius, var(--radius-box))); animation: aura var(--tw-duration, 6s) linear infinite; background-image: conic-gradient(from var(--aura-angle), transparent 225deg, currentColor); display: inline-block; position: relative; &:has(>.card, >.alert) { --aura-radius: var(--radius-box) } &:has(>.btn, >.input, >.select) { --aura-radius: var(--radius-field) } &:has(>.checkbox, >.toggle, >.badge) { --aura-radius: var(--radius-selector) } &:before, &:after { animation: inherit; background-color: inherit; background-image: inherit; border-radius: inherit; z-index: 0; opacity: .7; filter: blur(.25rem); content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 50%; left: 50%; translate: -50% -50% } &:after { opacity: .3; filter: blur(1rem) } &>* { z-index: 1; position: relative } } } .aura-rainbow { @layer daisyui.l1.l2 { background: conic-gradient(from var(--aura-angle) in oklch longer hue, transparent 10%, oklch(80% .15 0), oklch(80% .15 360), transparent 90%) } } .aura-holo { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), oklch(82% .17 327), oklch(75% .12 274), oklch(82% .11 191), oklch(91% .11 105), oklch(88% .08 68), oklch(82% .17 327) 10%); animation: aura var(--tw-duration, 20s) linear infinite } } .aura-dual { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), transparent 0%, transparent 40%, currentColor 50%) } } .aura-silver { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), oklch(30% 0 0), oklch(90% 0 0), oklch(60% 0 0), oklch(90% 0 0), oklch(50% 0 0), oklch(30% 0 0) 50%) } } .aura-gold { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), oklch(65.98% .1863 72.37), oklch(96.35% .0768 102.94), oklch(71.57% .1691 82.23), oklch(96.02% .0792 103.13), oklch(60.66% .1181 76.17), oklch(65.98% .1863 72.37) 50%) } } .aura-glow { @layer daisyui.l1.l2 { background-image: radial-gradient(closest-corner, currentColor 0%, #0000 90%); animation: none; &:before { animation: aura-glow var(--tw-duration, 6s) ease-out infinite } &:after { animation: aura-glow-after var(--tw-duration, 6s) ease-out infinite } } } .aura-xs { @layer daisyui.l1.l2 { --aura-padding: 0rem } } .aura-sm { @layer daisyui.l1.l2 { --aura-padding: .0625rem } } .aura-md { @layer daisyui.l1.l2 { --aura-padding: .125rem } } .aura-lg { @layer daisyui.l1.l2 { --aura-padding: .15625rem } } .aura-xl { @layer daisyui.l1.l2 { --aura-padding: .25rem } } @media (width>=640px) { .sm\:aura { @layer daisyui.l1.l2.l3 { --aura-padding: .125rem; padding: var(--aura-padding); border-radius: calc(var(--aura-padding) + var(--aura-radius, var(--radius-box))); animation: aura var(--tw-duration, 6s) linear infinite; background-image: conic-gradient(from var(--aura-angle), transparent 225deg, currentColor); display: inline-block; position: relative; &:has(>.card, >.alert) { --aura-radius: var(--radius-box) } &:has(>.btn, >.input, >.select) { --aura-radius: var(--radius-field) } &:has(>.checkbox, >.toggle, >.badge) { --aura-radius: var(--radius-selector) } &:before, &:after { animation: inherit; background-color: inherit; background-image: inherit; border-radius: inherit; z-index: 0; opacity: .7; filter: blur(.25rem); content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 50%; left: 50%; translate: -50% -50% } &:after { opacity: .3; filter: blur(1rem) } &>* { z-index: 1; position: relative } } } .sm\:aura-rainbow { @layer daisyui.l1.l2 { background: conic-gradient(from var(--aura-angle) in oklch longer hue, transparent 10%, oklch(80% .15 0), oklch(80% .15 360), transparent 90%) } } .sm\:aura-holo { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), oklch(82% .17 327), oklch(75% .12 274), oklch(82% .11 191), oklch(91% .11 105), oklch(88% .08 68), oklch(82% .17 327) 10%); animation: aura var(--tw-duration, 20s) linear infinite } } .sm\:aura-dual { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), transparent 0%, transparent 40%, currentColor 50%) } } .sm\:aura-silver { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), oklch(30% 0 0), oklch(90% 0 0), oklch(60% 0 0), oklch(90% 0 0), oklch(50% 0 0), oklch(30% 0 0) 50%) } } .sm\:aura-gold { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), oklch(65.98% .1863 72.37), oklch(96.35% .0768 102.94), oklch(71.57% .1691 82.23), oklch(96.02% .0792 103.13), oklch(60.66% .1181 76.17), oklch(65.98% .1863 72.37) 50%) } } .sm\:aura-glow { @layer daisyui.l1.l2 { background-image: radial-gradient(closest-corner, currentColor 0%, #0000 90%); animation: none; &:before { animation: aura-glow var(--tw-duration, 6s) ease-out infinite } &:after { animation: aura-glow-after var(--tw-duration, 6s) ease-out infinite } } } .sm\:aura-xs { @layer daisyui.l1.l2 { --aura-padding: 0rem } } .sm\:aura-sm { @layer daisyui.l1.l2 { --aura-padding: .0625rem } } .sm\:aura-md { @layer daisyui.l1.l2 { --aura-padding: .125rem } } .sm\:aura-lg { @layer daisyui.l1.l2 { --aura-padding: .15625rem } } .sm\:aura-xl { @layer daisyui.l1.l2 { --aura-padding: .25rem } } } @media (width>=768px) { .md\:aura { @layer daisyui.l1.l2.l3 { --aura-padding: .125rem; padding: var(--aura-padding); border-radius: calc(var(--aura-padding) + var(--aura-radius, var(--radius-box))); animation: aura var(--tw-duration, 6s) linear infinite; background-image: conic-gradient(from var(--aura-angle), transparent 225deg, currentColor); display: inline-block; position: relative; &:has(>.card, >.alert) { --aura-radius: var(--radius-box) } &:has(>.btn, >.input, >.select) { --aura-radius: var(--radius-field) } &:has(>.checkbox, >.toggle, >.badge) { --aura-radius: var(--radius-selector) } &:before, &:after { animation: inherit; background-color: inherit; background-image: inherit; border-radius: inherit; z-index: 0; opacity: .7; filter: blur(.25rem); content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 50%; left: 50%; translate: -50% -50% } &:after { opacity: .3; filter: blur(1rem) } &>* { z-index: 1; position: relative } } } .md\:aura-rainbow { @layer daisyui.l1.l2 { background: conic-gradient(from var(--aura-angle) in oklch longer hue, transparent 10%, oklch(80% .15 0), oklch(80% .15 360), transparent 90%) } } .md\:aura-holo { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), oklch(82% .17 327), oklch(75% .12 274), oklch(82% .11 191), oklch(91% .11 105), oklch(88% .08 68), oklch(82% .17 327) 10%); animation: aura var(--tw-duration, 20s) linear infinite } } .md\:aura-dual { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), transparent 0%, transparent 40%, currentColor 50%) } } .md\:aura-silver { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), oklch(30% 0 0), oklch(90% 0 0), oklch(60% 0 0), oklch(90% 0 0), oklch(50% 0 0), oklch(30% 0 0) 50%) } } .md\:aura-gold { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), oklch(65.98% .1863 72.37), oklch(96.35% .0768 102.94), oklch(71.57% .1691 82.23), oklch(96.02% .0792 103.13), oklch(60.66% .1181 76.17), oklch(65.98% .1863 72.37) 50%) } } .md\:aura-glow { @layer daisyui.l1.l2 { background-image: radial-gradient(closest-corner, currentColor 0%, #0000 90%); animation: none; &:before { animation: aura-glow var(--tw-duration, 6s) ease-out infinite } &:after { animation: aura-glow-after var(--tw-duration, 6s) ease-out infinite } } } .md\:aura-xs { @layer daisyui.l1.l2 { --aura-padding: 0rem } } .md\:aura-sm { @layer daisyui.l1.l2 { --aura-padding: .0625rem } } .md\:aura-md { @layer daisyui.l1.l2 { --aura-padding: .125rem } } .md\:aura-lg { @layer daisyui.l1.l2 { --aura-padding: .15625rem } } .md\:aura-xl { @layer daisyui.l1.l2 { --aura-padding: .25rem } } } @media (width>=1024px) { .lg\:aura { @layer daisyui.l1.l2.l3 { --aura-padding: .125rem; padding: var(--aura-padding); border-radius: calc(var(--aura-padding) + var(--aura-radius, var(--radius-box))); animation: aura var(--tw-duration, 6s) linear infinite; background-image: conic-gradient(from var(--aura-angle), transparent 225deg, currentColor); display: inline-block; position: relative; &:has(>.card, >.alert) { --aura-radius: var(--radius-box) } &:has(>.btn, >.input, >.select) { --aura-radius: var(--radius-field) } &:has(>.checkbox, >.toggle, >.badge) { --aura-radius: var(--radius-selector) } &:before, &:after { animation: inherit; background-color: inherit; background-image: inherit; border-radius: inherit; z-index: 0; opacity: .7; filter: blur(.25rem); content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 50%; left: 50%; translate: -50% -50% } &:after { opacity: .3; filter: blur(1rem) } &>* { z-index: 1; position: relative } } } .lg\:aura-rainbow { @layer daisyui.l1.l2 { background: conic-gradient(from var(--aura-angle) in oklch longer hue, transparent 10%, oklch(80% .15 0), oklch(80% .15 360), transparent 90%) } } .lg\:aura-holo { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), oklch(82% .17 327), oklch(75% .12 274), oklch(82% .11 191), oklch(91% .11 105), oklch(88% .08 68), oklch(82% .17 327) 10%); animation: aura var(--tw-duration, 20s) linear infinite } } .lg\:aura-dual { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), transparent 0%, transparent 40%, currentColor 50%) } } .lg\:aura-silver { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), oklch(30% 0 0), oklch(90% 0 0), oklch(60% 0 0), oklch(90% 0 0), oklch(50% 0 0), oklch(30% 0 0) 50%) } } .lg\:aura-gold { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), oklch(65.98% .1863 72.37), oklch(96.35% .0768 102.94), oklch(71.57% .1691 82.23), oklch(96.02% .0792 103.13), oklch(60.66% .1181 76.17), oklch(65.98% .1863 72.37) 50%) } } .lg\:aura-glow { @layer daisyui.l1.l2 { background-image: radial-gradient(closest-corner, currentColor 0%, #0000 90%); animation: none; &:before { animation: aura-glow var(--tw-duration, 6s) ease-out infinite } &:after { animation: aura-glow-after var(--tw-duration, 6s) ease-out infinite } } } .lg\:aura-xs { @layer daisyui.l1.l2 { --aura-padding: 0rem } } .lg\:aura-sm { @layer daisyui.l1.l2 { --aura-padding: .0625rem } } .lg\:aura-md { @layer daisyui.l1.l2 { --aura-padding: .125rem } } .lg\:aura-lg { @layer daisyui.l1.l2 { --aura-padding: .15625rem } } .lg\:aura-xl { @layer daisyui.l1.l2 { --aura-padding: .25rem } } } @media (width>=1280px) { .xl\:aura { @layer daisyui.l1.l2.l3 { --aura-padding: .125rem; padding: var(--aura-padding); border-radius: calc(var(--aura-padding) + var(--aura-radius, var(--radius-box))); animation: aura var(--tw-duration, 6s) linear infinite; background-image: conic-gradient(from var(--aura-angle), transparent 225deg, currentColor); display: inline-block; position: relative; &:has(>.card, >.alert) { --aura-radius: var(--radius-box) } &:has(>.btn, >.input, >.select) { --aura-radius: var(--radius-field) } &:has(>.checkbox, >.toggle, >.badge) { --aura-radius: var(--radius-selector) } &:before, &:after { animation: inherit; background-color: inherit; background-image: inherit; border-radius: inherit; z-index: 0; opacity: .7; filter: blur(.25rem); content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 50%; left: 50%; translate: -50% -50% } &:after { opacity: .3; filter: blur(1rem) } &>* { z-index: 1; position: relative } } } .xl\:aura-rainbow { @layer daisyui.l1.l2 { background: conic-gradient(from var(--aura-angle) in oklch longer hue, transparent 10%, oklch(80% .15 0), oklch(80% .15 360), transparent 90%) } } .xl\:aura-holo { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), oklch(82% .17 327), oklch(75% .12 274), oklch(82% .11 191), oklch(91% .11 105), oklch(88% .08 68), oklch(82% .17 327) 10%); animation: aura var(--tw-duration, 20s) linear infinite } } .xl\:aura-dual { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), transparent 0%, transparent 40%, currentColor 50%) } } .xl\:aura-silver { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), oklch(30% 0 0), oklch(90% 0 0), oklch(60% 0 0), oklch(90% 0 0), oklch(50% 0 0), oklch(30% 0 0) 50%) } } .xl\:aura-gold { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), oklch(65.98% .1863 72.37), oklch(96.35% .0768 102.94), oklch(71.57% .1691 82.23), oklch(96.02% .0792 103.13), oklch(60.66% .1181 76.17), oklch(65.98% .1863 72.37) 50%) } } .xl\:aura-glow { @layer daisyui.l1.l2 { background-image: radial-gradient(closest-corner, currentColor 0%, #0000 90%); animation: none; &:before { animation: aura-glow var(--tw-duration, 6s) ease-out infinite } &:after { animation: aura-glow-after var(--tw-duration, 6s) ease-out infinite } } } .xl\:aura-xs { @layer daisyui.l1.l2 { --aura-padding: 0rem } } .xl\:aura-sm { @layer daisyui.l1.l2 { --aura-padding: .0625rem } } .xl\:aura-md { @layer daisyui.l1.l2 { --aura-padding: .125rem } } .xl\:aura-lg { @layer daisyui.l1.l2 { --aura-padding: .15625rem } } .xl\:aura-xl { @layer daisyui.l1.l2 { --aura-padding: .25rem } } } @media (width>=1536px) { .\32 xl\:aura { @layer daisyui.l1.l2.l3 { --aura-padding: .125rem; padding: var(--aura-padding); border-radius: calc(var(--aura-padding) + var(--aura-radius, var(--radius-box))); animation: aura var(--tw-duration, 6s) linear infinite; background-image: conic-gradient(from var(--aura-angle), transparent 225deg, currentColor); display: inline-block; position: relative; &:has(>.card, >.alert) { --aura-radius: var(--radius-box) } &:has(>.btn, >.input, >.select) { --aura-radius: var(--radius-field) } &:has(>.checkbox, >.toggle, >.badge) { --aura-radius: var(--radius-selector) } &:before, &:after { animation: inherit; background-color: inherit; background-image: inherit; border-radius: inherit; z-index: 0; opacity: .7; filter: blur(.25rem); content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 50%; left: 50%; translate: -50% -50% } &:after { opacity: .3; filter: blur(1rem) } &>* { z-index: 1; position: relative } } } .\32 xl\:aura-rainbow { @layer daisyui.l1.l2 { background: conic-gradient(from var(--aura-angle) in oklch longer hue, transparent 10%, oklch(80% .15 0), oklch(80% .15 360), transparent 90%) } } .\32 xl\:aura-holo { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), oklch(82% .17 327), oklch(75% .12 274), oklch(82% .11 191), oklch(91% .11 105), oklch(88% .08 68), oklch(82% .17 327) 10%); animation: aura var(--tw-duration, 20s) linear infinite } } .\32 xl\:aura-dual { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), transparent 0%, transparent 40%, currentColor 50%) } } .\32 xl\:aura-silver { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), oklch(30% 0 0), oklch(90% 0 0), oklch(60% 0 0), oklch(90% 0 0), oklch(50% 0 0), oklch(30% 0 0) 50%) } } .\32 xl\:aura-gold { @layer daisyui.l1.l2 { background-image: repeating-conic-gradient(from var(--aura-angle), oklch(65.98% .1863 72.37), oklch(96.35% .0768 102.94), oklch(71.57% .1691 82.23), oklch(96.02% .0792 103.13), oklch(60.66% .1181 76.17), oklch(65.98% .1863 72.37) 50%) } } .\32 xl\:aura-glow { @layer daisyui.l1.l2 { background-image: radial-gradient(closest-corner, currentColor 0%, #0000 90%); animation: none; &:before { animation: aura-glow var(--tw-duration, 6s) ease-out infinite } &:after { animation: aura-glow-after var(--tw-duration, 6s) ease-out infinite } } } .\32 xl\:aura-xs { @layer daisyui.l1.l2 { --aura-padding: 0rem } } .\32 xl\:aura-sm { @layer daisyui.l1.l2 { --aura-padding: .0625rem } } .\32 xl\:aura-md { @layer daisyui.l1.l2 { --aura-padding: .125rem } } .\32 xl\:aura-lg { @layer daisyui.l1.l2 { --aura-padding: .15625rem } } .\32 xl\:aura-xl { @layer daisyui.l1.l2 { --aura-padding: .25rem } } } @keyframes aura { to { --aura-angle: 360deg; transform: translateZ(1px) } } @keyframes aura-glow { 20%, 80% { opacity: .7; filter: blur(.25rem) } 50% { opacity: 1; filter: blur(.75rem) } } @keyframes aura-glow-after { 20%, 80% { opacity: .3; filter: blur(1rem) } 50% { opacity: .6; filter: blur(1.5rem) } } .hover-3d { @layer daisyui.l1.l2.l3 { perspective: 75rem; --transform: 0, 0; --shine: 100% 100%; --shadow: 0rem 0rem 0rem; --ease: linear(0, .931 13.8%, 1.196 21.4%, 1.343 29.8%, 1.378 36%, 1.365 43.2%, 1.059 78%, 1); filter: drop-shadow(var(--shadow) .1rem #00000003) drop-shadow(var(--shadow) .2rem #00000003) drop-shadow(var(--shadow) .3rem #00000003) drop-shadow(var(--shadow) .4rem #00000003); transition: filter .4s ease-out; display: inline-grid; &>:nth-child(n+2) { isolation: isolate; z-index: 1 } &>:first-child { transform: rotate3d(var(--transform), 0, 10deg); transition: transform var(--ease) .5s, scale var(--ease) .5s, outline-color ease-out .5s; outline-offset: -1px; outline: .5px solid #0000; grid-area: 1/1/4/4; overflow: hidden; &:before { content: ""; pointer-events: none; z-index: 1; opacity: 0; filter: blur(.75rem); width: 33.3333%; height: 33.3333%; scale: 5; translate: var(--shine); background-image: radial-gradient(circle, #fff3 10%, #0000 50%); transition: translate .4s ease-out, opacity .4s ease-out; position: absolute } } &:hover { --ease: linear(0, .708 15.2%, .927 23.6%, 1.067 33%, 1.12 41%, 1.13 50.2%, 1.019 83.2%, 1); &>:first-child { outline-color: #fff1; &:before, &:after { opacity: 1 } } } &>:nth-child(n+2) { scale: 1.2 } &>:nth-child(2) { grid-area: 1/1/2/2 } &>:nth-child(3) { grid-area: 1/2/2/3 } &>:nth-child(4) { grid-area: 1/3/2/4 } &>:nth-child(5) { grid-area: 2/1/3/2 } &>:nth-child(6) { grid-area: 2/3/3/4 } &>:nth-child(7) { grid-area: 3/1/4/2 } &>:nth-child(8) { grid-area: 3/2/4/3 } &>:nth-child(9) { grid-area: 3/3/4/4 } &:hover { &>:first-child { scale: 1.05 } } &:has(>:nth-child(2):hover) { --transform: -1, 1; --shine: 0% 0%; --shadow: -.5rem -.5rem } &:has(>:nth-child(3):hover) { --transform: -1, 0; --shine: 100% 0%; --shadow: 0rem -.5rem } &:has(>:nth-child(4):hover) { --transform: -1, -1; --shine: 200% 0%; --shadow: .5rem -.5rem } &:has(>:nth-child(5):hover) { --transform: 0, 1; --shine: 0% 100%; --shadow: -.5rem 0rem } &:has(>:nth-child(6):hover) { --transform: 0, -1; --shine: 200% 100%; --shadow: .5rem 0rem } &:has(>:nth-child(7):hover) { --transform: 1, 1; --shine: 0% 200%; --shadow: -.5rem .5rem } &:has(>:nth-child(8):hover) { --transform: 1, 0; --shine: 100% 200%; --shadow: 0rem .5rem } &:has(>:nth-child(9):hover) { --transform: 1, -1; --shine: 200% 200%; --shadow: .5rem .5rem } } } .drawer { @layer daisyui.l1.l2.l3 { grid-auto-columns: max-content auto; width: 100%; display: grid; position: relative } } .drawer-content { @layer daisyui.l1.l2.l3 { grid-row-start: 1; grid-column-start: 2; min-width: 0 } } :where(.drawer-side) { @layer daisyui.l1.l2.l3 { overflow: hidden } } .drawer-side { @layer daisyui.l1.l2.l3 { pointer-events: none; visibility: hidden; inset-inline-start: 0; z-index: 10; overscroll-behavior: contain; opacity: 0; width: 100%; transition: opacity .2s ease-out .1s allow-discrete, visibility .3s ease-out .1s allow-discrete; background-color: #0000; grid-template-rows: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr)); grid-row-start: 1; grid-column-start: 1; place-items: flex-start start; height: 100dvh; display: grid; position: fixed; top: 0; &>.drawer-overlay { cursor: pointer; background-color: oklch(0% 0 0/.4); place-self: stretch stretch; position: sticky; top: 0 } &>* { grid-row-start: 1; grid-column-start: 1 } &>:not(.drawer-overlay) { will-change: transform; transition: translate .3s ease-out, width .2s ease-out; translate: -100%; [dir=rtl] & { translate: 100% } } } } .drawer-toggle { @layer daisyui.l1.l2.l3 { appearance: none; opacity: 0; width: 0; height: 0; position: fixed; :where(&:checked~.drawer-side) { scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop, 0) * .4)); &>:not(.drawer-overlay) { will-change: auto; transform: none } } :where(:root:has(&:checked)) { --page-scroll-lock: } } @layer daisyui.l1.l2 { :where(&:checked~.drawer-side) { pointer-events: auto; visibility: visible; opacity: 1; overflow-y: auto; &>:not(.drawer-overlay) { translate: 0% } } &:focus-visible~.drawer-content label.drawer-button { outline-offset: 2px; outline: 2px solid } } } .drawer-end { @layer daisyui.l1.l2 { grid-auto-columns: auto max-content; &>.drawer-toggle { &~.drawer-content { grid-column-start: 1 } &~.drawer-side { grid-column-start: 2; justify-items: end } &~.drawer-side>:not(.drawer-overlay) { translate: 100%; [dir=rtl] & { translate: -100% } } &:checked~.drawer-side>:not(.drawer-overlay) { translate: 0% } } } } .drawer-open { @layer daisyui.l1.l2.l3 { &>.drawer-toggle:checked { &~.drawer-side { scrollbar-color: revert-layer } :root:has(&) { --page-scroll-lock: revert-layer } } } @layer daisyui.l1.l2 { &>.drawer-side { overflow-y: auto } &>.drawer-toggle { display: none; &~.drawer-side { pointer-events: auto; visibility: visible; overscroll-behavior: auto; opacity: 1; width: auto; display: block; position: sticky; &>.drawer-overlay { cursor: default; background-color: #0000 } } &:checked~.drawer-side { pointer-events: auto; visibility: visible } } } @layer daisyui.l1 { &>.drawer-toggle~.drawer-side>:not(.drawer-overlay) { translate: 0%; [dir=rtl] & { translate: 0% } } } } @media (width>=640px) { .sm\:drawer { @layer daisyui.l1.l2.l3 { grid-auto-columns: max-content auto; width: 100%; display: grid; position: relative } } .sm\:drawer-content { @layer daisyui.l1.l2.l3 { grid-row-start: 1; grid-column-start: 2; min-width: 0 } } :where(.drawer-side) { @layer daisyui.l1.l2.l3 { overflow: hidden } } .sm\:drawer-side { @layer daisyui.l1.l2.l3 { pointer-events: none; visibility: hidden; inset-inline-start: 0; z-index: 10; overscroll-behavior: contain; opacity: 0; width: 100%; transition: opacity .2s ease-out .1s allow-discrete, visibility .3s ease-out .1s allow-discrete; background-color: #0000; grid-template-rows: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr)); grid-row-start: 1; grid-column-start: 1; place-items: flex-start start; height: 100dvh; display: grid; position: fixed; top: 0; &>.drawer-overlay { cursor: pointer; background-color: oklch(0% 0 0/.4); place-self: stretch stretch; position: sticky; top: 0 } &>* { grid-row-start: 1; grid-column-start: 1 } &>:not(.drawer-overlay) { will-change: transform; transition: translate .3s ease-out, width .2s ease-out; translate: -100%; [dir=rtl] & { translate: 100% } } } } .sm\:drawer-toggle { @layer daisyui.l1.l2.l3 { appearance: none; opacity: 0; width: 0; height: 0; position: fixed; :where(&:checked~.drawer-side) { scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop, 0) * .4)); &>:not(.drawer-overlay) { will-change: auto; transform: none } } :where(:root:has(&:checked)) { --page-scroll-lock: } } @layer daisyui.l1.l2 { :where(&:checked~.drawer-side) { pointer-events: auto; visibility: visible; opacity: 1; overflow-y: auto; &>:not(.drawer-overlay) { translate: 0% } } &:focus-visible~.drawer-content label.drawer-button { outline-offset: 2px; outline: 2px solid } } } .sm\:drawer-end { @layer daisyui.l1.l2 { grid-auto-columns: auto max-content; &>.drawer-toggle { &~.drawer-content { grid-column-start: 1 } &~.drawer-side { grid-column-start: 2; justify-items: end } &~.drawer-side>:not(.drawer-overlay) { translate: 100%; [dir=rtl] & { translate: -100% } } &:checked~.drawer-side>:not(.drawer-overlay) { translate: 0% } } } } .sm\:drawer-open { @layer daisyui.l1.l2.l3 { &>.drawer-toggle:checked { &~.drawer-side { scrollbar-color: revert-layer } :root:has(&) { --page-scroll-lock: revert-layer } } } @layer daisyui.l1.l2 { &>.drawer-side { overflow-y: auto } &>.drawer-toggle { display: none; &~.drawer-side { pointer-events: auto; visibility: visible; overscroll-behavior: auto; opacity: 1; width: auto; display: block; position: sticky; &>.drawer-overlay { cursor: default; background-color: #0000 } } &:checked~.drawer-side { pointer-events: auto; visibility: visible } } } @layer daisyui.l1 { &>.drawer-toggle~.drawer-side>:not(.drawer-overlay) { translate: 0%; [dir=rtl] & { translate: 0% } } } } } @media (width>=768px) { .md\:drawer { @layer daisyui.l1.l2.l3 { grid-auto-columns: max-content auto; width: 100%; display: grid; position: relative } } .md\:drawer-content { @layer daisyui.l1.l2.l3 { grid-row-start: 1; grid-column-start: 2; min-width: 0 } } :where(.drawer-side) { @layer daisyui.l1.l2.l3 { overflow: hidden } } .md\:drawer-side { @layer daisyui.l1.l2.l3 { pointer-events: none; visibility: hidden; inset-inline-start: 0; z-index: 10; overscroll-behavior: contain; opacity: 0; width: 100%; transition: opacity .2s ease-out .1s allow-discrete, visibility .3s ease-out .1s allow-discrete; background-color: #0000; grid-template-rows: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr)); grid-row-start: 1; grid-column-start: 1; place-items: flex-start start; height: 100dvh; display: grid; position: fixed; top: 0; &>.drawer-overlay { cursor: pointer; background-color: oklch(0% 0 0/.4); place-self: stretch stretch; position: sticky; top: 0 } &>* { grid-row-start: 1; grid-column-start: 1 } &>:not(.drawer-overlay) { will-change: transform; transition: translate .3s ease-out, width .2s ease-out; translate: -100%; [dir=rtl] & { translate: 100% } } } } .md\:drawer-toggle { @layer daisyui.l1.l2.l3 { appearance: none; opacity: 0; width: 0; height: 0; position: fixed; :where(&:checked~.drawer-side) { scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop, 0) * .4)); &>:not(.drawer-overlay) { will-change: auto; transform: none } } :where(:root:has(&:checked)) { --page-scroll-lock: } } @layer daisyui.l1.l2 { :where(&:checked~.drawer-side) { pointer-events: auto; visibility: visible; opacity: 1; overflow-y: auto; &>:not(.drawer-overlay) { translate: 0% } } &:focus-visible~.drawer-content label.drawer-button { outline-offset: 2px; outline: 2px solid } } } .md\:drawer-end { @layer daisyui.l1.l2 { grid-auto-columns: auto max-content; &>.drawer-toggle { &~.drawer-content { grid-column-start: 1 } &~.drawer-side { grid-column-start: 2; justify-items: end } &~.drawer-side>:not(.drawer-overlay) { translate: 100%; [dir=rtl] & { translate: -100% } } &:checked~.drawer-side>:not(.drawer-overlay) { translate: 0% } } } } .md\:drawer-open { @layer daisyui.l1.l2.l3 { &>.drawer-toggle:checked { &~.drawer-side { scrollbar-color: revert-layer } :root:has(&) { --page-scroll-lock: revert-layer } } } @layer daisyui.l1.l2 { &>.drawer-side { overflow-y: auto } &>.drawer-toggle { display: none; &~.drawer-side { pointer-events: auto; visibility: visible; overscroll-behavior: auto; opacity: 1; width: auto; display: block; position: sticky; &>.drawer-overlay { cursor: default; background-color: #0000 } } &:checked~.drawer-side { pointer-events: auto; visibility: visible } } } @layer daisyui.l1 { &>.drawer-toggle~.drawer-side>:not(.drawer-overlay) { translate: 0%; [dir=rtl] & { translate: 0% } } } } } @media (width>=1024px) { .lg\:drawer { @layer daisyui.l1.l2.l3 { grid-auto-columns: max-content auto; width: 100%; display: grid; position: relative } } .lg\:drawer-content { @layer daisyui.l1.l2.l3 { grid-row-start: 1; grid-column-start: 2; min-width: 0 } } :where(.drawer-side) { @layer daisyui.l1.l2.l3 { overflow: hidden } } .lg\:drawer-side { @layer daisyui.l1.l2.l3 { pointer-events: none; visibility: hidden; inset-inline-start: 0; z-index: 10; overscroll-behavior: contain; opacity: 0; width: 100%; transition: opacity .2s ease-out .1s allow-discrete, visibility .3s ease-out .1s allow-discrete; background-color: #0000; grid-template-rows: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr)); grid-row-start: 1; grid-column-start: 1; place-items: flex-start start; height: 100dvh; display: grid; position: fixed; top: 0; &>.drawer-overlay { cursor: pointer; background-color: oklch(0% 0 0/.4); place-self: stretch stretch; position: sticky; top: 0 } &>* { grid-row-start: 1; grid-column-start: 1 } &>:not(.drawer-overlay) { will-change: transform; transition: translate .3s ease-out, width .2s ease-out; translate: -100%; [dir=rtl] & { translate: 100% } } } } .lg\:drawer-toggle { @layer daisyui.l1.l2.l3 { appearance: none; opacity: 0; width: 0; height: 0; position: fixed; :where(&:checked~.drawer-side) { scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop, 0) * .4)); &>:not(.drawer-overlay) { will-change: auto; transform: none } } :where(:root:has(&:checked)) { --page-scroll-lock: } } @layer daisyui.l1.l2 { :where(&:checked~.drawer-side) { pointer-events: auto; visibility: visible; opacity: 1; overflow-y: auto; &>:not(.drawer-overlay) { translate: 0% } } &:focus-visible~.drawer-content label.drawer-button { outline-offset: 2px; outline: 2px solid } } } .lg\:drawer-end { @layer daisyui.l1.l2 { grid-auto-columns: auto max-content; &>.drawer-toggle { &~.drawer-content { grid-column-start: 1 } &~.drawer-side { grid-column-start: 2; justify-items: end } &~.drawer-side>:not(.drawer-overlay) { translate: 100%; [dir=rtl] & { translate: -100% } } &:checked~.drawer-side>:not(.drawer-overlay) { translate: 0% } } } } .lg\:drawer-open { @layer daisyui.l1.l2.l3 { &>.drawer-toggle:checked { &~.drawer-side { scrollbar-color: revert-layer } :root:has(&) { --page-scroll-lock: revert-layer } } } @layer daisyui.l1.l2 { &>.drawer-side { overflow-y: auto } &>.drawer-toggle { display: none; &~.drawer-side { pointer-events: auto; visibility: visible; overscroll-behavior: auto; opacity: 1; width: auto; display: block; position: sticky; &>.drawer-overlay { cursor: default; background-color: #0000 } } &:checked~.drawer-side { pointer-events: auto; visibility: visible } } } @layer daisyui.l1 { &>.drawer-toggle~.drawer-side>:not(.drawer-overlay) { translate: 0%; [dir=rtl] & { translate: 0% } } } } } @media (width>=1280px) { .xl\:drawer { @layer daisyui.l1.l2.l3 { grid-auto-columns: max-content auto; width: 100%; display: grid; position: relative } } .xl\:drawer-content { @layer daisyui.l1.l2.l3 { grid-row-start: 1; grid-column-start: 2; min-width: 0 } } :where(.drawer-side) { @layer daisyui.l1.l2.l3 { overflow: hidden } } .xl\:drawer-side { @layer daisyui.l1.l2.l3 { pointer-events: none; visibility: hidden; inset-inline-start: 0; z-index: 10; overscroll-behavior: contain; opacity: 0; width: 100%; transition: opacity .2s ease-out .1s allow-discrete, visibility .3s ease-out .1s allow-discrete; background-color: #0000; grid-template-rows: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr)); grid-row-start: 1; grid-column-start: 1; place-items: flex-start start; height: 100dvh; display: grid; position: fixed; top: 0; &>.drawer-overlay { cursor: pointer; background-color: oklch(0% 0 0/.4); place-self: stretch stretch; position: sticky; top: 0 } &>* { grid-row-start: 1; grid-column-start: 1 } &>:not(.drawer-overlay) { will-change: transform; transition: translate .3s ease-out, width .2s ease-out; translate: -100%; [dir=rtl] & { translate: 100% } } } } .xl\:drawer-toggle { @layer daisyui.l1.l2.l3 { appearance: none; opacity: 0; width: 0; height: 0; position: fixed; :where(&:checked~.drawer-side) { scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop, 0) * .4)); &>:not(.drawer-overlay) { will-change: auto; transform: none } } :where(:root:has(&:checked)) { --page-scroll-lock: } } @layer daisyui.l1.l2 { :where(&:checked~.drawer-side) { pointer-events: auto; visibility: visible; opacity: 1; overflow-y: auto; &>:not(.drawer-overlay) { translate: 0% } } &:focus-visible~.drawer-content label.drawer-button { outline-offset: 2px; outline: 2px solid } } } .xl\:drawer-end { @layer daisyui.l1.l2 { grid-auto-columns: auto max-content; &>.drawer-toggle { &~.drawer-content { grid-column-start: 1 } &~.drawer-side { grid-column-start: 2; justify-items: end } &~.drawer-side>:not(.drawer-overlay) { translate: 100%; [dir=rtl] & { translate: -100% } } &:checked~.drawer-side>:not(.drawer-overlay) { translate: 0% } } } } .xl\:drawer-open { @layer daisyui.l1.l2.l3 { &>.drawer-toggle:checked { &~.drawer-side { scrollbar-color: revert-layer } :root:has(&) { --page-scroll-lock: revert-layer } } } @layer daisyui.l1.l2 { &>.drawer-side { overflow-y: auto } &>.drawer-toggle { display: none; &~.drawer-side { pointer-events: auto; visibility: visible; overscroll-behavior: auto; opacity: 1; width: auto; display: block; position: sticky; &>.drawer-overlay { cursor: default; background-color: #0000 } } &:checked~.drawer-side { pointer-events: auto; visibility: visible } } } @layer daisyui.l1 { &>.drawer-toggle~.drawer-side>:not(.drawer-overlay) { translate: 0%; [dir=rtl] & { translate: 0% } } } } } @media (width>=1536px) { .\32 xl\:drawer { @layer daisyui.l1.l2.l3 { grid-auto-columns: max-content auto; width: 100%; display: grid; position: relative } } .\32 xl\:drawer-content { @layer daisyui.l1.l2.l3 { grid-row-start: 1; grid-column-start: 2; min-width: 0 } } :where(.drawer-side) { @layer daisyui.l1.l2.l3 { overflow: hidden } } .\32 xl\:drawer-side { @layer daisyui.l1.l2.l3 { pointer-events: none; visibility: hidden; inset-inline-start: 0; z-index: 10; overscroll-behavior: contain; opacity: 0; width: 100%; transition: opacity .2s ease-out .1s allow-discrete, visibility .3s ease-out .1s allow-discrete; background-color: #0000; grid-template-rows: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr)); grid-row-start: 1; grid-column-start: 1; place-items: flex-start start; height: 100dvh; display: grid; position: fixed; top: 0; &>.drawer-overlay { cursor: pointer; background-color: oklch(0% 0 0/.4); place-self: stretch stretch; position: sticky; top: 0 } &>* { grid-row-start: 1; grid-column-start: 1 } &>:not(.drawer-overlay) { will-change: transform; transition: translate .3s ease-out, width .2s ease-out; translate: -100%; [dir=rtl] & { translate: 100% } } } } .\32 xl\:drawer-toggle { @layer daisyui.l1.l2.l3 { appearance: none; opacity: 0; width: 0; height: 0; position: fixed; :where(&:checked~.drawer-side) { scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop, 0) * .4)); &>:not(.drawer-overlay) { will-change: auto; transform: none } } :where(:root:has(&:checked)) { --page-scroll-lock: } } @layer daisyui.l1.l2 { :where(&:checked~.drawer-side) { pointer-events: auto; visibility: visible; opacity: 1; overflow-y: auto; &>:not(.drawer-overlay) { translate: 0% } } &:focus-visible~.drawer-content label.drawer-button { outline-offset: 2px; outline: 2px solid } } } .\32 xl\:drawer-end { @layer daisyui.l1.l2 { grid-auto-columns: auto max-content; &>.drawer-toggle { &~.drawer-content { grid-column-start: 1 } &~.drawer-side { grid-column-start: 2; justify-items: end } &~.drawer-side>:not(.drawer-overlay) { translate: 100%; [dir=rtl] & { translate: -100% } } &:checked~.drawer-side>:not(.drawer-overlay) { translate: 0% } } } } .\32 xl\:drawer-open { @layer daisyui.l1.l2.l3 { &>.drawer-toggle:checked { &~.drawer-side { scrollbar-color: revert-layer } :root:has(&) { --page-scroll-lock: revert-layer } } } @layer daisyui.l1.l2 { &>.drawer-side { overflow-y: auto } &>.drawer-toggle { display: none; &~.drawer-side { pointer-events: auto; visibility: visible; overscroll-behavior: auto; opacity: 1; width: auto; display: block; position: sticky; &>.drawer-overlay { cursor: default; background-color: #0000 } } &:checked~.drawer-side { pointer-events: auto; visibility: visible } } } @layer daisyui.l1 { &>.drawer-toggle~.drawer-side>:not(.drawer-overlay) { translate: 0%; [dir=rtl] & { translate: 0% } } } } } .progress { @layer daisyui.l1.l2.l3 { appearance: none; border-radius: var(--radius-box); background-color: color-mix(in oklab, currentcolor 20%, transparent); width: 100%; height: .5rem; color: var(--color-base-content); position: relative; overflow: hidden; &:indeterminate { background-image: repeating-linear-gradient(90deg, currentColor -1% 10%, #0000 10% 90%); background-position-x: 15%; background-size: 200%; @media (prefers-reduced-motion:no-preference) { animation: 5s ease-in-out infinite progress } @supports ((-moz-appearance:none)) { &::-moz-progress-bar { background-color: #0000; @media (prefers-reduced-motion:no-preference) { background-image: repeating-linear-gradient(90deg, currentColor -1% 10%, #0000 10% 90%); background-position-x: 15%; background-size: 200%; animation: 5s ease-in-out infinite progress } } } } @supports ((-moz-appearance:none)) { &::-moz-progress-bar { border-radius: var(--radius-box); background-color: currentColor; @media (prefers-reduced-motion:no-preference) { transition: inline-size .3s } } } @supports ((-webkit-appearance:none)) { &::-webkit-progress-bar { border-radius: var(--radius-box); background-color: #0000 } &::-webkit-progress-value { border-radius: var(--radius-box); background-color: currentColor; @media (prefers-reduced-motion:no-preference) { transition: inline-size .3s } } } } } .progress-primary { @layer daisyui.l1.l2 { color: var(--color-primary) } } .progress-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary) } } .progress-accent { @layer daisyui.l1.l2 { color: var(--color-accent) } } .progress-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral) } } .progress-info { @layer daisyui.l1.l2 { color: var(--color-info) } } .progress-success { @layer daisyui.l1.l2 { color: var(--color-success) } } .progress-warning { @layer daisyui.l1.l2 { color: var(--color-warning) } } .progress-error { @layer daisyui.l1.l2 { color: var(--color-error) } } @media (width>=640px) { .sm\:progress { @layer daisyui.l1.l2.l3 { appearance: none; border-radius: var(--radius-box); background-color: color-mix(in oklab, currentcolor 20%, transparent); width: 100%; height: .5rem; color: var(--color-base-content); position: relative; overflow: hidden; &:indeterminate { background-image: repeating-linear-gradient(90deg, currentColor -1% 10%, #0000 10% 90%); background-position-x: 15%; background-size: 200%; @media (prefers-reduced-motion:no-preference) { animation: 5s ease-in-out infinite progress } @supports ((-moz-appearance:none)) { &::-moz-progress-bar { background-color: #0000; @media (prefers-reduced-motion:no-preference) { background-image: repeating-linear-gradient(90deg, currentColor -1% 10%, #0000 10% 90%); background-position-x: 15%; background-size: 200%; animation: 5s ease-in-out infinite progress } } } } @supports ((-moz-appearance:none)) { &::-moz-progress-bar { border-radius: var(--radius-box); background-color: currentColor; @media (prefers-reduced-motion:no-preference) { transition: inline-size .3s } } } @supports ((-webkit-appearance:none)) { &::-webkit-progress-bar { border-radius: var(--radius-box); background-color: #0000 } &::-webkit-progress-value { border-radius: var(--radius-box); background-color: currentColor; @media (prefers-reduced-motion:no-preference) { transition: inline-size .3s } } } } } .sm\:progress-primary { @layer daisyui.l1.l2 { color: var(--color-primary) } } .sm\:progress-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary) } } .sm\:progress-accent { @layer daisyui.l1.l2 { color: var(--color-accent) } } .sm\:progress-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral) } } .sm\:progress-info { @layer daisyui.l1.l2 { color: var(--color-info) } } .sm\:progress-success { @layer daisyui.l1.l2 { color: var(--color-success) } } .sm\:progress-warning { @layer daisyui.l1.l2 { color: var(--color-warning) } } .sm\:progress-error { @layer daisyui.l1.l2 { color: var(--color-error) } } } @media (width>=768px) { .md\:progress { @layer daisyui.l1.l2.l3 { appearance: none; border-radius: var(--radius-box); background-color: color-mix(in oklab, currentcolor 20%, transparent); width: 100%; height: .5rem; color: var(--color-base-content); position: relative; overflow: hidden; &:indeterminate { background-image: repeating-linear-gradient(90deg, currentColor -1% 10%, #0000 10% 90%); background-position-x: 15%; background-size: 200%; @media (prefers-reduced-motion:no-preference) { animation: 5s ease-in-out infinite progress } @supports ((-moz-appearance:none)) { &::-moz-progress-bar { background-color: #0000; @media (prefers-reduced-motion:no-preference) { background-image: repeating-linear-gradient(90deg, currentColor -1% 10%, #0000 10% 90%); background-position-x: 15%; background-size: 200%; animation: 5s ease-in-out infinite progress } } } } @supports ((-moz-appearance:none)) { &::-moz-progress-bar { border-radius: var(--radius-box); background-color: currentColor; @media (prefers-reduced-motion:no-preference) { transition: inline-size .3s } } } @supports ((-webkit-appearance:none)) { &::-webkit-progress-bar { border-radius: var(--radius-box); background-color: #0000 } &::-webkit-progress-value { border-radius: var(--radius-box); background-color: currentColor; @media (prefers-reduced-motion:no-preference) { transition: inline-size .3s } } } } } .md\:progress-primary { @layer daisyui.l1.l2 { color: var(--color-primary) } } .md\:progress-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary) } } .md\:progress-accent { @layer daisyui.l1.l2 { color: var(--color-accent) } } .md\:progress-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral) } } .md\:progress-info { @layer daisyui.l1.l2 { color: var(--color-info) } } .md\:progress-success { @layer daisyui.l1.l2 { color: var(--color-success) } } .md\:progress-warning { @layer daisyui.l1.l2 { color: var(--color-warning) } } .md\:progress-error { @layer daisyui.l1.l2 { color: var(--color-error) } } } @media (width>=1024px) { .lg\:progress { @layer daisyui.l1.l2.l3 { appearance: none; border-radius: var(--radius-box); background-color: color-mix(in oklab, currentcolor 20%, transparent); width: 100%; height: .5rem; color: var(--color-base-content); position: relative; overflow: hidden; &:indeterminate { background-image: repeating-linear-gradient(90deg, currentColor -1% 10%, #0000 10% 90%); background-position-x: 15%; background-size: 200%; @media (prefers-reduced-motion:no-preference) { animation: 5s ease-in-out infinite progress } @supports ((-moz-appearance:none)) { &::-moz-progress-bar { background-color: #0000; @media (prefers-reduced-motion:no-preference) { background-image: repeating-linear-gradient(90deg, currentColor -1% 10%, #0000 10% 90%); background-position-x: 15%; background-size: 200%; animation: 5s ease-in-out infinite progress } } } } @supports ((-moz-appearance:none)) { &::-moz-progress-bar { border-radius: var(--radius-box); background-color: currentColor; @media (prefers-reduced-motion:no-preference) { transition: inline-size .3s } } } @supports ((-webkit-appearance:none)) { &::-webkit-progress-bar { border-radius: var(--radius-box); background-color: #0000 } &::-webkit-progress-value { border-radius: var(--radius-box); background-color: currentColor; @media (prefers-reduced-motion:no-preference) { transition: inline-size .3s } } } } } .lg\:progress-primary { @layer daisyui.l1.l2 { color: var(--color-primary) } } .lg\:progress-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary) } } .lg\:progress-accent { @layer daisyui.l1.l2 { color: var(--color-accent) } } .lg\:progress-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral) } } .lg\:progress-info { @layer daisyui.l1.l2 { color: var(--color-info) } } .lg\:progress-success { @layer daisyui.l1.l2 { color: var(--color-success) } } .lg\:progress-warning { @layer daisyui.l1.l2 { color: var(--color-warning) } } .lg\:progress-error { @layer daisyui.l1.l2 { color: var(--color-error) } } } @media (width>=1280px) { .xl\:progress { @layer daisyui.l1.l2.l3 { appearance: none; border-radius: var(--radius-box); background-color: color-mix(in oklab, currentcolor 20%, transparent); width: 100%; height: .5rem; color: var(--color-base-content); position: relative; overflow: hidden; &:indeterminate { background-image: repeating-linear-gradient(90deg, currentColor -1% 10%, #0000 10% 90%); background-position-x: 15%; background-size: 200%; @media (prefers-reduced-motion:no-preference) { animation: 5s ease-in-out infinite progress } @supports ((-moz-appearance:none)) { &::-moz-progress-bar { background-color: #0000; @media (prefers-reduced-motion:no-preference) { background-image: repeating-linear-gradient(90deg, currentColor -1% 10%, #0000 10% 90%); background-position-x: 15%; background-size: 200%; animation: 5s ease-in-out infinite progress } } } } @supports ((-moz-appearance:none)) { &::-moz-progress-bar { border-radius: var(--radius-box); background-color: currentColor; @media (prefers-reduced-motion:no-preference) { transition: inline-size .3s } } } @supports ((-webkit-appearance:none)) { &::-webkit-progress-bar { border-radius: var(--radius-box); background-color: #0000 } &::-webkit-progress-value { border-radius: var(--radius-box); background-color: currentColor; @media (prefers-reduced-motion:no-preference) { transition: inline-size .3s } } } } } .xl\:progress-primary { @layer daisyui.l1.l2 { color: var(--color-primary) } } .xl\:progress-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary) } } .xl\:progress-accent { @layer daisyui.l1.l2 { color: var(--color-accent) } } .xl\:progress-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral) } } .xl\:progress-info { @layer daisyui.l1.l2 { color: var(--color-info) } } .xl\:progress-success { @layer daisyui.l1.l2 { color: var(--color-success) } } .xl\:progress-warning { @layer daisyui.l1.l2 { color: var(--color-warning) } } .xl\:progress-error { @layer daisyui.l1.l2 { color: var(--color-error) } } } @media (width>=1536px) { .\32 xl\:progress { @layer daisyui.l1.l2.l3 { appearance: none; border-radius: var(--radius-box); background-color: color-mix(in oklab, currentcolor 20%, transparent); width: 100%; height: .5rem; color: var(--color-base-content); position: relative; overflow: hidden; &:indeterminate { background-image: repeating-linear-gradient(90deg, currentColor -1% 10%, #0000 10% 90%); background-position-x: 15%; background-size: 200%; @media (prefers-reduced-motion:no-preference) { animation: 5s ease-in-out infinite progress } @supports ((-moz-appearance:none)) { &::-moz-progress-bar { background-color: #0000; @media (prefers-reduced-motion:no-preference) { background-image: repeating-linear-gradient(90deg, currentColor -1% 10%, #0000 10% 90%); background-position-x: 15%; background-size: 200%; animation: 5s ease-in-out infinite progress } } } } @supports ((-moz-appearance:none)) { &::-moz-progress-bar { border-radius: var(--radius-box); background-color: currentColor; @media (prefers-reduced-motion:no-preference) { transition: inline-size .3s } } } @supports ((-webkit-appearance:none)) { &::-webkit-progress-bar { border-radius: var(--radius-box); background-color: #0000 } &::-webkit-progress-value { border-radius: var(--radius-box); background-color: currentColor; @media (prefers-reduced-motion:no-preference) { transition: inline-size .3s } } } } } .\32 xl\:progress-primary { @layer daisyui.l1.l2 { color: var(--color-primary) } } .\32 xl\:progress-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary) } } .\32 xl\:progress-accent { @layer daisyui.l1.l2 { color: var(--color-accent) } } .\32 xl\:progress-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral) } } .\32 xl\:progress-info { @layer daisyui.l1.l2 { color: var(--color-info) } } .\32 xl\:progress-success { @layer daisyui.l1.l2 { color: var(--color-success) } } .\32 xl\:progress-warning { @layer daisyui.l1.l2 { color: var(--color-warning) } } .\32 xl\:progress-error { @layer daisyui.l1.l2 { color: var(--color-error) } } } @keyframes progress { 50% { background-position-x: -115% } } .list { @layer daisyui.l1.l2.l3 { flex-direction: column; font-size: .875rem; display: flex; & .list-row { --list-grid-cols: minmax(0, auto) 1fr; border-radius: var(--radius-box); word-break: break-word; grid-auto-flow: column; grid-template-columns: var(--list-grid-cols); gap: 1rem; padding: 1rem; display: grid; position: relative } &>:not(:last-child) { &.list-row, & .list-row { &:after { content: ""; border-bottom: var(--border) solid; inset-inline: var(--radius-box); border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); position: absolute; bottom: 0 } } } } @layer daisyui.l1.l2 { & .list-row { &:has(.list-col-grow:first-child) { --list-grid-cols: 1fr } &:has(.list-col-grow:nth-child(2)) { --list-grid-cols: minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(3)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(4)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(5)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(6)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr } &>* { grid-row-start: 1 } } } } .list-col-wrap { @layer daisyui.l1 { grid-row-start: 2 } } @media (width>=640px) { .sm\:list { @layer daisyui.l1.l2.l3 { flex-direction: column; font-size: .875rem; display: flex; & .list-row { --list-grid-cols: minmax(0, auto) 1fr; border-radius: var(--radius-box); word-break: break-word; grid-auto-flow: column; grid-template-columns: var(--list-grid-cols); gap: 1rem; padding: 1rem; display: grid; position: relative } &>:not(:last-child) { &.list-row, & .list-row { &:after { content: ""; border-bottom: var(--border) solid; inset-inline: var(--radius-box); border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); position: absolute; bottom: 0 } } } } @layer daisyui.l1.l2 { & .list-row { &:has(.list-col-grow:first-child) { --list-grid-cols: 1fr } &:has(.list-col-grow:nth-child(2)) { --list-grid-cols: minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(3)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(4)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(5)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(6)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr } &>* { grid-row-start: 1 } } } } .sm\:list-col-wrap { @layer daisyui.l1 { grid-row-start: 2 } } } @media (width>=768px) { .md\:list { @layer daisyui.l1.l2.l3 { flex-direction: column; font-size: .875rem; display: flex; & .list-row { --list-grid-cols: minmax(0, auto) 1fr; border-radius: var(--radius-box); word-break: break-word; grid-auto-flow: column; grid-template-columns: var(--list-grid-cols); gap: 1rem; padding: 1rem; display: grid; position: relative } &>:not(:last-child) { &.list-row, & .list-row { &:after { content: ""; border-bottom: var(--border) solid; inset-inline: var(--radius-box); border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); position: absolute; bottom: 0 } } } } @layer daisyui.l1.l2 { & .list-row { &:has(.list-col-grow:first-child) { --list-grid-cols: 1fr } &:has(.list-col-grow:nth-child(2)) { --list-grid-cols: minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(3)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(4)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(5)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(6)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr } &>* { grid-row-start: 1 } } } } .md\:list-col-wrap { @layer daisyui.l1 { grid-row-start: 2 } } } @media (width>=1024px) { .lg\:list { @layer daisyui.l1.l2.l3 { flex-direction: column; font-size: .875rem; display: flex; & .list-row { --list-grid-cols: minmax(0, auto) 1fr; border-radius: var(--radius-box); word-break: break-word; grid-auto-flow: column; grid-template-columns: var(--list-grid-cols); gap: 1rem; padding: 1rem; display: grid; position: relative } &>:not(:last-child) { &.list-row, & .list-row { &:after { content: ""; border-bottom: var(--border) solid; inset-inline: var(--radius-box); border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); position: absolute; bottom: 0 } } } } @layer daisyui.l1.l2 { & .list-row { &:has(.list-col-grow:first-child) { --list-grid-cols: 1fr } &:has(.list-col-grow:nth-child(2)) { --list-grid-cols: minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(3)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(4)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(5)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(6)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr } &>* { grid-row-start: 1 } } } } .lg\:list-col-wrap { @layer daisyui.l1 { grid-row-start: 2 } } } @media (width>=1280px) { .xl\:list { @layer daisyui.l1.l2.l3 { flex-direction: column; font-size: .875rem; display: flex; & .list-row { --list-grid-cols: minmax(0, auto) 1fr; border-radius: var(--radius-box); word-break: break-word; grid-auto-flow: column; grid-template-columns: var(--list-grid-cols); gap: 1rem; padding: 1rem; display: grid; position: relative } &>:not(:last-child) { &.list-row, & .list-row { &:after { content: ""; border-bottom: var(--border) solid; inset-inline: var(--radius-box); border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); position: absolute; bottom: 0 } } } } @layer daisyui.l1.l2 { & .list-row { &:has(.list-col-grow:first-child) { --list-grid-cols: 1fr } &:has(.list-col-grow:nth-child(2)) { --list-grid-cols: minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(3)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(4)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(5)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(6)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr } &>* { grid-row-start: 1 } } } } .xl\:list-col-wrap { @layer daisyui.l1 { grid-row-start: 2 } } } @media (width>=1536px) { .\32 xl\:list { @layer daisyui.l1.l2.l3 { flex-direction: column; font-size: .875rem; display: flex; & .list-row { --list-grid-cols: minmax(0, auto) 1fr; border-radius: var(--radius-box); word-break: break-word; grid-auto-flow: column; grid-template-columns: var(--list-grid-cols); gap: 1rem; padding: 1rem; display: grid; position: relative } &>:not(:last-child) { &.list-row, & .list-row { &:after { content: ""; border-bottom: var(--border) solid; inset-inline: var(--radius-box); border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); position: absolute; bottom: 0 } } } } @layer daisyui.l1.l2 { & .list-row { &:has(.list-col-grow:first-child) { --list-grid-cols: 1fr } &:has(.list-col-grow:nth-child(2)) { --list-grid-cols: minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(3)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(4)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(5)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr } &:has(.list-col-grow:nth-child(6)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr } &>* { grid-row-start: 1 } } } } .\32 xl\:list-col-wrap { @layer daisyui.l1 { grid-row-start: 2 } } } .fieldset { @layer daisyui.l1.l2.l3 { grid-template-columns: 1fr; grid-auto-rows: max-content; gap: .375rem; padding-block: .25rem; font-size: .75rem; display: grid } } .fieldset-legend { @layer daisyui.l1.l2.l3 { color: var(--color-base-content); margin-bottom: -.25rem; justify-content: space-between; align-items: center; gap: .5rem; margin-inline-end: auto; padding-block: .5rem; font-weight: 600; display: flex } } .fieldset-label { @layer daisyui.l1.l2.l3 { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); align-items: center; gap: .375rem; display: flex; &:has(input) { cursor: pointer } } } @media (width>=640px) { .sm\:fieldset { @layer daisyui.l1.l2.l3 { grid-template-columns: 1fr; grid-auto-rows: max-content; gap: .375rem; padding-block: .25rem; font-size: .75rem; display: grid } } .sm\:fieldset-legend { @layer daisyui.l1.l2.l3 { color: var(--color-base-content); margin-bottom: -.25rem; justify-content: space-between; align-items: center; gap: .5rem; margin-inline-end: auto; padding-block: .5rem; font-weight: 600; display: flex } } .sm\:fieldset-label { @layer daisyui.l1.l2.l3 { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); align-items: center; gap: .375rem; display: flex; &:has(input) { cursor: pointer } } } } @media (width>=768px) { .md\:fieldset { @layer daisyui.l1.l2.l3 { grid-template-columns: 1fr; grid-auto-rows: max-content; gap: .375rem; padding-block: .25rem; font-size: .75rem; display: grid } } .md\:fieldset-legend { @layer daisyui.l1.l2.l3 { color: var(--color-base-content); margin-bottom: -.25rem; justify-content: space-between; align-items: center; gap: .5rem; margin-inline-end: auto; padding-block: .5rem; font-weight: 600; display: flex } } .md\:fieldset-label { @layer daisyui.l1.l2.l3 { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); align-items: center; gap: .375rem; display: flex; &:has(input) { cursor: pointer } } } } @media (width>=1024px) { .lg\:fieldset { @layer daisyui.l1.l2.l3 { grid-template-columns: 1fr; grid-auto-rows: max-content; gap: .375rem; padding-block: .25rem; font-size: .75rem; display: grid } } .lg\:fieldset-legend { @layer daisyui.l1.l2.l3 { color: var(--color-base-content); margin-bottom: -.25rem; justify-content: space-between; align-items: center; gap: .5rem; margin-inline-end: auto; padding-block: .5rem; font-weight: 600; display: flex } } .lg\:fieldset-label { @layer daisyui.l1.l2.l3 { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); align-items: center; gap: .375rem; display: flex; &:has(input) { cursor: pointer } } } } @media (width>=1280px) { .xl\:fieldset { @layer daisyui.l1.l2.l3 { grid-template-columns: 1fr; grid-auto-rows: max-content; gap: .375rem; padding-block: .25rem; font-size: .75rem; display: grid } } .xl\:fieldset-legend { @layer daisyui.l1.l2.l3 { color: var(--color-base-content); margin-bottom: -.25rem; justify-content: space-between; align-items: center; gap: .5rem; margin-inline-end: auto; padding-block: .5rem; font-weight: 600; display: flex } } .xl\:fieldset-label { @layer daisyui.l1.l2.l3 { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); align-items: center; gap: .375rem; display: flex; &:has(input) { cursor: pointer } } } } @media (width>=1536px) { .\32 xl\:fieldset { @layer daisyui.l1.l2.l3 { grid-template-columns: 1fr; grid-auto-rows: max-content; gap: .375rem; padding-block: .25rem; font-size: .75rem; display: grid } } .\32 xl\:fieldset-legend { @layer daisyui.l1.l2.l3 { color: var(--color-base-content); margin-bottom: -.25rem; justify-content: space-between; align-items: center; gap: .5rem; margin-inline-end: auto; padding-block: .5rem; font-weight: 600; display: flex } } .\32 xl\:fieldset-label { @layer daisyui.l1.l2.l3 { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); align-items: center; gap: .375rem; display: flex; &:has(input) { cursor: pointer } } } } .timeline { @layer daisyui.l1.l2.l3 { display: flex; position: relative; &>li { grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(--timeline-row-end, minmax(0, 1fr)); grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(--timeline-col-end, minmax(0, 1fr)); flex-shrink: 0; align-items: center; display: grid; position: relative; &>hr { border: none; width: 100%; &:first-child { grid-row-start: 2; grid-column-start: 1 } &:last-child { grid-area: 2/3/auto/none } @media print { border: .1px solid var(--color-base-300) } } } & :where(hr) { background-color: var(--color-base-300); height: .25rem } &:has(.timeline-middle hr) { &:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } &:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } } &:not(:has(.timeline-middle)) { & :first-child hr:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } & :last-child hr:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } } } } .timeline-box { @layer daisyui.l1.l2.l3 { border: var(--border) solid; border-radius: var(--radius-box); border-color: var(--color-base-300); background-color: var(--color-base-100); padding-block: .5rem; padding-inline: 1rem; font-size: .75rem; box-shadow: 0 1px 2px oklch(0% 0 0/.05) } } .timeline-start { @layer daisyui.l1.l2.l3 { grid-area: 1/1/2/4; place-self: flex-end center; margin: .25rem } } .timeline-middle { @layer daisyui.l1.l2.l3 { grid-row-start: 2; grid-column-start: 2 } } .timeline-end { @layer daisyui.l1.l2.l3 { grid-area: 3/1/4/4; place-self: flex-start center; margin: .25rem } } .timeline-compact { @layer daisyui.l1.l2 { --timeline-row-start: 0; & .timeline-start { grid-area: 3/1/4/4; place-self: flex-start center } & li:has(.timeline-start) { & .timeline-end { grid-row-start: auto; grid-column-start: none } } &.timeline-vertical { &>li { --timeline-col-start: 0 } & .timeline-start { grid-area: 1/3/4/4; place-self: center flex-start } & li:has(.timeline-start) { & .timeline-end { grid-row-start: none; grid-column-start: auto } } } } } .timeline-snap-icon { @layer daisyui.l1.l2 { &>li { --timeline-col-start: .5rem; --timeline-row-start: minmax(0, 1fr) } } } .timeline-vertical { @layer daisyui.l1.l2 { flex-direction: column; &>li { --timeline-row-start: minmax(0, 1fr); --timeline-row-end: minmax(0, 1fr); justify-items: center; &>hr { width: .25rem; height: 100%; &:first-child { grid-row-start: 1; grid-column-start: 2 } &:last-child { grid-area: 3/2/none } } } & .timeline-start { grid-area: 1/1/4/2; place-self: center flex-end } & .timeline-end { grid-area: 1/3/4/4; place-self: center flex-start } &:has(.timeline-middle) { &>li { &>hr { &:first-child { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector) } &:last-child { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector); border-bottom-right-radius: 0; border-bottom-left-radius: 0 } } } } &:not(:has(.timeline-middle)) { & :first-child { &>hr:last-child { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector); border-bottom-right-radius: 0; border-bottom-left-radius: 0 } } & :last-child { &>hr:first-child { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector) } } } &.timeline-snap-icon { &>li { --timeline-col-start: minmax(0, 1fr); --timeline-row-start: .5rem } } } } .timeline-horizontal { @layer daisyui.l1.l2 { flex-direction: row; &>li { align-items: center; &>hr { width: 100%; height: .25rem; &:first-child { grid-row-start: 2; grid-column-start: 1 } &:last-child { grid-area: 2/3/auto/none } } } & .timeline-start { grid-area: 1/1/2/4; place-self: flex-end center } & .timeline-end { grid-area: 3/1/4/4; place-self: flex-start center } &:has(.timeline-middle) { &>li { &>hr { &:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } &:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } } } } &:not(:has(.timeline-middle)) { & :first-child { &>hr:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } } & :last-child { &>hr:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } } } } } @media (width>=640px) { .sm\:timeline { @layer daisyui.l1.l2.l3 { display: flex; position: relative; &>li { grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(--timeline-row-end, minmax(0, 1fr)); grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(--timeline-col-end, minmax(0, 1fr)); flex-shrink: 0; align-items: center; display: grid; position: relative; &>hr { border: none; width: 100%; &:first-child { grid-row-start: 2; grid-column-start: 1 } &:last-child { grid-area: 2/3/auto/none } @media print { border: .1px solid var(--color-base-300) } } } & :where(hr) { background-color: var(--color-base-300); height: .25rem } &:has(.timeline-middle hr) { &:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } &:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } } &:not(:has(.timeline-middle)) { & :first-child hr:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } & :last-child hr:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } } } } .sm\:timeline-box { @layer daisyui.l1.l2.l3 { border: var(--border) solid; border-radius: var(--radius-box); border-color: var(--color-base-300); background-color: var(--color-base-100); padding-block: .5rem; padding-inline: 1rem; font-size: .75rem; box-shadow: 0 1px 2px oklch(0% 0 0/.05) } } .sm\:timeline-start { @layer daisyui.l1.l2.l3 { grid-area: 1/1/2/4; place-self: flex-end center; margin: .25rem } } .sm\:timeline-middle { @layer daisyui.l1.l2.l3 { grid-row-start: 2; grid-column-start: 2 } } .sm\:timeline-end { @layer daisyui.l1.l2.l3 { grid-area: 3/1/4/4; place-self: flex-start center; margin: .25rem } } .sm\:timeline-compact { @layer daisyui.l1.l2 { --timeline-row-start: 0; & .timeline-start { grid-area: 3/1/4/4; place-self: flex-start center } & li:has(.timeline-start) { & .timeline-end { grid-row-start: auto; grid-column-start: none } } &.timeline-vertical { &>li { --timeline-col-start: 0 } & .timeline-start { grid-area: 1/3/4/4; place-self: center flex-start } & li:has(.timeline-start) { & .timeline-end { grid-row-start: none; grid-column-start: auto } } } } } .sm\:timeline-snap-icon { @layer daisyui.l1.l2 { &>li { --timeline-col-start: .5rem; --timeline-row-start: minmax(0, 1fr) } } } .sm\:timeline-vertical { @layer daisyui.l1.l2 { flex-direction: column; &>li { --timeline-row-start: minmax(0, 1fr); --timeline-row-end: minmax(0, 1fr); justify-items: center; &>hr { width: .25rem; height: 100%; &:first-child { grid-row-start: 1; grid-column-start: 2 } &:last-child { grid-area: 3/2/none } } } & .timeline-start { grid-area: 1/1/4/2; place-self: center flex-end } & .timeline-end { grid-area: 1/3/4/4; place-self: center flex-start } &:has(.timeline-middle) { &>li { &>hr { &:first-child { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector) } &:last-child { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector); border-bottom-right-radius: 0; border-bottom-left-radius: 0 } } } } &:not(:has(.timeline-middle)) { & :first-child { &>hr:last-child { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector); border-bottom-right-radius: 0; border-bottom-left-radius: 0 } } & :last-child { &>hr:first-child { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector) } } } &.timeline-snap-icon { &>li { --timeline-col-start: minmax(0, 1fr); --timeline-row-start: .5rem } } } } .sm\:timeline-horizontal { @layer daisyui.l1.l2 { flex-direction: row; &>li { align-items: center; &>hr { width: 100%; height: .25rem; &:first-child { grid-row-start: 2; grid-column-start: 1 } &:last-child { grid-area: 2/3/auto/none } } } & .timeline-start { grid-area: 1/1/2/4; place-self: flex-end center } & .timeline-end { grid-area: 3/1/4/4; place-self: flex-start center } &:has(.timeline-middle) { &>li { &>hr { &:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } &:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } } } } &:not(:has(.timeline-middle)) { & :first-child { &>hr:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } } & :last-child { &>hr:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } } } } } } @media (width>=768px) { .md\:timeline { @layer daisyui.l1.l2.l3 { display: flex; position: relative; &>li { grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(--timeline-row-end, minmax(0, 1fr)); grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(--timeline-col-end, minmax(0, 1fr)); flex-shrink: 0; align-items: center; display: grid; position: relative; &>hr { border: none; width: 100%; &:first-child { grid-row-start: 2; grid-column-start: 1 } &:last-child { grid-area: 2/3/auto/none } @media print { border: .1px solid var(--color-base-300) } } } & :where(hr) { background-color: var(--color-base-300); height: .25rem } &:has(.timeline-middle hr) { &:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } &:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } } &:not(:has(.timeline-middle)) { & :first-child hr:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } & :last-child hr:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } } } } .md\:timeline-box { @layer daisyui.l1.l2.l3 { border: var(--border) solid; border-radius: var(--radius-box); border-color: var(--color-base-300); background-color: var(--color-base-100); padding-block: .5rem; padding-inline: 1rem; font-size: .75rem; box-shadow: 0 1px 2px oklch(0% 0 0/.05) } } .md\:timeline-start { @layer daisyui.l1.l2.l3 { grid-area: 1/1/2/4; place-self: flex-end center; margin: .25rem } } .md\:timeline-middle { @layer daisyui.l1.l2.l3 { grid-row-start: 2; grid-column-start: 2 } } .md\:timeline-end { @layer daisyui.l1.l2.l3 { grid-area: 3/1/4/4; place-self: flex-start center; margin: .25rem } } .md\:timeline-compact { @layer daisyui.l1.l2 { --timeline-row-start: 0; & .timeline-start { grid-area: 3/1/4/4; place-self: flex-start center } & li:has(.timeline-start) { & .timeline-end { grid-row-start: auto; grid-column-start: none } } &.timeline-vertical { &>li { --timeline-col-start: 0 } & .timeline-start { grid-area: 1/3/4/4; place-self: center flex-start } & li:has(.timeline-start) { & .timeline-end { grid-row-start: none; grid-column-start: auto } } } } } .md\:timeline-snap-icon { @layer daisyui.l1.l2 { &>li { --timeline-col-start: .5rem; --timeline-row-start: minmax(0, 1fr) } } } .md\:timeline-vertical { @layer daisyui.l1.l2 { flex-direction: column; &>li { --timeline-row-start: minmax(0, 1fr); --timeline-row-end: minmax(0, 1fr); justify-items: center; &>hr { width: .25rem; height: 100%; &:first-child { grid-row-start: 1; grid-column-start: 2 } &:last-child { grid-area: 3/2/none } } } & .timeline-start { grid-area: 1/1/4/2; place-self: center flex-end } & .timeline-end { grid-area: 1/3/4/4; place-self: center flex-start } &:has(.timeline-middle) { &>li { &>hr { &:first-child { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector) } &:last-child { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector); border-bottom-right-radius: 0; border-bottom-left-radius: 0 } } } } &:not(:has(.timeline-middle)) { & :first-child { &>hr:last-child { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector); border-bottom-right-radius: 0; border-bottom-left-radius: 0 } } & :last-child { &>hr:first-child { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector) } } } &.timeline-snap-icon { &>li { --timeline-col-start: minmax(0, 1fr); --timeline-row-start: .5rem } } } } .md\:timeline-horizontal { @layer daisyui.l1.l2 { flex-direction: row; &>li { align-items: center; &>hr { width: 100%; height: .25rem; &:first-child { grid-row-start: 2; grid-column-start: 1 } &:last-child { grid-area: 2/3/auto/none } } } & .timeline-start { grid-area: 1/1/2/4; place-self: flex-end center } & .timeline-end { grid-area: 3/1/4/4; place-self: flex-start center } &:has(.timeline-middle) { &>li { &>hr { &:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } &:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } } } } &:not(:has(.timeline-middle)) { & :first-child { &>hr:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } } & :last-child { &>hr:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } } } } } } @media (width>=1024px) { .lg\:timeline { @layer daisyui.l1.l2.l3 { display: flex; position: relative; &>li { grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(--timeline-row-end, minmax(0, 1fr)); grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(--timeline-col-end, minmax(0, 1fr)); flex-shrink: 0; align-items: center; display: grid; position: relative; &>hr { border: none; width: 100%; &:first-child { grid-row-start: 2; grid-column-start: 1 } &:last-child { grid-area: 2/3/auto/none } @media print { border: .1px solid var(--color-base-300) } } } & :where(hr) { background-color: var(--color-base-300); height: .25rem } &:has(.timeline-middle hr) { &:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } &:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } } &:not(:has(.timeline-middle)) { & :first-child hr:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } & :last-child hr:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } } } } .lg\:timeline-box { @layer daisyui.l1.l2.l3 { border: var(--border) solid; border-radius: var(--radius-box); border-color: var(--color-base-300); background-color: var(--color-base-100); padding-block: .5rem; padding-inline: 1rem; font-size: .75rem; box-shadow: 0 1px 2px oklch(0% 0 0/.05) } } .lg\:timeline-start { @layer daisyui.l1.l2.l3 { grid-area: 1/1/2/4; place-self: flex-end center; margin: .25rem } } .lg\:timeline-middle { @layer daisyui.l1.l2.l3 { grid-row-start: 2; grid-column-start: 2 } } .lg\:timeline-end { @layer daisyui.l1.l2.l3 { grid-area: 3/1/4/4; place-self: flex-start center; margin: .25rem } } .lg\:timeline-compact { @layer daisyui.l1.l2 { --timeline-row-start: 0; & .timeline-start { grid-area: 3/1/4/4; place-self: flex-start center } & li:has(.timeline-start) { & .timeline-end { grid-row-start: auto; grid-column-start: none } } &.timeline-vertical { &>li { --timeline-col-start: 0 } & .timeline-start { grid-area: 1/3/4/4; place-self: center flex-start } & li:has(.timeline-start) { & .timeline-end { grid-row-start: none; grid-column-start: auto } } } } } .lg\:timeline-snap-icon { @layer daisyui.l1.l2 { &>li { --timeline-col-start: .5rem; --timeline-row-start: minmax(0, 1fr) } } } .lg\:timeline-vertical { @layer daisyui.l1.l2 { flex-direction: column; &>li { --timeline-row-start: minmax(0, 1fr); --timeline-row-end: minmax(0, 1fr); justify-items: center; &>hr { width: .25rem; height: 100%; &:first-child { grid-row-start: 1; grid-column-start: 2 } &:last-child { grid-area: 3/2/none } } } & .timeline-start { grid-area: 1/1/4/2; place-self: center flex-end } & .timeline-end { grid-area: 1/3/4/4; place-self: center flex-start } &:has(.timeline-middle) { &>li { &>hr { &:first-child { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector) } &:last-child { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector); border-bottom-right-radius: 0; border-bottom-left-radius: 0 } } } } &:not(:has(.timeline-middle)) { & :first-child { &>hr:last-child { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector); border-bottom-right-radius: 0; border-bottom-left-radius: 0 } } & :last-child { &>hr:first-child { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector) } } } &.timeline-snap-icon { &>li { --timeline-col-start: minmax(0, 1fr); --timeline-row-start: .5rem } } } } .lg\:timeline-horizontal { @layer daisyui.l1.l2 { flex-direction: row; &>li { align-items: center; &>hr { width: 100%; height: .25rem; &:first-child { grid-row-start: 2; grid-column-start: 1 } &:last-child { grid-area: 2/3/auto/none } } } & .timeline-start { grid-area: 1/1/2/4; place-self: flex-end center } & .timeline-end { grid-area: 3/1/4/4; place-self: flex-start center } &:has(.timeline-middle) { &>li { &>hr { &:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } &:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } } } } &:not(:has(.timeline-middle)) { & :first-child { &>hr:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } } & :last-child { &>hr:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } } } } } } @media (width>=1280px) { .xl\:timeline { @layer daisyui.l1.l2.l3 { display: flex; position: relative; &>li { grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(--timeline-row-end, minmax(0, 1fr)); grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(--timeline-col-end, minmax(0, 1fr)); flex-shrink: 0; align-items: center; display: grid; position: relative; &>hr { border: none; width: 100%; &:first-child { grid-row-start: 2; grid-column-start: 1 } &:last-child { grid-area: 2/3/auto/none } @media print { border: .1px solid var(--color-base-300) } } } & :where(hr) { background-color: var(--color-base-300); height: .25rem } &:has(.timeline-middle hr) { &:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } &:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } } &:not(:has(.timeline-middle)) { & :first-child hr:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } & :last-child hr:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } } } } .xl\:timeline-box { @layer daisyui.l1.l2.l3 { border: var(--border) solid; border-radius: var(--radius-box); border-color: var(--color-base-300); background-color: var(--color-base-100); padding-block: .5rem; padding-inline: 1rem; font-size: .75rem; box-shadow: 0 1px 2px oklch(0% 0 0/.05) } } .xl\:timeline-start { @layer daisyui.l1.l2.l3 { grid-area: 1/1/2/4; place-self: flex-end center; margin: .25rem } } .xl\:timeline-middle { @layer daisyui.l1.l2.l3 { grid-row-start: 2; grid-column-start: 2 } } .xl\:timeline-end { @layer daisyui.l1.l2.l3 { grid-area: 3/1/4/4; place-self: flex-start center; margin: .25rem } } .xl\:timeline-compact { @layer daisyui.l1.l2 { --timeline-row-start: 0; & .timeline-start { grid-area: 3/1/4/4; place-self: flex-start center } & li:has(.timeline-start) { & .timeline-end { grid-row-start: auto; grid-column-start: none } } &.timeline-vertical { &>li { --timeline-col-start: 0 } & .timeline-start { grid-area: 1/3/4/4; place-self: center flex-start } & li:has(.timeline-start) { & .timeline-end { grid-row-start: none; grid-column-start: auto } } } } } .xl\:timeline-snap-icon { @layer daisyui.l1.l2 { &>li { --timeline-col-start: .5rem; --timeline-row-start: minmax(0, 1fr) } } } .xl\:timeline-vertical { @layer daisyui.l1.l2 { flex-direction: column; &>li { --timeline-row-start: minmax(0, 1fr); --timeline-row-end: minmax(0, 1fr); justify-items: center; &>hr { width: .25rem; height: 100%; &:first-child { grid-row-start: 1; grid-column-start: 2 } &:last-child { grid-area: 3/2/none } } } & .timeline-start { grid-area: 1/1/4/2; place-self: center flex-end } & .timeline-end { grid-area: 1/3/4/4; place-self: center flex-start } &:has(.timeline-middle) { &>li { &>hr { &:first-child { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector) } &:last-child { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector); border-bottom-right-radius: 0; border-bottom-left-radius: 0 } } } } &:not(:has(.timeline-middle)) { & :first-child { &>hr:last-child { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector); border-bottom-right-radius: 0; border-bottom-left-radius: 0 } } & :last-child { &>hr:first-child { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector) } } } &.timeline-snap-icon { &>li { --timeline-col-start: minmax(0, 1fr); --timeline-row-start: .5rem } } } } .xl\:timeline-horizontal { @layer daisyui.l1.l2 { flex-direction: row; &>li { align-items: center; &>hr { width: 100%; height: .25rem; &:first-child { grid-row-start: 2; grid-column-start: 1 } &:last-child { grid-area: 2/3/auto/none } } } & .timeline-start { grid-area: 1/1/2/4; place-self: flex-end center } & .timeline-end { grid-area: 3/1/4/4; place-self: flex-start center } &:has(.timeline-middle) { &>li { &>hr { &:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } &:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } } } } &:not(:has(.timeline-middle)) { & :first-child { &>hr:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } } & :last-child { &>hr:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } } } } } } @media (width>=1536px) { .\32 xl\:timeline { @layer daisyui.l1.l2.l3 { display: flex; position: relative; &>li { grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(--timeline-row-end, minmax(0, 1fr)); grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(--timeline-col-end, minmax(0, 1fr)); flex-shrink: 0; align-items: center; display: grid; position: relative; &>hr { border: none; width: 100%; &:first-child { grid-row-start: 2; grid-column-start: 1 } &:last-child { grid-area: 2/3/auto/none } @media print { border: .1px solid var(--color-base-300) } } } & :where(hr) { background-color: var(--color-base-300); height: .25rem } &:has(.timeline-middle hr) { &:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } &:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } } &:not(:has(.timeline-middle)) { & :first-child hr:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } & :last-child hr:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } } } } .\32 xl\:timeline-box { @layer daisyui.l1.l2.l3 { border: var(--border) solid; border-radius: var(--radius-box); border-color: var(--color-base-300); background-color: var(--color-base-100); padding-block: .5rem; padding-inline: 1rem; font-size: .75rem; box-shadow: 0 1px 2px oklch(0% 0 0/.05) } } .\32 xl\:timeline-start { @layer daisyui.l1.l2.l3 { grid-area: 1/1/2/4; place-self: flex-end center; margin: .25rem } } .\32 xl\:timeline-middle { @layer daisyui.l1.l2.l3 { grid-row-start: 2; grid-column-start: 2 } } .\32 xl\:timeline-end { @layer daisyui.l1.l2.l3 { grid-area: 3/1/4/4; place-self: flex-start center; margin: .25rem } } .\32 xl\:timeline-compact { @layer daisyui.l1.l2 { --timeline-row-start: 0; & .timeline-start { grid-area: 3/1/4/4; place-self: flex-start center } & li:has(.timeline-start) { & .timeline-end { grid-row-start: auto; grid-column-start: none } } &.timeline-vertical { &>li { --timeline-col-start: 0 } & .timeline-start { grid-area: 1/3/4/4; place-self: center flex-start } & li:has(.timeline-start) { & .timeline-end { grid-row-start: none; grid-column-start: auto } } } } } .\32 xl\:timeline-snap-icon { @layer daisyui.l1.l2 { &>li { --timeline-col-start: .5rem; --timeline-row-start: minmax(0, 1fr) } } } .\32 xl\:timeline-vertical { @layer daisyui.l1.l2 { flex-direction: column; &>li { --timeline-row-start: minmax(0, 1fr); --timeline-row-end: minmax(0, 1fr); justify-items: center; &>hr { width: .25rem; height: 100%; &:first-child { grid-row-start: 1; grid-column-start: 2 } &:last-child { grid-area: 3/2/none } } } & .timeline-start { grid-area: 1/1/4/2; place-self: center flex-end } & .timeline-end { grid-area: 1/3/4/4; place-self: center flex-start } &:has(.timeline-middle) { &>li { &>hr { &:first-child { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector) } &:last-child { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector); border-bottom-right-radius: 0; border-bottom-left-radius: 0 } } } } &:not(:has(.timeline-middle)) { & :first-child { &>hr:last-child { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector); border-bottom-right-radius: 0; border-bottom-left-radius: 0 } } & :last-child { &>hr:first-child { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector) } } } &.timeline-snap-icon { &>li { --timeline-col-start: minmax(0, 1fr); --timeline-row-start: .5rem } } } } .\32 xl\:timeline-horizontal { @layer daisyui.l1.l2 { flex-direction: row; &>li { align-items: center; &>hr { width: 100%; height: .25rem; &:first-child { grid-row-start: 2; grid-column-start: 1 } &:last-child { grid-area: 2/3/auto/none } } } & .timeline-start { grid-area: 1/1/2/4; place-self: flex-end center } & .timeline-end { grid-area: 3/1/4/4; place-self: flex-start center } &:has(.timeline-middle) { &>li { &>hr { &:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } &:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } } } } &:not(:has(.timeline-middle)) { & :first-child { &>hr:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector) } } & :last-child { &>hr:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0 } } } } } } .text-rotate { height: 1lh; @layer daisyui.l1.l2.l3 { vertical-align: bottom; white-space: nowrap; --duration: var(--tw-duration); transition-property: none; display: inline-block; overflow: hidden; &>* { height: calc(var(--items, 1) * 100%); justify-items: start; display: grid; &:has(:nth-child(2)) { --items: 2; animation: rotator var(--duration, 10s) linear(0 0% 49%, .5 50% 99%, 1 100% 100%) infinite } &:has(:nth-child(3)) { --items: 3; animation: rotator var(--duration, 10s) linear(0 0% 32%, .333333 33% 65%, .666666 66% 99%, 1 100% 100%) infinite } &:has(:nth-child(4)) { --items: 4; animation: rotator var(--duration, 10s) linear(0 0% 24%, .25 25% 49%, .5 50% 74%, .75 75% 99%, 1 100% 100%) infinite } &:has(:nth-child(5)) { --items: 5; animation: rotator var(--duration, 10s) linear(0 0% 19%, .2 20% 39%, .4 40% 59%, .6 60% 79%, .8 80% 99%, 1 100% 100%) infinite } &:has(:nth-child(6)) { --items: 6; animation: rotator var(--duration, 10s) linear(0 0% 15%, .16666 16% 32%, .333333 33% 49%, .5 50% 65%, .666666 66% 82%, .833333 83% 99%, 1 100% 100%) infinite } &>* { clip-path: inset(.5px 0); align-content: baseline; &:first-child { translate: var(--first-item-position) } } } &:hover { &>* { animation-play-state: paused } } } } @keyframes rotator { 89.9999%, to { --first-item-position: 0 0% } 90%, 99.9999% { --first-item-position: 0 calc(var(--items) * 100%) } to { translate: 0 -100% } } .alert { border-width: var(--border); border-color: var(--alert-border-color, var(--color-base-200)); @layer daisyui.l1.l2.l3 { --alert-border-color: var(--color-base-200); border-radius: var(--radius-box); color: var(--color-base-content); background-color: var(--alert-color, var(--color-base-200)); text-align: start; background-size: auto, calc(var(--noise) * 33%); background-image: none, var(--fx-noise); box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08)); border-style: solid; grid-template-columns: auto; grid-auto-flow: column; justify-content: start; place-items: center start; gap: 1rem; padding-block: .75rem; padding-inline: 1rem; font-size: .875rem; line-height: 1.25rem; display: grid; &:has(:nth-child(2)) { grid-template-columns: auto minmax(auto, 1fr) } } } .alert-info { @layer daisyui.l1.l2 { color: var(--color-info-content); --alert-border-color: var(--color-info); --alert-color: var(--color-info) } } .alert-success { @layer daisyui.l1.l2 { color: var(--color-success-content); --alert-border-color: var(--color-success); --alert-color: var(--color-success) } } .alert-warning { @layer daisyui.l1.l2 { color: var(--color-warning-content); --alert-border-color: var(--color-warning); --alert-color: var(--color-warning) } } .alert-error { @layer daisyui.l1.l2 { color: var(--color-error-content); --alert-border-color: var(--color-error); --alert-color: var(--color-error) } } .alert-soft { @layer daisyui.l1 { color: var(--alert-color, var(--color-base-content)); background: color-mix(in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100)); --alert-border-color: color-mix(in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100)); box-shadow: none; background-image: none } } .alert-outline { @layer daisyui.l1 { color: var(--alert-color); box-shadow: none; background-color: #0000; background-image: none } } .alert-dash { @layer daisyui.l1 { color: var(--alert-color); box-shadow: none; background-color: #0000; background-image: none; border-style: dashed } } .alert-vertical { @layer daisyui.l1.l2 { text-align: center; grid-template-columns: auto; grid-auto-flow: row; justify-content: center; justify-items: center; &:has(:nth-child(2)) { grid-template-columns: auto } } } .alert-horizontal { @layer daisyui.l1.l2 { text-align: start; grid-template-columns: auto; grid-auto-flow: column; justify-content: start; justify-items: start; &:has(:nth-child(2)) { grid-template-columns: auto minmax(auto, 1fr) } } } @media (width>=640px) { .sm\:alert { border-width: var(--border); border-color: var(--alert-border-color, var(--color-base-200)); @layer daisyui.l1.l2.l3 { --alert-border-color: var(--color-base-200); border-radius: var(--radius-box); color: var(--color-base-content); background-color: var(--alert-color, var(--color-base-200)); text-align: start; background-size: auto, calc(var(--noise) * 33%); background-image: none, var(--fx-noise); box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08)); border-style: solid; grid-template-columns: auto; grid-auto-flow: column; justify-content: start; place-items: center start; gap: 1rem; padding-block: .75rem; padding-inline: 1rem; font-size: .875rem; line-height: 1.25rem; display: grid; &:has(:nth-child(2)) { grid-template-columns: auto minmax(auto, 1fr) } } } .sm\:alert-info { @layer daisyui.l1.l2 { color: var(--color-info-content); --alert-border-color: var(--color-info); --alert-color: var(--color-info) } } .sm\:alert-success { @layer daisyui.l1.l2 { color: var(--color-success-content); --alert-border-color: var(--color-success); --alert-color: var(--color-success) } } .sm\:alert-warning { @layer daisyui.l1.l2 { color: var(--color-warning-content); --alert-border-color: var(--color-warning); --alert-color: var(--color-warning) } } .sm\:alert-error { @layer daisyui.l1.l2 { color: var(--color-error-content); --alert-border-color: var(--color-error); --alert-color: var(--color-error) } } .sm\:alert-soft { @layer daisyui.l1 { color: var(--alert-color, var(--color-base-content)); background: color-mix(in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100)); --alert-border-color: color-mix(in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100)); box-shadow: none; background-image: none } } .sm\:alert-outline { @layer daisyui.l1 { color: var(--alert-color); box-shadow: none; background-color: #0000; background-image: none } } .sm\:alert-dash { @layer daisyui.l1 { color: var(--alert-color); box-shadow: none; background-color: #0000; background-image: none; border-style: dashed } } .sm\:alert-vertical { @layer daisyui.l1.l2 { text-align: center; grid-template-columns: auto; grid-auto-flow: row; justify-content: center; justify-items: center; &:has(:nth-child(2)) { grid-template-columns: auto } } } .sm\:alert-horizontal { @layer daisyui.l1.l2 { text-align: start; grid-template-columns: auto; grid-auto-flow: column; justify-content: start; justify-items: start; &:has(:nth-child(2)) { grid-template-columns: auto minmax(auto, 1fr) } } } } @media (width>=768px) { .md\:alert { border-width: var(--border); border-color: var(--alert-border-color, var(--color-base-200)); @layer daisyui.l1.l2.l3 { --alert-border-color: var(--color-base-200); border-radius: var(--radius-box); color: var(--color-base-content); background-color: var(--alert-color, var(--color-base-200)); text-align: start; background-size: auto, calc(var(--noise) * 33%); background-image: none, var(--fx-noise); box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08)); border-style: solid; grid-template-columns: auto; grid-auto-flow: column; justify-content: start; place-items: center start; gap: 1rem; padding-block: .75rem; padding-inline: 1rem; font-size: .875rem; line-height: 1.25rem; display: grid; &:has(:nth-child(2)) { grid-template-columns: auto minmax(auto, 1fr) } } } .md\:alert-info { @layer daisyui.l1.l2 { color: var(--color-info-content); --alert-border-color: var(--color-info); --alert-color: var(--color-info) } } .md\:alert-success { @layer daisyui.l1.l2 { color: var(--color-success-content); --alert-border-color: var(--color-success); --alert-color: var(--color-success) } } .md\:alert-warning { @layer daisyui.l1.l2 { color: var(--color-warning-content); --alert-border-color: var(--color-warning); --alert-color: var(--color-warning) } } .md\:alert-error { @layer daisyui.l1.l2 { color: var(--color-error-content); --alert-border-color: var(--color-error); --alert-color: var(--color-error) } } .md\:alert-soft { @layer daisyui.l1 { color: var(--alert-color, var(--color-base-content)); background: color-mix(in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100)); --alert-border-color: color-mix(in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100)); box-shadow: none; background-image: none } } .md\:alert-outline { @layer daisyui.l1 { color: var(--alert-color); box-shadow: none; background-color: #0000; background-image: none } } .md\:alert-dash { @layer daisyui.l1 { color: var(--alert-color); box-shadow: none; background-color: #0000; background-image: none; border-style: dashed } } .md\:alert-vertical { @layer daisyui.l1.l2 { text-align: center; grid-template-columns: auto; grid-auto-flow: row; justify-content: center; justify-items: center; &:has(:nth-child(2)) { grid-template-columns: auto } } } .md\:alert-horizontal { @layer daisyui.l1.l2 { text-align: start; grid-template-columns: auto; grid-auto-flow: column; justify-content: start; justify-items: start; &:has(:nth-child(2)) { grid-template-columns: auto minmax(auto, 1fr) } } } } @media (width>=1024px) { .lg\:alert { border-width: var(--border); border-color: var(--alert-border-color, var(--color-base-200)); @layer daisyui.l1.l2.l3 { --alert-border-color: var(--color-base-200); border-radius: var(--radius-box); color: var(--color-base-content); background-color: var(--alert-color, var(--color-base-200)); text-align: start; background-size: auto, calc(var(--noise) * 33%); background-image: none, var(--fx-noise); box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08)); border-style: solid; grid-template-columns: auto; grid-auto-flow: column; justify-content: start; place-items: center start; gap: 1rem; padding-block: .75rem; padding-inline: 1rem; font-size: .875rem; line-height: 1.25rem; display: grid; &:has(:nth-child(2)) { grid-template-columns: auto minmax(auto, 1fr) } } } .lg\:alert-info { @layer daisyui.l1.l2 { color: var(--color-info-content); --alert-border-color: var(--color-info); --alert-color: var(--color-info) } } .lg\:alert-success { @layer daisyui.l1.l2 { color: var(--color-success-content); --alert-border-color: var(--color-success); --alert-color: var(--color-success) } } .lg\:alert-warning { @layer daisyui.l1.l2 { color: var(--color-warning-content); --alert-border-color: var(--color-warning); --alert-color: var(--color-warning) } } .lg\:alert-error { @layer daisyui.l1.l2 { color: var(--color-error-content); --alert-border-color: var(--color-error); --alert-color: var(--color-error) } } .lg\:alert-soft { @layer daisyui.l1 { color: var(--alert-color, var(--color-base-content)); background: color-mix(in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100)); --alert-border-color: color-mix(in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100)); box-shadow: none; background-image: none } } .lg\:alert-outline { @layer daisyui.l1 { color: var(--alert-color); box-shadow: none; background-color: #0000; background-image: none } } .lg\:alert-dash { @layer daisyui.l1 { color: var(--alert-color); box-shadow: none; background-color: #0000; background-image: none; border-style: dashed } } .lg\:alert-vertical { @layer daisyui.l1.l2 { text-align: center; grid-template-columns: auto; grid-auto-flow: row; justify-content: center; justify-items: center; &:has(:nth-child(2)) { grid-template-columns: auto } } } .lg\:alert-horizontal { @layer daisyui.l1.l2 { text-align: start; grid-template-columns: auto; grid-auto-flow: column; justify-content: start; justify-items: start; &:has(:nth-child(2)) { grid-template-columns: auto minmax(auto, 1fr) } } } } @media (width>=1280px) { .xl\:alert { border-width: var(--border); border-color: var(--alert-border-color, var(--color-base-200)); @layer daisyui.l1.l2.l3 { --alert-border-color: var(--color-base-200); border-radius: var(--radius-box); color: var(--color-base-content); background-color: var(--alert-color, var(--color-base-200)); text-align: start; background-size: auto, calc(var(--noise) * 33%); background-image: none, var(--fx-noise); box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08)); border-style: solid; grid-template-columns: auto; grid-auto-flow: column; justify-content: start; place-items: center start; gap: 1rem; padding-block: .75rem; padding-inline: 1rem; font-size: .875rem; line-height: 1.25rem; display: grid; &:has(:nth-child(2)) { grid-template-columns: auto minmax(auto, 1fr) } } } .xl\:alert-info { @layer daisyui.l1.l2 { color: var(--color-info-content); --alert-border-color: var(--color-info); --alert-color: var(--color-info) } } .xl\:alert-success { @layer daisyui.l1.l2 { color: var(--color-success-content); --alert-border-color: var(--color-success); --alert-color: var(--color-success) } } .xl\:alert-warning { @layer daisyui.l1.l2 { color: var(--color-warning-content); --alert-border-color: var(--color-warning); --alert-color: var(--color-warning) } } .xl\:alert-error { @layer daisyui.l1.l2 { color: var(--color-error-content); --alert-border-color: var(--color-error); --alert-color: var(--color-error) } } .xl\:alert-soft { @layer daisyui.l1 { color: var(--alert-color, var(--color-base-content)); background: color-mix(in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100)); --alert-border-color: color-mix(in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100)); box-shadow: none; background-image: none } } .xl\:alert-outline { @layer daisyui.l1 { color: var(--alert-color); box-shadow: none; background-color: #0000; background-image: none } } .xl\:alert-dash { @layer daisyui.l1 { color: var(--alert-color); box-shadow: none; background-color: #0000; background-image: none; border-style: dashed } } .xl\:alert-vertical { @layer daisyui.l1.l2 { text-align: center; grid-template-columns: auto; grid-auto-flow: row; justify-content: center; justify-items: center; &:has(:nth-child(2)) { grid-template-columns: auto } } } .xl\:alert-horizontal { @layer daisyui.l1.l2 { text-align: start; grid-template-columns: auto; grid-auto-flow: column; justify-content: start; justify-items: start; &:has(:nth-child(2)) { grid-template-columns: auto minmax(auto, 1fr) } } } } @media (width>=1536px) { .\32 xl\:alert { border-width: var(--border); border-color: var(--alert-border-color, var(--color-base-200)); @layer daisyui.l1.l2.l3 { --alert-border-color: var(--color-base-200); border-radius: var(--radius-box); color: var(--color-base-content); background-color: var(--alert-color, var(--color-base-200)); text-align: start; background-size: auto, calc(var(--noise) * 33%); background-image: none, var(--fx-noise); box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08)); border-style: solid; grid-template-columns: auto; grid-auto-flow: column; justify-content: start; place-items: center start; gap: 1rem; padding-block: .75rem; padding-inline: 1rem; font-size: .875rem; line-height: 1.25rem; display: grid; &:has(:nth-child(2)) { grid-template-columns: auto minmax(auto, 1fr) } } } .\32 xl\:alert-info { @layer daisyui.l1.l2 { color: var(--color-info-content); --alert-border-color: var(--color-info); --alert-color: var(--color-info) } } .\32 xl\:alert-success { @layer daisyui.l1.l2 { color: var(--color-success-content); --alert-border-color: var(--color-success); --alert-color: var(--color-success) } } .\32 xl\:alert-warning { @layer daisyui.l1.l2 { color: var(--color-warning-content); --alert-border-color: var(--color-warning); --alert-color: var(--color-warning) } } .\32 xl\:alert-error { @layer daisyui.l1.l2 { color: var(--color-error-content); --alert-border-color: var(--color-error); --alert-color: var(--color-error) } } .\32 xl\:alert-soft { @layer daisyui.l1 { color: var(--alert-color, var(--color-base-content)); background: color-mix(in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100)); --alert-border-color: color-mix(in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100)); box-shadow: none; background-image: none } } .\32 xl\:alert-outline { @layer daisyui.l1 { color: var(--alert-color); box-shadow: none; background-color: #0000; background-image: none } } .\32 xl\:alert-dash { @layer daisyui.l1 { color: var(--alert-color); box-shadow: none; background-color: #0000; background-image: none; border-style: dashed } } .\32 xl\:alert-vertical { @layer daisyui.l1.l2 { text-align: center; grid-template-columns: auto; grid-auto-flow: row; justify-content: center; justify-items: center; &:has(:nth-child(2)) { grid-template-columns: auto } } } .\32 xl\:alert-horizontal { @layer daisyui.l1.l2 { text-align: start; grid-template-columns: auto; grid-auto-flow: column; justify-content: start; justify-items: start; &:has(:nth-child(2)) { grid-template-columns: auto minmax(auto, 1fr) } } } } .checkbox { @layer daisyui.l1.l2.l3 { border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); cursor: pointer; appearance: none; border-radius: var(--radius-selector); vertical-align: middle; color: var(--color-base-content); box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 0 #0000 inset, 0 0 #0000; --size: calc(var(--size-selector, .25rem) * 6); width: var(--size); height: var(--size); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); flex-shrink: 0; padding: .25rem; transition: background-color .2s, box-shadow .2s; display: inline-block; position: relative; &:before { --tw-content: ""; content: var(--tw-content); opacity: 0; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%); width: 100%; height: 100%; box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; background-color: currentColor; font-size: 1rem; line-height: .75; transition: clip-path .3s .1s, opacity .1s .1s, rotate .3s .1s, translate .3s .1s; display: block; rotate: 45deg } &:focus-visible { outline: 2px solid var(--input-color, currentColor); outline-offset: 2px } &:checked, &[aria-checked=true] { background-color: var(--input-color, #0000); box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)); &:before { clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%); opacity: 1 } @media (forced-colors:active) { &:before { --tw-content: "✔︎"; clip-path: none; background-color: #0000; rotate: 0deg } } @media print { &:before { --tw-content: "✔︎"; clip-path: none; background-color: #0000; rotate: 0deg } } } &:indeterminate { background-color: var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); &:before { opacity: 1; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%); translate: 0 -35%; rotate: 0deg } } } } .checkbox-primary { @layer daisyui.l1.l2 { color: var(--color-primary-content); --input-color: var(--color-primary) } } .checkbox-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary-content); --input-color: var(--color-secondary) } } .checkbox-accent { @layer daisyui.l1.l2 { color: var(--color-accent-content); --input-color: var(--color-accent) } } .checkbox-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral-content); --input-color: var(--color-neutral) } } .checkbox-info { @layer daisyui.l1.l2 { color: var(--color-info-content); --input-color: var(--color-info) } } .checkbox-success { @layer daisyui.l1.l2 { color: var(--color-success-content); --input-color: var(--color-success) } } .checkbox-warning { @layer daisyui.l1.l2 { color: var(--color-warning-content); --input-color: var(--color-warning) } } .checkbox-error { @layer daisyui.l1.l2 { color: var(--color-error-content); --input-color: var(--color-error) } } .checkbox:disabled { @layer daisyui.l1.l2 { cursor: not-allowed; opacity: .2 } } .checkbox-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 4); padding: .125rem } } .checkbox-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 5); padding: .1875rem } } .checkbox-md { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 6); padding: .25rem } } .checkbox-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 7); padding: .3125rem } } .checkbox-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 8); padding: .375rem } } @media (width>=640px) { .sm\:checkbox { @layer daisyui.l1.l2.l3 { border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); cursor: pointer; appearance: none; border-radius: var(--radius-selector); vertical-align: middle; color: var(--color-base-content); box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 0 #0000 inset, 0 0 #0000; --size: calc(var(--size-selector, .25rem) * 6); width: var(--size); height: var(--size); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); flex-shrink: 0; padding: .25rem; transition: background-color .2s, box-shadow .2s; display: inline-block; position: relative; &:before { --tw-content: ""; content: var(--tw-content); opacity: 0; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%); width: 100%; height: 100%; box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; background-color: currentColor; font-size: 1rem; line-height: .75; transition: clip-path .3s .1s, opacity .1s .1s, rotate .3s .1s, translate .3s .1s; display: block; rotate: 45deg } &:focus-visible { outline: 2px solid var(--input-color, currentColor); outline-offset: 2px } &:checked, &[aria-checked=true] { background-color: var(--input-color, #0000); box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)); &:before { clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%); opacity: 1 } @media (forced-colors:active) { &:before { --tw-content: "✔︎"; clip-path: none; background-color: #0000; rotate: 0deg } } @media print { &:before { --tw-content: "✔︎"; clip-path: none; background-color: #0000; rotate: 0deg } } } &:indeterminate { background-color: var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); &:before { opacity: 1; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%); translate: 0 -35%; rotate: 0deg } } } } .sm\:checkbox-primary { @layer daisyui.l1.l2 { color: var(--color-primary-content); --input-color: var(--color-primary) } } .sm\:checkbox-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary-content); --input-color: var(--color-secondary) } } .sm\:checkbox-accent { @layer daisyui.l1.l2 { color: var(--color-accent-content); --input-color: var(--color-accent) } } .sm\:checkbox-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral-content); --input-color: var(--color-neutral) } } .sm\:checkbox-info { @layer daisyui.l1.l2 { color: var(--color-info-content); --input-color: var(--color-info) } } .sm\:checkbox-success { @layer daisyui.l1.l2 { color: var(--color-success-content); --input-color: var(--color-success) } } .sm\:checkbox-warning { @layer daisyui.l1.l2 { color: var(--color-warning-content); --input-color: var(--color-warning) } } .sm\:checkbox-error { @layer daisyui.l1.l2 { color: var(--color-error-content); --input-color: var(--color-error) } } .sm\:checkbox:disabled { @layer daisyui.l1.l2 { cursor: not-allowed; opacity: .2 } } .sm\:checkbox-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 4); padding: .125rem } } .sm\:checkbox-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 5); padding: .1875rem } } .sm\:checkbox-md { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 6); padding: .25rem } } .sm\:checkbox-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 7); padding: .3125rem } } .sm\:checkbox-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 8); padding: .375rem } } } @media (width>=768px) { .md\:checkbox { @layer daisyui.l1.l2.l3 { border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); cursor: pointer; appearance: none; border-radius: var(--radius-selector); vertical-align: middle; color: var(--color-base-content); box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 0 #0000 inset, 0 0 #0000; --size: calc(var(--size-selector, .25rem) * 6); width: var(--size); height: var(--size); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); flex-shrink: 0; padding: .25rem; transition: background-color .2s, box-shadow .2s; display: inline-block; position: relative; &:before { --tw-content: ""; content: var(--tw-content); opacity: 0; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%); width: 100%; height: 100%; box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; background-color: currentColor; font-size: 1rem; line-height: .75; transition: clip-path .3s .1s, opacity .1s .1s, rotate .3s .1s, translate .3s .1s; display: block; rotate: 45deg } &:focus-visible { outline: 2px solid var(--input-color, currentColor); outline-offset: 2px } &:checked, &[aria-checked=true] { background-color: var(--input-color, #0000); box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)); &:before { clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%); opacity: 1 } @media (forced-colors:active) { &:before { --tw-content: "✔︎"; clip-path: none; background-color: #0000; rotate: 0deg } } @media print { &:before { --tw-content: "✔︎"; clip-path: none; background-color: #0000; rotate: 0deg } } } &:indeterminate { background-color: var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); &:before { opacity: 1; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%); translate: 0 -35%; rotate: 0deg } } } } .md\:checkbox-primary { @layer daisyui.l1.l2 { color: var(--color-primary-content); --input-color: var(--color-primary) } } .md\:checkbox-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary-content); --input-color: var(--color-secondary) } } .md\:checkbox-accent { @layer daisyui.l1.l2 { color: var(--color-accent-content); --input-color: var(--color-accent) } } .md\:checkbox-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral-content); --input-color: var(--color-neutral) } } .md\:checkbox-info { @layer daisyui.l1.l2 { color: var(--color-info-content); --input-color: var(--color-info) } } .md\:checkbox-success { @layer daisyui.l1.l2 { color: var(--color-success-content); --input-color: var(--color-success) } } .md\:checkbox-warning { @layer daisyui.l1.l2 { color: var(--color-warning-content); --input-color: var(--color-warning) } } .md\:checkbox-error { @layer daisyui.l1.l2 { color: var(--color-error-content); --input-color: var(--color-error) } } .md\:checkbox:disabled { @layer daisyui.l1.l2 { cursor: not-allowed; opacity: .2 } } .md\:checkbox-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 4); padding: .125rem } } .md\:checkbox-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 5); padding: .1875rem } } .md\:checkbox-md { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 6); padding: .25rem } } .md\:checkbox-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 7); padding: .3125rem } } .md\:checkbox-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 8); padding: .375rem } } } @media (width>=1024px) { .lg\:checkbox { @layer daisyui.l1.l2.l3 { border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); cursor: pointer; appearance: none; border-radius: var(--radius-selector); vertical-align: middle; color: var(--color-base-content); box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 0 #0000 inset, 0 0 #0000; --size: calc(var(--size-selector, .25rem) * 6); width: var(--size); height: var(--size); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); flex-shrink: 0; padding: .25rem; transition: background-color .2s, box-shadow .2s; display: inline-block; position: relative; &:before { --tw-content: ""; content: var(--tw-content); opacity: 0; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%); width: 100%; height: 100%; box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; background-color: currentColor; font-size: 1rem; line-height: .75; transition: clip-path .3s .1s, opacity .1s .1s, rotate .3s .1s, translate .3s .1s; display: block; rotate: 45deg } &:focus-visible { outline: 2px solid var(--input-color, currentColor); outline-offset: 2px } &:checked, &[aria-checked=true] { background-color: var(--input-color, #0000); box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)); &:before { clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%); opacity: 1 } @media (forced-colors:active) { &:before { --tw-content: "✔︎"; clip-path: none; background-color: #0000; rotate: 0deg } } @media print { &:before { --tw-content: "✔︎"; clip-path: none; background-color: #0000; rotate: 0deg } } } &:indeterminate { background-color: var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); &:before { opacity: 1; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%); translate: 0 -35%; rotate: 0deg } } } } .lg\:checkbox-primary { @layer daisyui.l1.l2 { color: var(--color-primary-content); --input-color: var(--color-primary) } } .lg\:checkbox-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary-content); --input-color: var(--color-secondary) } } .lg\:checkbox-accent { @layer daisyui.l1.l2 { color: var(--color-accent-content); --input-color: var(--color-accent) } } .lg\:checkbox-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral-content); --input-color: var(--color-neutral) } } .lg\:checkbox-info { @layer daisyui.l1.l2 { color: var(--color-info-content); --input-color: var(--color-info) } } .lg\:checkbox-success { @layer daisyui.l1.l2 { color: var(--color-success-content); --input-color: var(--color-success) } } .lg\:checkbox-warning { @layer daisyui.l1.l2 { color: var(--color-warning-content); --input-color: var(--color-warning) } } .lg\:checkbox-error { @layer daisyui.l1.l2 { color: var(--color-error-content); --input-color: var(--color-error) } } .lg\:checkbox:disabled { @layer daisyui.l1.l2 { cursor: not-allowed; opacity: .2 } } .lg\:checkbox-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 4); padding: .125rem } } .lg\:checkbox-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 5); padding: .1875rem } } .lg\:checkbox-md { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 6); padding: .25rem } } .lg\:checkbox-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 7); padding: .3125rem } } .lg\:checkbox-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 8); padding: .375rem } } } @media (width>=1280px) { .xl\:checkbox { @layer daisyui.l1.l2.l3 { border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); cursor: pointer; appearance: none; border-radius: var(--radius-selector); vertical-align: middle; color: var(--color-base-content); box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 0 #0000 inset, 0 0 #0000; --size: calc(var(--size-selector, .25rem) * 6); width: var(--size); height: var(--size); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); flex-shrink: 0; padding: .25rem; transition: background-color .2s, box-shadow .2s; display: inline-block; position: relative; &:before { --tw-content: ""; content: var(--tw-content); opacity: 0; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%); width: 100%; height: 100%; box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; background-color: currentColor; font-size: 1rem; line-height: .75; transition: clip-path .3s .1s, opacity .1s .1s, rotate .3s .1s, translate .3s .1s; display: block; rotate: 45deg } &:focus-visible { outline: 2px solid var(--input-color, currentColor); outline-offset: 2px } &:checked, &[aria-checked=true] { background-color: var(--input-color, #0000); box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)); &:before { clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%); opacity: 1 } @media (forced-colors:active) { &:before { --tw-content: "✔︎"; clip-path: none; background-color: #0000; rotate: 0deg } } @media print { &:before { --tw-content: "✔︎"; clip-path: none; background-color: #0000; rotate: 0deg } } } &:indeterminate { background-color: var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); &:before { opacity: 1; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%); translate: 0 -35%; rotate: 0deg } } } } .xl\:checkbox-primary { @layer daisyui.l1.l2 { color: var(--color-primary-content); --input-color: var(--color-primary) } } .xl\:checkbox-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary-content); --input-color: var(--color-secondary) } } .xl\:checkbox-accent { @layer daisyui.l1.l2 { color: var(--color-accent-content); --input-color: var(--color-accent) } } .xl\:checkbox-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral-content); --input-color: var(--color-neutral) } } .xl\:checkbox-info { @layer daisyui.l1.l2 { color: var(--color-info-content); --input-color: var(--color-info) } } .xl\:checkbox-success { @layer daisyui.l1.l2 { color: var(--color-success-content); --input-color: var(--color-success) } } .xl\:checkbox-warning { @layer daisyui.l1.l2 { color: var(--color-warning-content); --input-color: var(--color-warning) } } .xl\:checkbox-error { @layer daisyui.l1.l2 { color: var(--color-error-content); --input-color: var(--color-error) } } .xl\:checkbox:disabled { @layer daisyui.l1.l2 { cursor: not-allowed; opacity: .2 } } .xl\:checkbox-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 4); padding: .125rem } } .xl\:checkbox-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 5); padding: .1875rem } } .xl\:checkbox-md { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 6); padding: .25rem } } .xl\:checkbox-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 7); padding: .3125rem } } .xl\:checkbox-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 8); padding: .375rem } } } @media (width>=1536px) { .\32 xl\:checkbox { @layer daisyui.l1.l2.l3 { border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); cursor: pointer; appearance: none; border-radius: var(--radius-selector); vertical-align: middle; color: var(--color-base-content); box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 0 #0000 inset, 0 0 #0000; --size: calc(var(--size-selector, .25rem) * 6); width: var(--size); height: var(--size); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); flex-shrink: 0; padding: .25rem; transition: background-color .2s, box-shadow .2s; display: inline-block; position: relative; &:before { --tw-content: ""; content: var(--tw-content); opacity: 0; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%); width: 100%; height: 100%; box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; background-color: currentColor; font-size: 1rem; line-height: .75; transition: clip-path .3s .1s, opacity .1s .1s, rotate .3s .1s, translate .3s .1s; display: block; rotate: 45deg } &:focus-visible { outline: 2px solid var(--input-color, currentColor); outline-offset: 2px } &:checked, &[aria-checked=true] { background-color: var(--input-color, #0000); box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)); &:before { clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%); opacity: 1 } @media (forced-colors:active) { &:before { --tw-content: "✔︎"; clip-path: none; background-color: #0000; rotate: 0deg } } @media print { &:before { --tw-content: "✔︎"; clip-path: none; background-color: #0000; rotate: 0deg } } } &:indeterminate { background-color: var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); &:before { opacity: 1; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%); translate: 0 -35%; rotate: 0deg } } } } .\32 xl\:checkbox-primary { @layer daisyui.l1.l2 { color: var(--color-primary-content); --input-color: var(--color-primary) } } .\32 xl\:checkbox-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary-content); --input-color: var(--color-secondary) } } .\32 xl\:checkbox-accent { @layer daisyui.l1.l2 { color: var(--color-accent-content); --input-color: var(--color-accent) } } .\32 xl\:checkbox-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral-content); --input-color: var(--color-neutral) } } .\32 xl\:checkbox-info { @layer daisyui.l1.l2 { color: var(--color-info-content); --input-color: var(--color-info) } } .\32 xl\:checkbox-success { @layer daisyui.l1.l2 { color: var(--color-success-content); --input-color: var(--color-success) } } .\32 xl\:checkbox-warning { @layer daisyui.l1.l2 { color: var(--color-warning-content); --input-color: var(--color-warning) } } .\32 xl\:checkbox-error { @layer daisyui.l1.l2 { color: var(--color-error-content); --input-color: var(--color-error) } } .\32 xl\:checkbox:disabled { @layer daisyui.l1.l2 { cursor: not-allowed; opacity: .2 } } .\32 xl\:checkbox-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 4); padding: .125rem } } .\32 xl\:checkbox-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 5); padding: .1875rem } } .\32 xl\:checkbox-md { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 6); padding: .25rem } } .\32 xl\:checkbox-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 7); padding: .3125rem } } .\32 xl\:checkbox-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 8); padding: .375rem } } } .hover-gallery { @layer daisyui.l1.l2.l3 { --items: 1; grid-template-columns: repeat(var(--items), 1fr); gap: 1px; width: 100%; overflow: hidden; &, &:is(figure) { display: inline-grid } &:has(>:nth-child(3)) { --items: 2 } &:has(>:nth-child(4)) { --items: 3 } &:has(>:nth-child(5)) { --items: 4 } &:has(>:nth-child(6)) { --items: 5 } &:has(>:nth-child(7)) { --items: 6 } &:has(>:nth-child(8)) { --items: 7 } &:has(>:nth-child(9)) { --items: 8 } &:has(>:nth-child(10)) { --items: 9 } &>* { opacity: 0; object-fit: cover; grid-row: 1; width: 100%; height: 100%; &:first-child { opacity: 1; grid-column: 1/-1 } &:nth-child(2) { grid-column: 1 } &:nth-child(3) { grid-column: 2 } &:nth-child(4) { grid-column: 3 } &:nth-child(5) { grid-column: 4 } &:nth-child(6) { grid-column: 5 } &:nth-child(7) { grid-column: 6 } &:nth-child(8) { grid-column: 7 } &:nth-child(9) { grid-column: 8 } &:nth-child(10) { grid-column: 9 } &:nth-child(n+11) { display: none } } &>:hover { opacity: 1; grid-column: 1/-1 } &:has(:hover) { &>:first-child { display: none } } } } @media (width>=640px) { .sm\:hover-gallery { @layer daisyui.l1.l2.l3 { --items: 1; grid-template-columns: repeat(var(--items), 1fr); gap: 1px; width: 100%; overflow: hidden; &, &:is(figure) { display: inline-grid } &:has(>:nth-child(3)) { --items: 2 } &:has(>:nth-child(4)) { --items: 3 } &:has(>:nth-child(5)) { --items: 4 } &:has(>:nth-child(6)) { --items: 5 } &:has(>:nth-child(7)) { --items: 6 } &:has(>:nth-child(8)) { --items: 7 } &:has(>:nth-child(9)) { --items: 8 } &:has(>:nth-child(10)) { --items: 9 } &>* { opacity: 0; object-fit: cover; grid-row: 1; width: 100%; height: 100%; &:first-child { opacity: 1; grid-column: 1/-1 } &:nth-child(2) { grid-column: 1 } &:nth-child(3) { grid-column: 2 } &:nth-child(4) { grid-column: 3 } &:nth-child(5) { grid-column: 4 } &:nth-child(6) { grid-column: 5 } &:nth-child(7) { grid-column: 6 } &:nth-child(8) { grid-column: 7 } &:nth-child(9) { grid-column: 8 } &:nth-child(10) { grid-column: 9 } &:nth-child(n+11) { display: none } } &>:hover { opacity: 1; grid-column: 1/-1 } &:has(:hover) { &>:first-child { display: none } } } } } @media (width>=768px) { .md\:hover-gallery { @layer daisyui.l1.l2.l3 { --items: 1; grid-template-columns: repeat(var(--items), 1fr); gap: 1px; width: 100%; overflow: hidden; &, &:is(figure) { display: inline-grid } &:has(>:nth-child(3)) { --items: 2 } &:has(>:nth-child(4)) { --items: 3 } &:has(>:nth-child(5)) { --items: 4 } &:has(>:nth-child(6)) { --items: 5 } &:has(>:nth-child(7)) { --items: 6 } &:has(>:nth-child(8)) { --items: 7 } &:has(>:nth-child(9)) { --items: 8 } &:has(>:nth-child(10)) { --items: 9 } &>* { opacity: 0; object-fit: cover; grid-row: 1; width: 100%; height: 100%; &:first-child { opacity: 1; grid-column: 1/-1 } &:nth-child(2) { grid-column: 1 } &:nth-child(3) { grid-column: 2 } &:nth-child(4) { grid-column: 3 } &:nth-child(5) { grid-column: 4 } &:nth-child(6) { grid-column: 5 } &:nth-child(7) { grid-column: 6 } &:nth-child(8) { grid-column: 7 } &:nth-child(9) { grid-column: 8 } &:nth-child(10) { grid-column: 9 } &:nth-child(n+11) { display: none } } &>:hover { opacity: 1; grid-column: 1/-1 } &:has(:hover) { &>:first-child { display: none } } } } } @media (width>=1024px) { .lg\:hover-gallery { @layer daisyui.l1.l2.l3 { --items: 1; grid-template-columns: repeat(var(--items), 1fr); gap: 1px; width: 100%; overflow: hidden; &, &:is(figure) { display: inline-grid } &:has(>:nth-child(3)) { --items: 2 } &:has(>:nth-child(4)) { --items: 3 } &:has(>:nth-child(5)) { --items: 4 } &:has(>:nth-child(6)) { --items: 5 } &:has(>:nth-child(7)) { --items: 6 } &:has(>:nth-child(8)) { --items: 7 } &:has(>:nth-child(9)) { --items: 8 } &:has(>:nth-child(10)) { --items: 9 } &>* { opacity: 0; object-fit: cover; grid-row: 1; width: 100%; height: 100%; &:first-child { opacity: 1; grid-column: 1/-1 } &:nth-child(2) { grid-column: 1 } &:nth-child(3) { grid-column: 2 } &:nth-child(4) { grid-column: 3 } &:nth-child(5) { grid-column: 4 } &:nth-child(6) { grid-column: 5 } &:nth-child(7) { grid-column: 6 } &:nth-child(8) { grid-column: 7 } &:nth-child(9) { grid-column: 8 } &:nth-child(10) { grid-column: 9 } &:nth-child(n+11) { display: none } } &>:hover { opacity: 1; grid-column: 1/-1 } &:has(:hover) { &>:first-child { display: none } } } } } @media (width>=1280px) { .xl\:hover-gallery { @layer daisyui.l1.l2.l3 { --items: 1; grid-template-columns: repeat(var(--items), 1fr); gap: 1px; width: 100%; overflow: hidden; &, &:is(figure) { display: inline-grid } &:has(>:nth-child(3)) { --items: 2 } &:has(>:nth-child(4)) { --items: 3 } &:has(>:nth-child(5)) { --items: 4 } &:has(>:nth-child(6)) { --items: 5 } &:has(>:nth-child(7)) { --items: 6 } &:has(>:nth-child(8)) { --items: 7 } &:has(>:nth-child(9)) { --items: 8 } &:has(>:nth-child(10)) { --items: 9 } &>* { opacity: 0; object-fit: cover; grid-row: 1; width: 100%; height: 100%; &:first-child { opacity: 1; grid-column: 1/-1 } &:nth-child(2) { grid-column: 1 } &:nth-child(3) { grid-column: 2 } &:nth-child(4) { grid-column: 3 } &:nth-child(5) { grid-column: 4 } &:nth-child(6) { grid-column: 5 } &:nth-child(7) { grid-column: 6 } &:nth-child(8) { grid-column: 7 } &:nth-child(9) { grid-column: 8 } &:nth-child(10) { grid-column: 9 } &:nth-child(n+11) { display: none } } &>:hover { opacity: 1; grid-column: 1/-1 } &:has(:hover) { &>:first-child { display: none } } } } } @media (width>=1536px) { .\32 xl\:hover-gallery { @layer daisyui.l1.l2.l3 { --items: 1; grid-template-columns: repeat(var(--items), 1fr); gap: 1px; width: 100%; overflow: hidden; &, &:is(figure) { display: inline-grid } &:has(>:nth-child(3)) { --items: 2 } &:has(>:nth-child(4)) { --items: 3 } &:has(>:nth-child(5)) { --items: 4 } &:has(>:nth-child(6)) { --items: 5 } &:has(>:nth-child(7)) { --items: 6 } &:has(>:nth-child(8)) { --items: 7 } &:has(>:nth-child(9)) { --items: 8 } &:has(>:nth-child(10)) { --items: 9 } &>* { opacity: 0; object-fit: cover; grid-row: 1; width: 100%; height: 100%; &:first-child { opacity: 1; grid-column: 1/-1 } &:nth-child(2) { grid-column: 1 } &:nth-child(3) { grid-column: 2 } &:nth-child(4) { grid-column: 3 } &:nth-child(5) { grid-column: 4 } &:nth-child(6) { grid-column: 5 } &:nth-child(7) { grid-column: 6 } &:nth-child(8) { grid-column: 7 } &:nth-child(9) { grid-column: 8 } &:nth-child(10) { grid-column: 9 } &:nth-child(n+11) { display: none } } &>:hover { opacity: 1; grid-column: 1/-1 } &:has(:hover) { &>:first-child { display: none } } } } } .stack { @layer daisyui.l1.l2.l3 { grid-template-rows: 3px 4px 1fr 4px 3px; grid-template-columns: 3px 4px 1fr 4px 3px; display: inline-grid; &>* { width: 100%; height: 100%; &:nth-child(n+2) { opacity: .7; width: 100% } &:nth-child(2) { z-index: 2; opacity: .9 } &:first-child { z-index: 3; width: 100% } } } @layer daisyui.l1.l2 { &, &.stack-bottom { &>* { grid-area: 3/3/6/4; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 1/1/4/6 } } } &.stack-top { &>* { grid-area: 1/3/4/4; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 3/1/6/6 } } } &.stack-start { &>* { grid-area: 3/1/4/4; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 1/3/6/6 } } } &.stack-end { &>* { grid-area: 3/3/4/6; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 1/1/6/4 } } } } } @media (width>=640px) { .sm\:stack { @layer daisyui.l1.l2.l3 { grid-template-rows: 3px 4px 1fr 4px 3px; grid-template-columns: 3px 4px 1fr 4px 3px; display: inline-grid; &>* { width: 100%; height: 100%; &:nth-child(n+2) { opacity: .7; width: 100% } &:nth-child(2) { z-index: 2; opacity: .9 } &:first-child { z-index: 3; width: 100% } } } @layer daisyui.l1.l2 { &, &.stack-bottom { &>* { grid-area: 3/3/6/4; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 1/1/4/6 } } } &.stack-top { &>* { grid-area: 1/3/4/4; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 3/1/6/6 } } } &.stack-start { &>* { grid-area: 3/1/4/4; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 1/3/6/6 } } } &.stack-end { &>* { grid-area: 3/3/4/6; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 1/1/6/4 } } } } } } @media (width>=768px) { .md\:stack { @layer daisyui.l1.l2.l3 { grid-template-rows: 3px 4px 1fr 4px 3px; grid-template-columns: 3px 4px 1fr 4px 3px; display: inline-grid; &>* { width: 100%; height: 100%; &:nth-child(n+2) { opacity: .7; width: 100% } &:nth-child(2) { z-index: 2; opacity: .9 } &:first-child { z-index: 3; width: 100% } } } @layer daisyui.l1.l2 { &, &.stack-bottom { &>* { grid-area: 3/3/6/4; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 1/1/4/6 } } } &.stack-top { &>* { grid-area: 1/3/4/4; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 3/1/6/6 } } } &.stack-start { &>* { grid-area: 3/1/4/4; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 1/3/6/6 } } } &.stack-end { &>* { grid-area: 3/3/4/6; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 1/1/6/4 } } } } } } @media (width>=1024px) { .lg\:stack { @layer daisyui.l1.l2.l3 { grid-template-rows: 3px 4px 1fr 4px 3px; grid-template-columns: 3px 4px 1fr 4px 3px; display: inline-grid; &>* { width: 100%; height: 100%; &:nth-child(n+2) { opacity: .7; width: 100% } &:nth-child(2) { z-index: 2; opacity: .9 } &:first-child { z-index: 3; width: 100% } } } @layer daisyui.l1.l2 { &, &.stack-bottom { &>* { grid-area: 3/3/6/4; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 1/1/4/6 } } } &.stack-top { &>* { grid-area: 1/3/4/4; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 3/1/6/6 } } } &.stack-start { &>* { grid-area: 3/1/4/4; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 1/3/6/6 } } } &.stack-end { &>* { grid-area: 3/3/4/6; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 1/1/6/4 } } } } } } @media (width>=1280px) { .xl\:stack { @layer daisyui.l1.l2.l3 { grid-template-rows: 3px 4px 1fr 4px 3px; grid-template-columns: 3px 4px 1fr 4px 3px; display: inline-grid; &>* { width: 100%; height: 100%; &:nth-child(n+2) { opacity: .7; width: 100% } &:nth-child(2) { z-index: 2; opacity: .9 } &:first-child { z-index: 3; width: 100% } } } @layer daisyui.l1.l2 { &, &.stack-bottom { &>* { grid-area: 3/3/6/4; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 1/1/4/6 } } } &.stack-top { &>* { grid-area: 1/3/4/4; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 3/1/6/6 } } } &.stack-start { &>* { grid-area: 3/1/4/4; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 1/3/6/6 } } } &.stack-end { &>* { grid-area: 3/3/4/6; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 1/1/6/4 } } } } } } @media (width>=1536px) { .\32 xl\:stack { @layer daisyui.l1.l2.l3 { grid-template-rows: 3px 4px 1fr 4px 3px; grid-template-columns: 3px 4px 1fr 4px 3px; display: inline-grid; &>* { width: 100%; height: 100%; &:nth-child(n+2) { opacity: .7; width: 100% } &:nth-child(2) { z-index: 2; opacity: .9 } &:first-child { z-index: 3; width: 100% } } } @layer daisyui.l1.l2 { &, &.stack-bottom { &>* { grid-area: 3/3/6/4; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 1/1/4/6 } } } &.stack-top { &>* { grid-area: 1/3/4/4; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 3/1/6/6 } } } &.stack-start { &>* { grid-area: 3/1/4/4; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 1/3/6/6 } } } &.stack-end { &>* { grid-area: 3/3/4/6; &:nth-child(2) { grid-area: 2/2/5/5 } &:first-child { grid-area: 1/1/6/4 } } } } } } .otp { @layer daisyui.l1.l2.l3 { font-family: var(--font-mono); clip-path: inset(-3.5px 3.5px -3.5px -3.5px); border-radius: var(--radius-field); gap: var(--otp-gap); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); --otp-ch: 1ch; direction: ltr; font-size: 1.75rem; display: inline-flex; position: relative; @supports (font:-apple-system-body) { --otp-ch: .618164em } --otp-gap:calc(var(--otp-ch) * .5); --otp-w:calc(var(--otp-ch) * 2); --otp-size:calc(var(--size-field, .25rem) * 10); --stride:calc(var(--otp-w) + var(--otp-gap)); &>input { pointer-events: none; z-index: 1; appearance: none; border-style: var(--tw-border-style); outline-style: var(--tw-outline-style); field-sizing: content; letter-spacing: calc(var(--stride) - var(--otp-ch)); font-variant-numeric: tabular-nums; background-color: #0000; border-width: 0; outline-width: 0; margin: 0; padding: 0; padding-inline-start: calc(var(--otp-ch) * .5 + var(--border)); line-height: 1; inset-inline-start: 0; &::selection { color: color-mix(in oklab, var(--color-base-content) 20%, #0000); background-color: #0000 } &:valid { caret-color: #0000 } } &:has(>span:first-child) { width: calc(var(--stride) * 1) } &:has(>span:nth-child(2)) { width: calc(var(--stride) * 2) } &:has(>span:nth-child(3)) { width: calc(var(--stride) * 3) } &:has(>span:nth-child(4)) { width: calc(var(--stride) * 4) } &:has(>span:nth-child(5)) { width: calc(var(--stride) * 5) } &:has(>span:nth-child(6)) { width: calc(var(--stride) * 6) } &:has(>span:nth-child(7)) { width: calc(var(--stride) * 7) } &:has(>span:nth-child(8)) { width: calc(var(--stride) * 8) } &>span { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); inline-size: var(--otp-w); block-size: var(--otp-size); background-color: var(--color-base-100); border: var(--border) solid var(--input-color); border-radius: inherit; outline-offset: 1px; box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; outline: 2px solid #0000; transition: border-color .2s; display: flex; position: absolute; &:first-child { left: 1px; @supports (font:-apple-system-body) { left: 2px } @supports ((-moz-appearance:none)) { left: 0 } } &:nth-child(2) { left: calc(var(--stride) * 1); transition-delay: 20ms } &:nth-child(3) { left: calc(var(--stride) * 2); transition-delay: 40ms } &:nth-child(4) { left: calc(var(--stride) * 3); transition-delay: 60ms } &:nth-child(5) { left: calc(var(--stride) * 4); transition-delay: 80ms } &:nth-child(6) { left: calc(var(--stride) * 5); transition-delay: .1s } &:nth-child(7) { left: calc(var(--stride) * 6); transition-delay: .12s } &:nth-child(8) { left: calc(var(--stride) * 7); transition-delay: .14s } } &:has(input:valid:focus) { &>span { outline: 2px solid var(--input-color); outline-offset: 1px } &:after { opacity: 0 } } &:after { content: ""; width: var(--otp-w); height: var(--otp-size); border-radius: var(--radius-field); outline-offset: 1px; z-index: 10; outline: 2px solid #0000; flex-shrink: 0; margin-inline-start: calc(-1 * (var(--otp-gap) + var(--otp-ch) * .5 + var(--border))) } &:focus-within { isolation: isolate; --input-color: var(--color-base-content); &>span { box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) } &:after { outline-color: var(--input-color) } } } } .otp-joined { --otp-gap: 0rem; clip-path: inset(-3.5px 0 -3.5px -3.5px); &>span { &:first-of-type { border-start-end-radius: 0; border-end-end-radius: 0 } &:not(&:last-of-type) { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 0 } &:not(&:first-of-type, &:last-of-type) { border-radius: 0 } &:last-of-type { border-start-start-radius: 0; border-end-start-radius: 0 } } &:after { outline-offset: calc((-1 * var(--border)) - 3px); @supports (font:-apple-system-body) { --otp-w: calc(var(--otp-ch) * 2 - 1px) } } &:has(input:valid:focus) { &>span { outline-offset: calc((-1 * var(--border)) - 3px) } } } .otp-xs { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 6); font-size: 1.25rem } } .otp-sm { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 8); font-size: 1.5rem } } .otp-md { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 10); font-size: 1.75rem } } .otp-lg { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 12); font-size: 2rem } } .otp-xl { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 14); font-size: 2.5rem } } .otp-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .otp-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .otp-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .otp-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .otp-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .otp-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .otp-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .otp-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-error) } } } @media (width>=640px) { .sm\:otp { @layer daisyui.l1.l2.l3 { font-family: var(--font-mono); clip-path: inset(-3.5px 3.5px -3.5px -3.5px); border-radius: var(--radius-field); gap: var(--otp-gap); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); --otp-ch: 1ch; direction: ltr; font-size: 1.75rem; display: inline-flex; position: relative; @supports (font:-apple-system-body) { --otp-ch: .618164em } --otp-gap:calc(var(--otp-ch) * .5); --otp-w:calc(var(--otp-ch) * 2); --otp-size:calc(var(--size-field, .25rem) * 10); --stride:calc(var(--otp-w) + var(--otp-gap)); &>input { pointer-events: none; z-index: 1; appearance: none; border-style: var(--tw-border-style); outline-style: var(--tw-outline-style); field-sizing: content; letter-spacing: calc(var(--stride) - var(--otp-ch)); font-variant-numeric: tabular-nums; background-color: #0000; border-width: 0; outline-width: 0; margin: 0; padding: 0; padding-inline-start: calc(var(--otp-ch) * .5 + var(--border)); line-height: 1; inset-inline-start: 0; &::selection { color: color-mix(in oklab, var(--color-base-content) 20%, #0000); background-color: #0000 } &:valid { caret-color: #0000 } } &:has(>span:first-child) { width: calc(var(--stride) * 1) } &:has(>span:nth-child(2)) { width: calc(var(--stride) * 2) } &:has(>span:nth-child(3)) { width: calc(var(--stride) * 3) } &:has(>span:nth-child(4)) { width: calc(var(--stride) * 4) } &:has(>span:nth-child(5)) { width: calc(var(--stride) * 5) } &:has(>span:nth-child(6)) { width: calc(var(--stride) * 6) } &:has(>span:nth-child(7)) { width: calc(var(--stride) * 7) } &:has(>span:nth-child(8)) { width: calc(var(--stride) * 8) } &>span { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); inline-size: var(--otp-w); block-size: var(--otp-size); background-color: var(--color-base-100); border: var(--border) solid var(--input-color); border-radius: inherit; outline-offset: 1px; box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; outline: 2px solid #0000; transition: border-color .2s; display: flex; position: absolute; &:first-child { left: 1px; @supports (font:-apple-system-body) { left: 2px } @supports ((-moz-appearance:none)) { left: 0 } } &:nth-child(2) { left: calc(var(--stride) * 1); transition-delay: 20ms } &:nth-child(3) { left: calc(var(--stride) * 2); transition-delay: 40ms } &:nth-child(4) { left: calc(var(--stride) * 3); transition-delay: 60ms } &:nth-child(5) { left: calc(var(--stride) * 4); transition-delay: 80ms } &:nth-child(6) { left: calc(var(--stride) * 5); transition-delay: .1s } &:nth-child(7) { left: calc(var(--stride) * 6); transition-delay: .12s } &:nth-child(8) { left: calc(var(--stride) * 7); transition-delay: .14s } } &:has(input:valid:focus) { &>span { outline: 2px solid var(--input-color); outline-offset: 1px } &:after { opacity: 0 } } &:after { content: ""; width: var(--otp-w); height: var(--otp-size); border-radius: var(--radius-field); outline-offset: 1px; z-index: 10; outline: 2px solid #0000; flex-shrink: 0; margin-inline-start: calc(-1 * (var(--otp-gap) + var(--otp-ch) * .5 + var(--border))) } &:focus-within { isolation: isolate; --input-color: var(--color-base-content); &>span { box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) } &:after { outline-color: var(--input-color) } } } } .sm\:otp-joined { --otp-gap: 0rem; clip-path: inset(-3.5px 0 -3.5px -3.5px); &>span { &:first-of-type { border-start-end-radius: 0; border-end-end-radius: 0 } &:not(&:last-of-type) { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 0 } &:not(&:first-of-type, &:last-of-type) { border-radius: 0 } &:last-of-type { border-start-start-radius: 0; border-end-start-radius: 0 } } &:after { outline-offset: calc((-1 * var(--border)) - 3px); @supports (font:-apple-system-body) { --otp-w: calc(var(--otp-ch) * 2 - 1px) } } &:has(input:valid:focus) { &>span { outline-offset: calc((-1 * var(--border)) - 3px) } } } .sm\:otp-xs { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 6); font-size: 1.25rem } } .sm\:otp-sm { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 8); font-size: 1.5rem } } .sm\:otp-md { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 10); font-size: 1.75rem } } .sm\:otp-lg { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 12); font-size: 2rem } } .sm\:otp-xl { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 14); font-size: 2.5rem } } .sm\:otp-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .sm\:otp-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .sm\:otp-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .sm\:otp-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .sm\:otp-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .sm\:otp-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .sm\:otp-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .sm\:otp-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-error) } } } } @media (width>=768px) { .md\:otp { @layer daisyui.l1.l2.l3 { font-family: var(--font-mono); clip-path: inset(-3.5px 3.5px -3.5px -3.5px); border-radius: var(--radius-field); gap: var(--otp-gap); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); --otp-ch: 1ch; direction: ltr; font-size: 1.75rem; display: inline-flex; position: relative; @supports (font:-apple-system-body) { --otp-ch: .618164em } --otp-gap:calc(var(--otp-ch) * .5); --otp-w:calc(var(--otp-ch) * 2); --otp-size:calc(var(--size-field, .25rem) * 10); --stride:calc(var(--otp-w) + var(--otp-gap)); &>input { pointer-events: none; z-index: 1; appearance: none; border-style: var(--tw-border-style); outline-style: var(--tw-outline-style); field-sizing: content; letter-spacing: calc(var(--stride) - var(--otp-ch)); font-variant-numeric: tabular-nums; background-color: #0000; border-width: 0; outline-width: 0; margin: 0; padding: 0; padding-inline-start: calc(var(--otp-ch) * .5 + var(--border)); line-height: 1; inset-inline-start: 0; &::selection { color: color-mix(in oklab, var(--color-base-content) 20%, #0000); background-color: #0000 } &:valid { caret-color: #0000 } } &:has(>span:first-child) { width: calc(var(--stride) * 1) } &:has(>span:nth-child(2)) { width: calc(var(--stride) * 2) } &:has(>span:nth-child(3)) { width: calc(var(--stride) * 3) } &:has(>span:nth-child(4)) { width: calc(var(--stride) * 4) } &:has(>span:nth-child(5)) { width: calc(var(--stride) * 5) } &:has(>span:nth-child(6)) { width: calc(var(--stride) * 6) } &:has(>span:nth-child(7)) { width: calc(var(--stride) * 7) } &:has(>span:nth-child(8)) { width: calc(var(--stride) * 8) } &>span { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); inline-size: var(--otp-w); block-size: var(--otp-size); background-color: var(--color-base-100); border: var(--border) solid var(--input-color); border-radius: inherit; outline-offset: 1px; box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; outline: 2px solid #0000; transition: border-color .2s; display: flex; position: absolute; &:first-child { left: 1px; @supports (font:-apple-system-body) { left: 2px } @supports ((-moz-appearance:none)) { left: 0 } } &:nth-child(2) { left: calc(var(--stride) * 1); transition-delay: 20ms } &:nth-child(3) { left: calc(var(--stride) * 2); transition-delay: 40ms } &:nth-child(4) { left: calc(var(--stride) * 3); transition-delay: 60ms } &:nth-child(5) { left: calc(var(--stride) * 4); transition-delay: 80ms } &:nth-child(6) { left: calc(var(--stride) * 5); transition-delay: .1s } &:nth-child(7) { left: calc(var(--stride) * 6); transition-delay: .12s } &:nth-child(8) { left: calc(var(--stride) * 7); transition-delay: .14s } } &:has(input:valid:focus) { &>span { outline: 2px solid var(--input-color); outline-offset: 1px } &:after { opacity: 0 } } &:after { content: ""; width: var(--otp-w); height: var(--otp-size); border-radius: var(--radius-field); outline-offset: 1px; z-index: 10; outline: 2px solid #0000; flex-shrink: 0; margin-inline-start: calc(-1 * (var(--otp-gap) + var(--otp-ch) * .5 + var(--border))) } &:focus-within { isolation: isolate; --input-color: var(--color-base-content); &>span { box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) } &:after { outline-color: var(--input-color) } } } } .md\:otp-joined { --otp-gap: 0rem; clip-path: inset(-3.5px 0 -3.5px -3.5px); &>span { &:first-of-type { border-start-end-radius: 0; border-end-end-radius: 0 } &:not(&:last-of-type) { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 0 } &:not(&:first-of-type, &:last-of-type) { border-radius: 0 } &:last-of-type { border-start-start-radius: 0; border-end-start-radius: 0 } } &:after { outline-offset: calc((-1 * var(--border)) - 3px); @supports (font:-apple-system-body) { --otp-w: calc(var(--otp-ch) * 2 - 1px) } } &:has(input:valid:focus) { &>span { outline-offset: calc((-1 * var(--border)) - 3px) } } } .md\:otp-xs { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 6); font-size: 1.25rem } } .md\:otp-sm { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 8); font-size: 1.5rem } } .md\:otp-md { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 10); font-size: 1.75rem } } .md\:otp-lg { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 12); font-size: 2rem } } .md\:otp-xl { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 14); font-size: 2.5rem } } .md\:otp-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .md\:otp-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .md\:otp-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .md\:otp-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .md\:otp-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .md\:otp-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .md\:otp-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .md\:otp-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-error) } } } } @media (width>=1024px) { .lg\:otp { @layer daisyui.l1.l2.l3 { font-family: var(--font-mono); clip-path: inset(-3.5px 3.5px -3.5px -3.5px); border-radius: var(--radius-field); gap: var(--otp-gap); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); --otp-ch: 1ch; direction: ltr; font-size: 1.75rem; display: inline-flex; position: relative; @supports (font:-apple-system-body) { --otp-ch: .618164em } --otp-gap:calc(var(--otp-ch) * .5); --otp-w:calc(var(--otp-ch) * 2); --otp-size:calc(var(--size-field, .25rem) * 10); --stride:calc(var(--otp-w) + var(--otp-gap)); &>input { pointer-events: none; z-index: 1; appearance: none; border-style: var(--tw-border-style); outline-style: var(--tw-outline-style); field-sizing: content; letter-spacing: calc(var(--stride) - var(--otp-ch)); font-variant-numeric: tabular-nums; background-color: #0000; border-width: 0; outline-width: 0; margin: 0; padding: 0; padding-inline-start: calc(var(--otp-ch) * .5 + var(--border)); line-height: 1; inset-inline-start: 0; &::selection { color: color-mix(in oklab, var(--color-base-content) 20%, #0000); background-color: #0000 } &:valid { caret-color: #0000 } } &:has(>span:first-child) { width: calc(var(--stride) * 1) } &:has(>span:nth-child(2)) { width: calc(var(--stride) * 2) } &:has(>span:nth-child(3)) { width: calc(var(--stride) * 3) } &:has(>span:nth-child(4)) { width: calc(var(--stride) * 4) } &:has(>span:nth-child(5)) { width: calc(var(--stride) * 5) } &:has(>span:nth-child(6)) { width: calc(var(--stride) * 6) } &:has(>span:nth-child(7)) { width: calc(var(--stride) * 7) } &:has(>span:nth-child(8)) { width: calc(var(--stride) * 8) } &>span { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); inline-size: var(--otp-w); block-size: var(--otp-size); background-color: var(--color-base-100); border: var(--border) solid var(--input-color); border-radius: inherit; outline-offset: 1px; box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; outline: 2px solid #0000; transition: border-color .2s; display: flex; position: absolute; &:first-child { left: 1px; @supports (font:-apple-system-body) { left: 2px } @supports ((-moz-appearance:none)) { left: 0 } } &:nth-child(2) { left: calc(var(--stride) * 1); transition-delay: 20ms } &:nth-child(3) { left: calc(var(--stride) * 2); transition-delay: 40ms } &:nth-child(4) { left: calc(var(--stride) * 3); transition-delay: 60ms } &:nth-child(5) { left: calc(var(--stride) * 4); transition-delay: 80ms } &:nth-child(6) { left: calc(var(--stride) * 5); transition-delay: .1s } &:nth-child(7) { left: calc(var(--stride) * 6); transition-delay: .12s } &:nth-child(8) { left: calc(var(--stride) * 7); transition-delay: .14s } } &:has(input:valid:focus) { &>span { outline: 2px solid var(--input-color); outline-offset: 1px } &:after { opacity: 0 } } &:after { content: ""; width: var(--otp-w); height: var(--otp-size); border-radius: var(--radius-field); outline-offset: 1px; z-index: 10; outline: 2px solid #0000; flex-shrink: 0; margin-inline-start: calc(-1 * (var(--otp-gap) + var(--otp-ch) * .5 + var(--border))) } &:focus-within { isolation: isolate; --input-color: var(--color-base-content); &>span { box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) } &:after { outline-color: var(--input-color) } } } } .lg\:otp-joined { --otp-gap: 0rem; clip-path: inset(-3.5px 0 -3.5px -3.5px); &>span { &:first-of-type { border-start-end-radius: 0; border-end-end-radius: 0 } &:not(&:last-of-type) { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 0 } &:not(&:first-of-type, &:last-of-type) { border-radius: 0 } &:last-of-type { border-start-start-radius: 0; border-end-start-radius: 0 } } &:after { outline-offset: calc((-1 * var(--border)) - 3px); @supports (font:-apple-system-body) { --otp-w: calc(var(--otp-ch) * 2 - 1px) } } &:has(input:valid:focus) { &>span { outline-offset: calc((-1 * var(--border)) - 3px) } } } .lg\:otp-xs { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 6); font-size: 1.25rem } } .lg\:otp-sm { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 8); font-size: 1.5rem } } .lg\:otp-md { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 10); font-size: 1.75rem } } .lg\:otp-lg { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 12); font-size: 2rem } } .lg\:otp-xl { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 14); font-size: 2.5rem } } .lg\:otp-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .lg\:otp-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .lg\:otp-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .lg\:otp-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .lg\:otp-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .lg\:otp-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .lg\:otp-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .lg\:otp-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-error) } } } } @media (width>=1280px) { .xl\:otp { @layer daisyui.l1.l2.l3 { font-family: var(--font-mono); clip-path: inset(-3.5px 3.5px -3.5px -3.5px); border-radius: var(--radius-field); gap: var(--otp-gap); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); --otp-ch: 1ch; direction: ltr; font-size: 1.75rem; display: inline-flex; position: relative; @supports (font:-apple-system-body) { --otp-ch: .618164em } --otp-gap:calc(var(--otp-ch) * .5); --otp-w:calc(var(--otp-ch) * 2); --otp-size:calc(var(--size-field, .25rem) * 10); --stride:calc(var(--otp-w) + var(--otp-gap)); &>input { pointer-events: none; z-index: 1; appearance: none; border-style: var(--tw-border-style); outline-style: var(--tw-outline-style); field-sizing: content; letter-spacing: calc(var(--stride) - var(--otp-ch)); font-variant-numeric: tabular-nums; background-color: #0000; border-width: 0; outline-width: 0; margin: 0; padding: 0; padding-inline-start: calc(var(--otp-ch) * .5 + var(--border)); line-height: 1; inset-inline-start: 0; &::selection { color: color-mix(in oklab, var(--color-base-content) 20%, #0000); background-color: #0000 } &:valid { caret-color: #0000 } } &:has(>span:first-child) { width: calc(var(--stride) * 1) } &:has(>span:nth-child(2)) { width: calc(var(--stride) * 2) } &:has(>span:nth-child(3)) { width: calc(var(--stride) * 3) } &:has(>span:nth-child(4)) { width: calc(var(--stride) * 4) } &:has(>span:nth-child(5)) { width: calc(var(--stride) * 5) } &:has(>span:nth-child(6)) { width: calc(var(--stride) * 6) } &:has(>span:nth-child(7)) { width: calc(var(--stride) * 7) } &:has(>span:nth-child(8)) { width: calc(var(--stride) * 8) } &>span { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); inline-size: var(--otp-w); block-size: var(--otp-size); background-color: var(--color-base-100); border: var(--border) solid var(--input-color); border-radius: inherit; outline-offset: 1px; box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; outline: 2px solid #0000; transition: border-color .2s; display: flex; position: absolute; &:first-child { left: 1px; @supports (font:-apple-system-body) { left: 2px } @supports ((-moz-appearance:none)) { left: 0 } } &:nth-child(2) { left: calc(var(--stride) * 1); transition-delay: 20ms } &:nth-child(3) { left: calc(var(--stride) * 2); transition-delay: 40ms } &:nth-child(4) { left: calc(var(--stride) * 3); transition-delay: 60ms } &:nth-child(5) { left: calc(var(--stride) * 4); transition-delay: 80ms } &:nth-child(6) { left: calc(var(--stride) * 5); transition-delay: .1s } &:nth-child(7) { left: calc(var(--stride) * 6); transition-delay: .12s } &:nth-child(8) { left: calc(var(--stride) * 7); transition-delay: .14s } } &:has(input:valid:focus) { &>span { outline: 2px solid var(--input-color); outline-offset: 1px } &:after { opacity: 0 } } &:after { content: ""; width: var(--otp-w); height: var(--otp-size); border-radius: var(--radius-field); outline-offset: 1px; z-index: 10; outline: 2px solid #0000; flex-shrink: 0; margin-inline-start: calc(-1 * (var(--otp-gap) + var(--otp-ch) * .5 + var(--border))) } &:focus-within { isolation: isolate; --input-color: var(--color-base-content); &>span { box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) } &:after { outline-color: var(--input-color) } } } } .xl\:otp-joined { --otp-gap: 0rem; clip-path: inset(-3.5px 0 -3.5px -3.5px); &>span { &:first-of-type { border-start-end-radius: 0; border-end-end-radius: 0 } &:not(&:last-of-type) { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 0 } &:not(&:first-of-type, &:last-of-type) { border-radius: 0 } &:last-of-type { border-start-start-radius: 0; border-end-start-radius: 0 } } &:after { outline-offset: calc((-1 * var(--border)) - 3px); @supports (font:-apple-system-body) { --otp-w: calc(var(--otp-ch) * 2 - 1px) } } &:has(input:valid:focus) { &>span { outline-offset: calc((-1 * var(--border)) - 3px) } } } .xl\:otp-xs { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 6); font-size: 1.25rem } } .xl\:otp-sm { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 8); font-size: 1.5rem } } .xl\:otp-md { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 10); font-size: 1.75rem } } .xl\:otp-lg { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 12); font-size: 2rem } } .xl\:otp-xl { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 14); font-size: 2.5rem } } .xl\:otp-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .xl\:otp-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .xl\:otp-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .xl\:otp-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .xl\:otp-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .xl\:otp-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .xl\:otp-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .xl\:otp-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-error) } } } } @media (width>=1536px) { .\32 xl\:otp { @layer daisyui.l1.l2.l3 { font-family: var(--font-mono); clip-path: inset(-3.5px 3.5px -3.5px -3.5px); border-radius: var(--radius-field); gap: var(--otp-gap); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); --otp-ch: 1ch; direction: ltr; font-size: 1.75rem; display: inline-flex; position: relative; @supports (font:-apple-system-body) { --otp-ch: .618164em } --otp-gap:calc(var(--otp-ch) * .5); --otp-w:calc(var(--otp-ch) * 2); --otp-size:calc(var(--size-field, .25rem) * 10); --stride:calc(var(--otp-w) + var(--otp-gap)); &>input { pointer-events: none; z-index: 1; appearance: none; border-style: var(--tw-border-style); outline-style: var(--tw-outline-style); field-sizing: content; letter-spacing: calc(var(--stride) - var(--otp-ch)); font-variant-numeric: tabular-nums; background-color: #0000; border-width: 0; outline-width: 0; margin: 0; padding: 0; padding-inline-start: calc(var(--otp-ch) * .5 + var(--border)); line-height: 1; inset-inline-start: 0; &::selection { color: color-mix(in oklab, var(--color-base-content) 20%, #0000); background-color: #0000 } &:valid { caret-color: #0000 } } &:has(>span:first-child) { width: calc(var(--stride) * 1) } &:has(>span:nth-child(2)) { width: calc(var(--stride) * 2) } &:has(>span:nth-child(3)) { width: calc(var(--stride) * 3) } &:has(>span:nth-child(4)) { width: calc(var(--stride) * 4) } &:has(>span:nth-child(5)) { width: calc(var(--stride) * 5) } &:has(>span:nth-child(6)) { width: calc(var(--stride) * 6) } &:has(>span:nth-child(7)) { width: calc(var(--stride) * 7) } &:has(>span:nth-child(8)) { width: calc(var(--stride) * 8) } &>span { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); inline-size: var(--otp-w); block-size: var(--otp-size); background-color: var(--color-base-100); border: var(--border) solid var(--input-color); border-radius: inherit; outline-offset: 1px; box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; outline: 2px solid #0000; transition: border-color .2s; display: flex; position: absolute; &:first-child { left: 1px; @supports (font:-apple-system-body) { left: 2px } @supports ((-moz-appearance:none)) { left: 0 } } &:nth-child(2) { left: calc(var(--stride) * 1); transition-delay: 20ms } &:nth-child(3) { left: calc(var(--stride) * 2); transition-delay: 40ms } &:nth-child(4) { left: calc(var(--stride) * 3); transition-delay: 60ms } &:nth-child(5) { left: calc(var(--stride) * 4); transition-delay: 80ms } &:nth-child(6) { left: calc(var(--stride) * 5); transition-delay: .1s } &:nth-child(7) { left: calc(var(--stride) * 6); transition-delay: .12s } &:nth-child(8) { left: calc(var(--stride) * 7); transition-delay: .14s } } &:has(input:valid:focus) { &>span { outline: 2px solid var(--input-color); outline-offset: 1px } &:after { opacity: 0 } } &:after { content: ""; width: var(--otp-w); height: var(--otp-size); border-radius: var(--radius-field); outline-offset: 1px; z-index: 10; outline: 2px solid #0000; flex-shrink: 0; margin-inline-start: calc(-1 * (var(--otp-gap) + var(--otp-ch) * .5 + var(--border))) } &:focus-within { isolation: isolate; --input-color: var(--color-base-content); &>span { box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) } &:after { outline-color: var(--input-color) } } } } .\32 xl\:otp-joined { --otp-gap: 0rem; clip-path: inset(-3.5px 0 -3.5px -3.5px); &>span { &:first-of-type { border-start-end-radius: 0; border-end-end-radius: 0 } &:not(&:last-of-type) { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 0 } &:not(&:first-of-type, &:last-of-type) { border-radius: 0 } &:last-of-type { border-start-start-radius: 0; border-end-start-radius: 0 } } &:after { outline-offset: calc((-1 * var(--border)) - 3px); @supports (font:-apple-system-body) { --otp-w: calc(var(--otp-ch) * 2 - 1px) } } &:has(input:valid:focus) { &>span { outline-offset: calc((-1 * var(--border)) - 3px) } } } .\32 xl\:otp-xs { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 6); font-size: 1.25rem } } .\32 xl\:otp-sm { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 8); font-size: 1.5rem } } .\32 xl\:otp-md { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 10); font-size: 1.75rem } } .\32 xl\:otp-lg { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 12); font-size: 2rem } } .\32 xl\:otp-xl { @layer daisyui.l1.l2 { --otp-size: calc(var(--size-field, .25rem) * 14); font-size: 2.5rem } } .\32 xl\:otp-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .\32 xl\:otp-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .\32 xl\:otp-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .\32 xl\:otp-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .\32 xl\:otp-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .\32 xl\:otp-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .\32 xl\:otp-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .\32 xl\:otp-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-error) } } } } .dock { @layer daisyui.l1.l2.l3 { z-index: 1; background-color: var(--color-base-100); color: currentColor; border-top: .5px solid color-mix(in oklab, var(--color-base-content) 5%, #0000); width: 100%; height: 4rem; height: calc(4rem + env(safe-area-inset-bottom)); padding: .5rem; padding-bottom: env(safe-area-inset-bottom); flex-direction: row; justify-content: space-around; align-items: center; display: flex; position: fixed; bottom: 0; left: 0; right: 0; &>* { cursor: pointer; border-radius: var(--radius-box); background-color: #0000; flex-direction: column; flex-shrink: 1; flex-basis: 100%; justify-content: center; align-items: center; gap: 1px; max-width: 8rem; height: 100%; margin-bottom: .5rem; transition: opacity .2s ease-out; display: flex; position: relative; @media (hover:hover) { &:hover { opacity: .8 } } &[aria-disabled=true], &[disabled] { &, &:hover { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 10%, transparent); opacity: 1 } } & .dock-label { font-size: .6875rem } &:after { content: ""; background-color: #0000; border-top: 3px solid #0000; border-radius: 3.40282e38px; width: 1.5rem; height: .25rem; transition: background-color .1s ease-out, text-color .1s ease-out, width .1s ease-out; position: absolute; bottom: .2rem } } } } .dock-active { @layer daisyui.l1.l2 { &:after { color: currentColor; background-color: currentColor; width: 2.5rem } } } .dock-xs { @layer daisyui.l1.l2 { height: 3rem; height: calc(3rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: -.1rem } } & .dock-label { font-size: .625rem } } } .dock-sm { @layer daisyui.l1.l2 { height: 3.5rem; height: calc(3.5rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: -.1rem } } & .dock-label { font-size: .625rem } } } .dock-md { @layer daisyui.l1.l2 { height: 4rem; height: calc(4rem + env(safe-area-inset-bottom)); & .dock-label { font-size: .6875rem } } } .dock-lg { @layer daisyui.l1.l2 { height: 4.5rem; height: calc(4.5rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: .4rem } } & .dock-label { font-size: .6875rem } } } .dock-xl { @layer daisyui.l1.l2 { height: 5rem; height: calc(5rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: .4rem } } & .dock-label { font-size: .75rem } } } @media (width>=640px) { .sm\:dock { @layer daisyui.l1.l2.l3 { z-index: 1; background-color: var(--color-base-100); color: currentColor; border-top: .5px solid color-mix(in oklab, var(--color-base-content) 5%, #0000); width: 100%; height: 4rem; height: calc(4rem + env(safe-area-inset-bottom)); padding: .5rem; padding-bottom: env(safe-area-inset-bottom); flex-direction: row; justify-content: space-around; align-items: center; display: flex; position: fixed; bottom: 0; left: 0; right: 0; &>* { cursor: pointer; border-radius: var(--radius-box); background-color: #0000; flex-direction: column; flex-shrink: 1; flex-basis: 100%; justify-content: center; align-items: center; gap: 1px; max-width: 8rem; height: 100%; margin-bottom: .5rem; transition: opacity .2s ease-out; display: flex; position: relative; @media (hover:hover) { &:hover { opacity: .8 } } &[aria-disabled=true], &[disabled] { &, &:hover { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 10%, transparent); opacity: 1 } } & .dock-label { font-size: .6875rem } &:after { content: ""; background-color: #0000; border-top: 3px solid #0000; border-radius: 3.40282e38px; width: 1.5rem; height: .25rem; transition: background-color .1s ease-out, text-color .1s ease-out, width .1s ease-out; position: absolute; bottom: .2rem } } } } .sm\:dock-active { @layer daisyui.l1.l2 { &:after { color: currentColor; background-color: currentColor; width: 2.5rem } } } .sm\:dock-xs { @layer daisyui.l1.l2 { height: 3rem; height: calc(3rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: -.1rem } } & .dock-label { font-size: .625rem } } } .sm\:dock-sm { @layer daisyui.l1.l2 { height: 3.5rem; height: calc(3.5rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: -.1rem } } & .dock-label { font-size: .625rem } } } .sm\:dock-md { @layer daisyui.l1.l2 { height: 4rem; height: calc(4rem + env(safe-area-inset-bottom)); & .dock-label { font-size: .6875rem } } } .sm\:dock-lg { @layer daisyui.l1.l2 { height: 4.5rem; height: calc(4.5rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: .4rem } } & .dock-label { font-size: .6875rem } } } .sm\:dock-xl { @layer daisyui.l1.l2 { height: 5rem; height: calc(5rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: .4rem } } & .dock-label { font-size: .75rem } } } } @media (width>=768px) { .md\:dock { @layer daisyui.l1.l2.l3 { z-index: 1; background-color: var(--color-base-100); color: currentColor; border-top: .5px solid color-mix(in oklab, var(--color-base-content) 5%, #0000); width: 100%; height: 4rem; height: calc(4rem + env(safe-area-inset-bottom)); padding: .5rem; padding-bottom: env(safe-area-inset-bottom); flex-direction: row; justify-content: space-around; align-items: center; display: flex; position: fixed; bottom: 0; left: 0; right: 0; &>* { cursor: pointer; border-radius: var(--radius-box); background-color: #0000; flex-direction: column; flex-shrink: 1; flex-basis: 100%; justify-content: center; align-items: center; gap: 1px; max-width: 8rem; height: 100%; margin-bottom: .5rem; transition: opacity .2s ease-out; display: flex; position: relative; @media (hover:hover) { &:hover { opacity: .8 } } &[aria-disabled=true], &[disabled] { &, &:hover { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 10%, transparent); opacity: 1 } } & .dock-label { font-size: .6875rem } &:after { content: ""; background-color: #0000; border-top: 3px solid #0000; border-radius: 3.40282e38px; width: 1.5rem; height: .25rem; transition: background-color .1s ease-out, text-color .1s ease-out, width .1s ease-out; position: absolute; bottom: .2rem } } } } .md\:dock-active { @layer daisyui.l1.l2 { &:after { color: currentColor; background-color: currentColor; width: 2.5rem } } } .md\:dock-xs { @layer daisyui.l1.l2 { height: 3rem; height: calc(3rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: -.1rem } } & .dock-label { font-size: .625rem } } } .md\:dock-sm { @layer daisyui.l1.l2 { height: 3.5rem; height: calc(3.5rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: -.1rem } } & .dock-label { font-size: .625rem } } } .md\:dock-md { @layer daisyui.l1.l2 { height: 4rem; height: calc(4rem + env(safe-area-inset-bottom)); & .dock-label { font-size: .6875rem } } } .md\:dock-lg { @layer daisyui.l1.l2 { height: 4.5rem; height: calc(4.5rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: .4rem } } & .dock-label { font-size: .6875rem } } } .md\:dock-xl { @layer daisyui.l1.l2 { height: 5rem; height: calc(5rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: .4rem } } & .dock-label { font-size: .75rem } } } } @media (width>=1024px) { .lg\:dock { @layer daisyui.l1.l2.l3 { z-index: 1; background-color: var(--color-base-100); color: currentColor; border-top: .5px solid color-mix(in oklab, var(--color-base-content) 5%, #0000); width: 100%; height: 4rem; height: calc(4rem + env(safe-area-inset-bottom)); padding: .5rem; padding-bottom: env(safe-area-inset-bottom); flex-direction: row; justify-content: space-around; align-items: center; display: flex; position: fixed; bottom: 0; left: 0; right: 0; &>* { cursor: pointer; border-radius: var(--radius-box); background-color: #0000; flex-direction: column; flex-shrink: 1; flex-basis: 100%; justify-content: center; align-items: center; gap: 1px; max-width: 8rem; height: 100%; margin-bottom: .5rem; transition: opacity .2s ease-out; display: flex; position: relative; @media (hover:hover) { &:hover { opacity: .8 } } &[aria-disabled=true], &[disabled] { &, &:hover { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 10%, transparent); opacity: 1 } } & .dock-label { font-size: .6875rem } &:after { content: ""; background-color: #0000; border-top: 3px solid #0000; border-radius: 3.40282e38px; width: 1.5rem; height: .25rem; transition: background-color .1s ease-out, text-color .1s ease-out, width .1s ease-out; position: absolute; bottom: .2rem } } } } .lg\:dock-active { @layer daisyui.l1.l2 { &:after { color: currentColor; background-color: currentColor; width: 2.5rem } } } .lg\:dock-xs { @layer daisyui.l1.l2 { height: 3rem; height: calc(3rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: -.1rem } } & .dock-label { font-size: .625rem } } } .lg\:dock-sm { @layer daisyui.l1.l2 { height: 3.5rem; height: calc(3.5rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: -.1rem } } & .dock-label { font-size: .625rem } } } .lg\:dock-md { @layer daisyui.l1.l2 { height: 4rem; height: calc(4rem + env(safe-area-inset-bottom)); & .dock-label { font-size: .6875rem } } } .lg\:dock-lg { @layer daisyui.l1.l2 { height: 4.5rem; height: calc(4.5rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: .4rem } } & .dock-label { font-size: .6875rem } } } .lg\:dock-xl { @layer daisyui.l1.l2 { height: 5rem; height: calc(5rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: .4rem } } & .dock-label { font-size: .75rem } } } } @media (width>=1280px) { .xl\:dock { @layer daisyui.l1.l2.l3 { z-index: 1; background-color: var(--color-base-100); color: currentColor; border-top: .5px solid color-mix(in oklab, var(--color-base-content) 5%, #0000); width: 100%; height: 4rem; height: calc(4rem + env(safe-area-inset-bottom)); padding: .5rem; padding-bottom: env(safe-area-inset-bottom); flex-direction: row; justify-content: space-around; align-items: center; display: flex; position: fixed; bottom: 0; left: 0; right: 0; &>* { cursor: pointer; border-radius: var(--radius-box); background-color: #0000; flex-direction: column; flex-shrink: 1; flex-basis: 100%; justify-content: center; align-items: center; gap: 1px; max-width: 8rem; height: 100%; margin-bottom: .5rem; transition: opacity .2s ease-out; display: flex; position: relative; @media (hover:hover) { &:hover { opacity: .8 } } &[aria-disabled=true], &[disabled] { &, &:hover { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 10%, transparent); opacity: 1 } } & .dock-label { font-size: .6875rem } &:after { content: ""; background-color: #0000; border-top: 3px solid #0000; border-radius: 3.40282e38px; width: 1.5rem; height: .25rem; transition: background-color .1s ease-out, text-color .1s ease-out, width .1s ease-out; position: absolute; bottom: .2rem } } } } .xl\:dock-active { @layer daisyui.l1.l2 { &:after { color: currentColor; background-color: currentColor; width: 2.5rem } } } .xl\:dock-xs { @layer daisyui.l1.l2 { height: 3rem; height: calc(3rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: -.1rem } } & .dock-label { font-size: .625rem } } } .xl\:dock-sm { @layer daisyui.l1.l2 { height: 3.5rem; height: calc(3.5rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: -.1rem } } & .dock-label { font-size: .625rem } } } .xl\:dock-md { @layer daisyui.l1.l2 { height: 4rem; height: calc(4rem + env(safe-area-inset-bottom)); & .dock-label { font-size: .6875rem } } } .xl\:dock-lg { @layer daisyui.l1.l2 { height: 4.5rem; height: calc(4.5rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: .4rem } } & .dock-label { font-size: .6875rem } } } .xl\:dock-xl { @layer daisyui.l1.l2 { height: 5rem; height: calc(5rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: .4rem } } & .dock-label { font-size: .75rem } } } } @media (width>=1536px) { .\32 xl\:dock { @layer daisyui.l1.l2.l3 { z-index: 1; background-color: var(--color-base-100); color: currentColor; border-top: .5px solid color-mix(in oklab, var(--color-base-content) 5%, #0000); width: 100%; height: 4rem; height: calc(4rem + env(safe-area-inset-bottom)); padding: .5rem; padding-bottom: env(safe-area-inset-bottom); flex-direction: row; justify-content: space-around; align-items: center; display: flex; position: fixed; bottom: 0; left: 0; right: 0; &>* { cursor: pointer; border-radius: var(--radius-box); background-color: #0000; flex-direction: column; flex-shrink: 1; flex-basis: 100%; justify-content: center; align-items: center; gap: 1px; max-width: 8rem; height: 100%; margin-bottom: .5rem; transition: opacity .2s ease-out; display: flex; position: relative; @media (hover:hover) { &:hover { opacity: .8 } } &[aria-disabled=true], &[disabled] { &, &:hover { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 10%, transparent); opacity: 1 } } & .dock-label { font-size: .6875rem } &:after { content: ""; background-color: #0000; border-top: 3px solid #0000; border-radius: 3.40282e38px; width: 1.5rem; height: .25rem; transition: background-color .1s ease-out, text-color .1s ease-out, width .1s ease-out; position: absolute; bottom: .2rem } } } } .\32 xl\:dock-active { @layer daisyui.l1.l2 { &:after { color: currentColor; background-color: currentColor; width: 2.5rem } } } .\32 xl\:dock-xs { @layer daisyui.l1.l2 { height: 3rem; height: calc(3rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: -.1rem } } & .dock-label { font-size: .625rem } } } .\32 xl\:dock-sm { @layer daisyui.l1.l2 { height: 3.5rem; height: calc(3.5rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: -.1rem } } & .dock-label { font-size: .625rem } } } .\32 xl\:dock-md { @layer daisyui.l1.l2 { height: 4rem; height: calc(4rem + env(safe-area-inset-bottom)); & .dock-label { font-size: .6875rem } } } .\32 xl\:dock-lg { @layer daisyui.l1.l2 { height: 4.5rem; height: calc(4.5rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: .4rem } } & .dock-label { font-size: .6875rem } } } .\32 xl\:dock-xl { @layer daisyui.l1.l2 { height: 5rem; height: calc(5rem + env(safe-area-inset-bottom)); & .dock-active { &:after { bottom: .4rem } } & .dock-label { font-size: .75rem } } } } .tooltip { @layer daisyui.l1.l2.l3 { --tt-bg: var(--color-neutral); --tt-off: calc(100% + .5rem); --tt-tail: calc(100% + 1px + .25rem); --tt-tail-off: .5rem; display: inline-block; position: relative; &>.tooltip-content, &[data-tip]:before { border-radius: var(--radius-field); text-align: center; white-space: normal; max-width: 20rem; color: var(--color-neutral-content); opacity: 0; background-color: var(--tt-bg); pointer-events: none; z-index: 2; --tw-content: attr(data-tip); content: var(--tw-content); width: max-content; padding-block: .25rem; padding-inline: .5rem; font-size: .875rem; line-height: 1.25; position: absolute } &:after { opacity: 0; background-color: var(--tt-bg); content: ""; pointer-events: none; --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A"); width: .625rem; height: .25rem; mask-position: -1px 0; mask-repeat: no-repeat; mask-image: var(--mask-tooltip); display: block; position: absolute } @media (prefers-reduced-motion:no-preference) { &>.tooltip-content, &[data-tip]:before, &:after { transition: opacity .2s cubic-bezier(.4, 0, .2, 1) 75ms, transform .2s cubic-bezier(.4, 0, .2, 1) 75ms } } &:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))) { &.tooltip-open, &:hover, &:has(:focus-visible) { &>.tooltip-content, &[data-tip]:before, &:after { opacity: 1; --tt-pos: 0rem; @media (prefers-reduced-motion:no-preference) { transition: opacity .2s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1) } } } } } } .tooltip, .tooltip-top { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, .25rem)); inset: auto auto var(--tt-off) 50% } &:after { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, .25rem)); inset: auto auto var(--tt-tail) 50% } } } .tooltip-bottom { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, -.25rem)); inset: var(--tt-off) auto auto 50% } &:after { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, -.25rem)) rotate(180deg); inset: var(--tt-tail) auto auto 50% } } } .tooltip-start { @layer daisyui.l1.l2 { --tt-trans: 0; --tt-inset: 0 auto; --tt-tail-inset: var(--tt-tail-off) auto; &>.tooltip-content, &[data-tip]:before { left: auto; right: auto; inset-inline: 0 auto } &:after { left: auto; right: auto; inset-inline: var(--tt-tail-off) auto } } } .tooltip-center { @layer daisyui.l1.l2 { --tt-trans: -50%; --tt-inset: 50% auto; --tt-tail-inset: 50% auto; &>.tooltip-content, &[data-tip]:before, &:after { inset-inline: auto; left: 50%; right: auto } } } .tooltip-end { @layer daisyui.l1.l2 { --tt-trans: 0; --tt-inset: auto 0; --tt-tail-inset: auto var(--tt-tail-off); &>.tooltip-content, &[data-tip]:before { left: auto; right: auto; inset-inline: auto 0 } &:after { left: auto; right: auto; inset-inline: auto var(--tt-tail-off) } } } .tooltip-left { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(calc(var(--tt-pos, .25rem) - .25rem)) translateY(var(--tt-trans, -50%)); left: auto; right: var(--tt-off); inset-block: var(--tt-inset, 50% auto) } &:after { transform: translateX(var(--tt-pos, .25rem)) translateY(var(--tt-trans, -50%)) rotate(-90deg); left: auto; right: calc(var(--tt-tail) + 1px); inset-block: var(--tt-tail-inset, 50% auto) } } } .tooltip-right { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(calc(var(--tt-pos, -.25rem) + .25rem)) translateY(var(--tt-trans, -50%)); left: var(--tt-off); right: auto; inset-block: var(--tt-inset, 50% auto) } &:after { transform: translateX(var(--tt-pos, -.25rem)) translateY(var(--tt-trans, -50%)) rotate(90deg); left: calc(var(--tt-tail) + 1px); right: auto; inset-block: var(--tt-tail-inset, 50% auto) } } } .tooltip-primary { @layer daisyui.l1.l2 { --tt-bg: var(--color-primary); &>.tooltip-content, &[data-tip]:before { color: var(--color-primary-content) } } } .tooltip-secondary { @layer daisyui.l1.l2 { --tt-bg: var(--color-secondary); &>.tooltip-content, &[data-tip]:before { color: var(--color-secondary-content) } } } .tooltip-accent { @layer daisyui.l1.l2 { --tt-bg: var(--color-accent); &>.tooltip-content, &[data-tip]:before { color: var(--color-accent-content) } } } .tooltip-info { @layer daisyui.l1.l2 { --tt-bg: var(--color-info); &>.tooltip-content, &[data-tip]:before { color: var(--color-info-content) } } } .tooltip-success { @layer daisyui.l1.l2 { --tt-bg: var(--color-success); &>.tooltip-content, &[data-tip]:before { color: var(--color-success-content) } } } .tooltip-warning { @layer daisyui.l1.l2 { --tt-bg: var(--color-warning); &>.tooltip-content, &[data-tip]:before { color: var(--color-warning-content) } } } .tooltip-error { @layer daisyui.l1.l2 { --tt-bg: var(--color-error); &>.tooltip-content, &[data-tip]:before { color: var(--color-error-content) } } } @media (width>=640px) { .sm\:tooltip { @layer daisyui.l1.l2.l3 { --tt-bg: var(--color-neutral); --tt-off: calc(100% + .5rem); --tt-tail: calc(100% + 1px + .25rem); --tt-tail-off: .5rem; display: inline-block; position: relative; &>.tooltip-content, &[data-tip]:before { border-radius: var(--radius-field); text-align: center; white-space: normal; max-width: 20rem; color: var(--color-neutral-content); opacity: 0; background-color: var(--tt-bg); pointer-events: none; z-index: 2; --tw-content: attr(data-tip); content: var(--tw-content); width: max-content; padding-block: .25rem; padding-inline: .5rem; font-size: .875rem; line-height: 1.25; position: absolute } &:after { opacity: 0; background-color: var(--tt-bg); content: ""; pointer-events: none; --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A"); width: .625rem; height: .25rem; mask-position: -1px 0; mask-repeat: no-repeat; mask-image: var(--mask-tooltip); display: block; position: absolute } @media (prefers-reduced-motion:no-preference) { &>.tooltip-content, &[data-tip]:before, &:after { transition: opacity .2s cubic-bezier(.4, 0, .2, 1) 75ms, transform .2s cubic-bezier(.4, 0, .2, 1) 75ms } } &:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))) { &.tooltip-open, &:hover, &:has(:focus-visible) { &>.tooltip-content, &[data-tip]:before, &:after { opacity: 1; --tt-pos: 0rem; @media (prefers-reduced-motion:no-preference) { transition: opacity .2s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1) } } } } } } .sm\:tooltip, .sm\:tooltip-top { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, .25rem)); inset: auto auto var(--tt-off) 50% } &:after { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, .25rem)); inset: auto auto var(--tt-tail) 50% } } } .sm\:tooltip-bottom { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, -.25rem)); inset: var(--tt-off) auto auto 50% } &:after { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, -.25rem)) rotate(180deg); inset: var(--tt-tail) auto auto 50% } } } .sm\:tooltip-start { @layer daisyui.l1.l2 { --tt-trans: 0; --tt-inset: 0 auto; --tt-tail-inset: var(--tt-tail-off) auto; &>.tooltip-content, &[data-tip]:before { left: auto; right: auto; inset-inline: 0 auto } &:after { left: auto; right: auto; inset-inline: var(--tt-tail-off) auto } } } .sm\:tooltip-center { @layer daisyui.l1.l2 { --tt-trans: -50%; --tt-inset: 50% auto; --tt-tail-inset: 50% auto; &>.tooltip-content, &[data-tip]:before, &:after { inset-inline: auto; left: 50%; right: auto } } } .sm\:tooltip-end { @layer daisyui.l1.l2 { --tt-trans: 0; --tt-inset: auto 0; --tt-tail-inset: auto var(--tt-tail-off); &>.tooltip-content, &[data-tip]:before { left: auto; right: auto; inset-inline: auto 0 } &:after { left: auto; right: auto; inset-inline: auto var(--tt-tail-off) } } } .sm\:tooltip-left { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(calc(var(--tt-pos, .25rem) - .25rem)) translateY(var(--tt-trans, -50%)); left: auto; right: var(--tt-off); inset-block: var(--tt-inset, 50% auto) } &:after { transform: translateX(var(--tt-pos, .25rem)) translateY(var(--tt-trans, -50%)) rotate(-90deg); left: auto; right: calc(var(--tt-tail) + 1px); inset-block: var(--tt-tail-inset, 50% auto) } } } .sm\:tooltip-right { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(calc(var(--tt-pos, -.25rem) + .25rem)) translateY(var(--tt-trans, -50%)); left: var(--tt-off); right: auto; inset-block: var(--tt-inset, 50% auto) } &:after { transform: translateX(var(--tt-pos, -.25rem)) translateY(var(--tt-trans, -50%)) rotate(90deg); left: calc(var(--tt-tail) + 1px); right: auto; inset-block: var(--tt-tail-inset, 50% auto) } } } .sm\:tooltip-primary { @layer daisyui.l1.l2 { --tt-bg: var(--color-primary); &>.tooltip-content, &[data-tip]:before { color: var(--color-primary-content) } } } .sm\:tooltip-secondary { @layer daisyui.l1.l2 { --tt-bg: var(--color-secondary); &>.tooltip-content, &[data-tip]:before { color: var(--color-secondary-content) } } } .sm\:tooltip-accent { @layer daisyui.l1.l2 { --tt-bg: var(--color-accent); &>.tooltip-content, &[data-tip]:before { color: var(--color-accent-content) } } } .sm\:tooltip-info { @layer daisyui.l1.l2 { --tt-bg: var(--color-info); &>.tooltip-content, &[data-tip]:before { color: var(--color-info-content) } } } .sm\:tooltip-success { @layer daisyui.l1.l2 { --tt-bg: var(--color-success); &>.tooltip-content, &[data-tip]:before { color: var(--color-success-content) } } } .sm\:tooltip-warning { @layer daisyui.l1.l2 { --tt-bg: var(--color-warning); &>.tooltip-content, &[data-tip]:before { color: var(--color-warning-content) } } } .sm\:tooltip-error { @layer daisyui.l1.l2 { --tt-bg: var(--color-error); &>.tooltip-content, &[data-tip]:before { color: var(--color-error-content) } } } } @media (width>=768px) { .md\:tooltip { @layer daisyui.l1.l2.l3 { --tt-bg: var(--color-neutral); --tt-off: calc(100% + .5rem); --tt-tail: calc(100% + 1px + .25rem); --tt-tail-off: .5rem; display: inline-block; position: relative; &>.tooltip-content, &[data-tip]:before { border-radius: var(--radius-field); text-align: center; white-space: normal; max-width: 20rem; color: var(--color-neutral-content); opacity: 0; background-color: var(--tt-bg); pointer-events: none; z-index: 2; --tw-content: attr(data-tip); content: var(--tw-content); width: max-content; padding-block: .25rem; padding-inline: .5rem; font-size: .875rem; line-height: 1.25; position: absolute } &:after { opacity: 0; background-color: var(--tt-bg); content: ""; pointer-events: none; --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A"); width: .625rem; height: .25rem; mask-position: -1px 0; mask-repeat: no-repeat; mask-image: var(--mask-tooltip); display: block; position: absolute } @media (prefers-reduced-motion:no-preference) { &>.tooltip-content, &[data-tip]:before, &:after { transition: opacity .2s cubic-bezier(.4, 0, .2, 1) 75ms, transform .2s cubic-bezier(.4, 0, .2, 1) 75ms } } &:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))) { &.tooltip-open, &:hover, &:has(:focus-visible) { &>.tooltip-content, &[data-tip]:before, &:after { opacity: 1; --tt-pos: 0rem; @media (prefers-reduced-motion:no-preference) { transition: opacity .2s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1) } } } } } } .md\:tooltip, .md\:tooltip-top { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, .25rem)); inset: auto auto var(--tt-off) 50% } &:after { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, .25rem)); inset: auto auto var(--tt-tail) 50% } } } .md\:tooltip-bottom { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, -.25rem)); inset: var(--tt-off) auto auto 50% } &:after { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, -.25rem)) rotate(180deg); inset: var(--tt-tail) auto auto 50% } } } .md\:tooltip-start { @layer daisyui.l1.l2 { --tt-trans: 0; --tt-inset: 0 auto; --tt-tail-inset: var(--tt-tail-off) auto; &>.tooltip-content, &[data-tip]:before { left: auto; right: auto; inset-inline: 0 auto } &:after { left: auto; right: auto; inset-inline: var(--tt-tail-off) auto } } } .md\:tooltip-center { @layer daisyui.l1.l2 { --tt-trans: -50%; --tt-inset: 50% auto; --tt-tail-inset: 50% auto; &>.tooltip-content, &[data-tip]:before, &:after { inset-inline: auto; left: 50%; right: auto } } } .md\:tooltip-end { @layer daisyui.l1.l2 { --tt-trans: 0; --tt-inset: auto 0; --tt-tail-inset: auto var(--tt-tail-off); &>.tooltip-content, &[data-tip]:before { left: auto; right: auto; inset-inline: auto 0 } &:after { left: auto; right: auto; inset-inline: auto var(--tt-tail-off) } } } .md\:tooltip-left { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(calc(var(--tt-pos, .25rem) - .25rem)) translateY(var(--tt-trans, -50%)); left: auto; right: var(--tt-off); inset-block: var(--tt-inset, 50% auto) } &:after { transform: translateX(var(--tt-pos, .25rem)) translateY(var(--tt-trans, -50%)) rotate(-90deg); left: auto; right: calc(var(--tt-tail) + 1px); inset-block: var(--tt-tail-inset, 50% auto) } } } .md\:tooltip-right { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(calc(var(--tt-pos, -.25rem) + .25rem)) translateY(var(--tt-trans, -50%)); left: var(--tt-off); right: auto; inset-block: var(--tt-inset, 50% auto) } &:after { transform: translateX(var(--tt-pos, -.25rem)) translateY(var(--tt-trans, -50%)) rotate(90deg); left: calc(var(--tt-tail) + 1px); right: auto; inset-block: var(--tt-tail-inset, 50% auto) } } } .md\:tooltip-primary { @layer daisyui.l1.l2 { --tt-bg: var(--color-primary); &>.tooltip-content, &[data-tip]:before { color: var(--color-primary-content) } } } .md\:tooltip-secondary { @layer daisyui.l1.l2 { --tt-bg: var(--color-secondary); &>.tooltip-content, &[data-tip]:before { color: var(--color-secondary-content) } } } .md\:tooltip-accent { @layer daisyui.l1.l2 { --tt-bg: var(--color-accent); &>.tooltip-content, &[data-tip]:before { color: var(--color-accent-content) } } } .md\:tooltip-info { @layer daisyui.l1.l2 { --tt-bg: var(--color-info); &>.tooltip-content, &[data-tip]:before { color: var(--color-info-content) } } } .md\:tooltip-success { @layer daisyui.l1.l2 { --tt-bg: var(--color-success); &>.tooltip-content, &[data-tip]:before { color: var(--color-success-content) } } } .md\:tooltip-warning { @layer daisyui.l1.l2 { --tt-bg: var(--color-warning); &>.tooltip-content, &[data-tip]:before { color: var(--color-warning-content) } } } .md\:tooltip-error { @layer daisyui.l1.l2 { --tt-bg: var(--color-error); &>.tooltip-content, &[data-tip]:before { color: var(--color-error-content) } } } } @media (width>=1024px) { .lg\:tooltip { @layer daisyui.l1.l2.l3 { --tt-bg: var(--color-neutral); --tt-off: calc(100% + .5rem); --tt-tail: calc(100% + 1px + .25rem); --tt-tail-off: .5rem; display: inline-block; position: relative; &>.tooltip-content, &[data-tip]:before { border-radius: var(--radius-field); text-align: center; white-space: normal; max-width: 20rem; color: var(--color-neutral-content); opacity: 0; background-color: var(--tt-bg); pointer-events: none; z-index: 2; --tw-content: attr(data-tip); content: var(--tw-content); width: max-content; padding-block: .25rem; padding-inline: .5rem; font-size: .875rem; line-height: 1.25; position: absolute } &:after { opacity: 0; background-color: var(--tt-bg); content: ""; pointer-events: none; --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A"); width: .625rem; height: .25rem; mask-position: -1px 0; mask-repeat: no-repeat; mask-image: var(--mask-tooltip); display: block; position: absolute } @media (prefers-reduced-motion:no-preference) { &>.tooltip-content, &[data-tip]:before, &:after { transition: opacity .2s cubic-bezier(.4, 0, .2, 1) 75ms, transform .2s cubic-bezier(.4, 0, .2, 1) 75ms } } &:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))) { &.tooltip-open, &:hover, &:has(:focus-visible) { &>.tooltip-content, &[data-tip]:before, &:after { opacity: 1; --tt-pos: 0rem; @media (prefers-reduced-motion:no-preference) { transition: opacity .2s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1) } } } } } } .lg\:tooltip, .lg\:tooltip-top { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, .25rem)); inset: auto auto var(--tt-off) 50% } &:after { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, .25rem)); inset: auto auto var(--tt-tail) 50% } } } .lg\:tooltip-bottom { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, -.25rem)); inset: var(--tt-off) auto auto 50% } &:after { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, -.25rem)) rotate(180deg); inset: var(--tt-tail) auto auto 50% } } } .lg\:tooltip-start { @layer daisyui.l1.l2 { --tt-trans: 0; --tt-inset: 0 auto; --tt-tail-inset: var(--tt-tail-off) auto; &>.tooltip-content, &[data-tip]:before { left: auto; right: auto; inset-inline: 0 auto } &:after { left: auto; right: auto; inset-inline: var(--tt-tail-off) auto } } } .lg\:tooltip-center { @layer daisyui.l1.l2 { --tt-trans: -50%; --tt-inset: 50% auto; --tt-tail-inset: 50% auto; &>.tooltip-content, &[data-tip]:before, &:after { inset-inline: auto; left: 50%; right: auto } } } .lg\:tooltip-end { @layer daisyui.l1.l2 { --tt-trans: 0; --tt-inset: auto 0; --tt-tail-inset: auto var(--tt-tail-off); &>.tooltip-content, &[data-tip]:before { left: auto; right: auto; inset-inline: auto 0 } &:after { left: auto; right: auto; inset-inline: auto var(--tt-tail-off) } } } .lg\:tooltip-left { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(calc(var(--tt-pos, .25rem) - .25rem)) translateY(var(--tt-trans, -50%)); left: auto; right: var(--tt-off); inset-block: var(--tt-inset, 50% auto) } &:after { transform: translateX(var(--tt-pos, .25rem)) translateY(var(--tt-trans, -50%)) rotate(-90deg); left: auto; right: calc(var(--tt-tail) + 1px); inset-block: var(--tt-tail-inset, 50% auto) } } } .lg\:tooltip-right { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(calc(var(--tt-pos, -.25rem) + .25rem)) translateY(var(--tt-trans, -50%)); left: var(--tt-off); right: auto; inset-block: var(--tt-inset, 50% auto) } &:after { transform: translateX(var(--tt-pos, -.25rem)) translateY(var(--tt-trans, -50%)) rotate(90deg); left: calc(var(--tt-tail) + 1px); right: auto; inset-block: var(--tt-tail-inset, 50% auto) } } } .lg\:tooltip-primary { @layer daisyui.l1.l2 { --tt-bg: var(--color-primary); &>.tooltip-content, &[data-tip]:before { color: var(--color-primary-content) } } } .lg\:tooltip-secondary { @layer daisyui.l1.l2 { --tt-bg: var(--color-secondary); &>.tooltip-content, &[data-tip]:before { color: var(--color-secondary-content) } } } .lg\:tooltip-accent { @layer daisyui.l1.l2 { --tt-bg: var(--color-accent); &>.tooltip-content, &[data-tip]:before { color: var(--color-accent-content) } } } .lg\:tooltip-info { @layer daisyui.l1.l2 { --tt-bg: var(--color-info); &>.tooltip-content, &[data-tip]:before { color: var(--color-info-content) } } } .lg\:tooltip-success { @layer daisyui.l1.l2 { --tt-bg: var(--color-success); &>.tooltip-content, &[data-tip]:before { color: var(--color-success-content) } } } .lg\:tooltip-warning { @layer daisyui.l1.l2 { --tt-bg: var(--color-warning); &>.tooltip-content, &[data-tip]:before { color: var(--color-warning-content) } } } .lg\:tooltip-error { @layer daisyui.l1.l2 { --tt-bg: var(--color-error); &>.tooltip-content, &[data-tip]:before { color: var(--color-error-content) } } } } @media (width>=1280px) { .xl\:tooltip { @layer daisyui.l1.l2.l3 { --tt-bg: var(--color-neutral); --tt-off: calc(100% + .5rem); --tt-tail: calc(100% + 1px + .25rem); --tt-tail-off: .5rem; display: inline-block; position: relative; &>.tooltip-content, &[data-tip]:before { border-radius: var(--radius-field); text-align: center; white-space: normal; max-width: 20rem; color: var(--color-neutral-content); opacity: 0; background-color: var(--tt-bg); pointer-events: none; z-index: 2; --tw-content: attr(data-tip); content: var(--tw-content); width: max-content; padding-block: .25rem; padding-inline: .5rem; font-size: .875rem; line-height: 1.25; position: absolute } &:after { opacity: 0; background-color: var(--tt-bg); content: ""; pointer-events: none; --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A"); width: .625rem; height: .25rem; mask-position: -1px 0; mask-repeat: no-repeat; mask-image: var(--mask-tooltip); display: block; position: absolute } @media (prefers-reduced-motion:no-preference) { &>.tooltip-content, &[data-tip]:before, &:after { transition: opacity .2s cubic-bezier(.4, 0, .2, 1) 75ms, transform .2s cubic-bezier(.4, 0, .2, 1) 75ms } } &:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))) { &.tooltip-open, &:hover, &:has(:focus-visible) { &>.tooltip-content, &[data-tip]:before, &:after { opacity: 1; --tt-pos: 0rem; @media (prefers-reduced-motion:no-preference) { transition: opacity .2s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1) } } } } } } .xl\:tooltip, .xl\:tooltip-top { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, .25rem)); inset: auto auto var(--tt-off) 50% } &:after { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, .25rem)); inset: auto auto var(--tt-tail) 50% } } } .xl\:tooltip-bottom { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, -.25rem)); inset: var(--tt-off) auto auto 50% } &:after { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, -.25rem)) rotate(180deg); inset: var(--tt-tail) auto auto 50% } } } .xl\:tooltip-start { @layer daisyui.l1.l2 { --tt-trans: 0; --tt-inset: 0 auto; --tt-tail-inset: var(--tt-tail-off) auto; &>.tooltip-content, &[data-tip]:before { left: auto; right: auto; inset-inline: 0 auto } &:after { left: auto; right: auto; inset-inline: var(--tt-tail-off) auto } } } .xl\:tooltip-center { @layer daisyui.l1.l2 { --tt-trans: -50%; --tt-inset: 50% auto; --tt-tail-inset: 50% auto; &>.tooltip-content, &[data-tip]:before, &:after { inset-inline: auto; left: 50%; right: auto } } } .xl\:tooltip-end { @layer daisyui.l1.l2 { --tt-trans: 0; --tt-inset: auto 0; --tt-tail-inset: auto var(--tt-tail-off); &>.tooltip-content, &[data-tip]:before { left: auto; right: auto; inset-inline: auto 0 } &:after { left: auto; right: auto; inset-inline: auto var(--tt-tail-off) } } } .xl\:tooltip-left { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(calc(var(--tt-pos, .25rem) - .25rem)) translateY(var(--tt-trans, -50%)); left: auto; right: var(--tt-off); inset-block: var(--tt-inset, 50% auto) } &:after { transform: translateX(var(--tt-pos, .25rem)) translateY(var(--tt-trans, -50%)) rotate(-90deg); left: auto; right: calc(var(--tt-tail) + 1px); inset-block: var(--tt-tail-inset, 50% auto) } } } .xl\:tooltip-right { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(calc(var(--tt-pos, -.25rem) + .25rem)) translateY(var(--tt-trans, -50%)); left: var(--tt-off); right: auto; inset-block: var(--tt-inset, 50% auto) } &:after { transform: translateX(var(--tt-pos, -.25rem)) translateY(var(--tt-trans, -50%)) rotate(90deg); left: calc(var(--tt-tail) + 1px); right: auto; inset-block: var(--tt-tail-inset, 50% auto) } } } .xl\:tooltip-primary { @layer daisyui.l1.l2 { --tt-bg: var(--color-primary); &>.tooltip-content, &[data-tip]:before { color: var(--color-primary-content) } } } .xl\:tooltip-secondary { @layer daisyui.l1.l2 { --tt-bg: var(--color-secondary); &>.tooltip-content, &[data-tip]:before { color: var(--color-secondary-content) } } } .xl\:tooltip-accent { @layer daisyui.l1.l2 { --tt-bg: var(--color-accent); &>.tooltip-content, &[data-tip]:before { color: var(--color-accent-content) } } } .xl\:tooltip-info { @layer daisyui.l1.l2 { --tt-bg: var(--color-info); &>.tooltip-content, &[data-tip]:before { color: var(--color-info-content) } } } .xl\:tooltip-success { @layer daisyui.l1.l2 { --tt-bg: var(--color-success); &>.tooltip-content, &[data-tip]:before { color: var(--color-success-content) } } } .xl\:tooltip-warning { @layer daisyui.l1.l2 { --tt-bg: var(--color-warning); &>.tooltip-content, &[data-tip]:before { color: var(--color-warning-content) } } } .xl\:tooltip-error { @layer daisyui.l1.l2 { --tt-bg: var(--color-error); &>.tooltip-content, &[data-tip]:before { color: var(--color-error-content) } } } } @media (width>=1536px) { .\32 xl\:tooltip { @layer daisyui.l1.l2.l3 { --tt-bg: var(--color-neutral); --tt-off: calc(100% + .5rem); --tt-tail: calc(100% + 1px + .25rem); --tt-tail-off: .5rem; display: inline-block; position: relative; &>.tooltip-content, &[data-tip]:before { border-radius: var(--radius-field); text-align: center; white-space: normal; max-width: 20rem; color: var(--color-neutral-content); opacity: 0; background-color: var(--tt-bg); pointer-events: none; z-index: 2; --tw-content: attr(data-tip); content: var(--tw-content); width: max-content; padding-block: .25rem; padding-inline: .5rem; font-size: .875rem; line-height: 1.25; position: absolute } &:after { opacity: 0; background-color: var(--tt-bg); content: ""; pointer-events: none; --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A"); width: .625rem; height: .25rem; mask-position: -1px 0; mask-repeat: no-repeat; mask-image: var(--mask-tooltip); display: block; position: absolute } @media (prefers-reduced-motion:no-preference) { &>.tooltip-content, &[data-tip]:before, &:after { transition: opacity .2s cubic-bezier(.4, 0, .2, 1) 75ms, transform .2s cubic-bezier(.4, 0, .2, 1) 75ms } } &:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))) { &.tooltip-open, &:hover, &:has(:focus-visible) { &>.tooltip-content, &[data-tip]:before, &:after { opacity: 1; --tt-pos: 0rem; @media (prefers-reduced-motion:no-preference) { transition: opacity .2s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1) } } } } } } .\32 xl\:tooltip, .\32 xl\:tooltip-top { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, .25rem)); inset: auto auto var(--tt-off) 50% } &:after { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, .25rem)); inset: auto auto var(--tt-tail) 50% } } } .\32 xl\:tooltip-bottom { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, -.25rem)); inset: var(--tt-off) auto auto 50% } &:after { transform: translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, -.25rem)) rotate(180deg); inset: var(--tt-tail) auto auto 50% } } } .\32 xl\:tooltip-start { @layer daisyui.l1.l2 { --tt-trans: 0; --tt-inset: 0 auto; --tt-tail-inset: var(--tt-tail-off) auto; &>.tooltip-content, &[data-tip]:before { left: auto; right: auto; inset-inline: 0 auto } &:after { left: auto; right: auto; inset-inline: var(--tt-tail-off) auto } } } .\32 xl\:tooltip-center { @layer daisyui.l1.l2 { --tt-trans: -50%; --tt-inset: 50% auto; --tt-tail-inset: 50% auto; &>.tooltip-content, &[data-tip]:before, &:after { inset-inline: auto; left: 50%; right: auto } } } .\32 xl\:tooltip-end { @layer daisyui.l1.l2 { --tt-trans: 0; --tt-inset: auto 0; --tt-tail-inset: auto var(--tt-tail-off); &>.tooltip-content, &[data-tip]:before { left: auto; right: auto; inset-inline: auto 0 } &:after { left: auto; right: auto; inset-inline: auto var(--tt-tail-off) } } } .\32 xl\:tooltip-left { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(calc(var(--tt-pos, .25rem) - .25rem)) translateY(var(--tt-trans, -50%)); left: auto; right: var(--tt-off); inset-block: var(--tt-inset, 50% auto) } &:after { transform: translateX(var(--tt-pos, .25rem)) translateY(var(--tt-trans, -50%)) rotate(-90deg); left: auto; right: calc(var(--tt-tail) + 1px); inset-block: var(--tt-tail-inset, 50% auto) } } } .\32 xl\:tooltip-right { @layer daisyui.l1.l2 { &>.tooltip-content, &[data-tip]:before { transform: translateX(calc(var(--tt-pos, -.25rem) + .25rem)) translateY(var(--tt-trans, -50%)); left: var(--tt-off); right: auto; inset-block: var(--tt-inset, 50% auto) } &:after { transform: translateX(var(--tt-pos, -.25rem)) translateY(var(--tt-trans, -50%)) rotate(90deg); left: calc(var(--tt-tail) + 1px); right: auto; inset-block: var(--tt-tail-inset, 50% auto) } } } .\32 xl\:tooltip-primary { @layer daisyui.l1.l2 { --tt-bg: var(--color-primary); &>.tooltip-content, &[data-tip]:before { color: var(--color-primary-content) } } } .\32 xl\:tooltip-secondary { @layer daisyui.l1.l2 { --tt-bg: var(--color-secondary); &>.tooltip-content, &[data-tip]:before { color: var(--color-secondary-content) } } } .\32 xl\:tooltip-accent { @layer daisyui.l1.l2 { --tt-bg: var(--color-accent); &>.tooltip-content, &[data-tip]:before { color: var(--color-accent-content) } } } .\32 xl\:tooltip-info { @layer daisyui.l1.l2 { --tt-bg: var(--color-info); &>.tooltip-content, &[data-tip]:before { color: var(--color-info-content) } } } .\32 xl\:tooltip-success { @layer daisyui.l1.l2 { --tt-bg: var(--color-success); &>.tooltip-content, &[data-tip]:before { color: var(--color-success-content) } } } .\32 xl\:tooltip-warning { @layer daisyui.l1.l2 { --tt-bg: var(--color-warning); &>.tooltip-content, &[data-tip]:before { color: var(--color-warning-content) } } } .\32 xl\:tooltip-error { @layer daisyui.l1.l2 { --tt-bg: var(--color-error); &>.tooltip-content, &[data-tip]:before { color: var(--color-error-content) } } } } .countdown { &.countdown { line-height: 1em } @layer daisyui.l1.l2.l3 { display: inline-flex; &>* { visibility: hidden; --value-v: calc(mod(max(0, var(--value)), 1000)); --value-hundreds: calc(round(to-zero, var(--value-v) / 100, 1)); --value-tens: calc(round(to-zero, mod(var(--value-v), 100) / 10, 1)); --value-ones: calc(mod(var(--value-v), 100)); --show-hundreds: clamp(clamp(0, var(--digits, 1) - 2, 1), var(--value-hundreds), 1); --show-tens: clamp(clamp(0, var(--digits, 1) - 1, 1), var(--value-tens) + var(--show-hundreds), 1); --first-digits: calc(round(to-zero, var(--value-v) / 10, 1)); height: 1em; width: calc(1ch + var(--show-tens) * 1ch + var(--show-hundreds) * 1ch); direction: ltr; transition: width .4s ease-out .2s; display: inline-block; position: relative; overflow-y: clip; &:before, &:after { visibility: visible; --tw-content: "00\a 01\a 02\a 03\a 04\a 05\a 06\a 07\a 08\a 09\a 10\a 11\a 12\a 13\a 14\a 15\a 16\a 17\a 18\a 19\a 20\a 21\a 22\a 23\a 24\a 25\a 26\a 27\a 28\a 29\a 30\a 31\a 32\a 33\a 34\a 35\a 36\a 37\a 38\a 39\a 40\a 41\a 42\a 43\a 44\a 45\a 46\a 47\a 48\a 49\a 50\a 51\a 52\a 53\a 54\a 55\a 56\a 57\a 58\a 59\a 60\a 61\a 62\a 63\a 64\a 65\a 66\a 67\a 68\a 69\a 70\a 71\a 72\a 73\a 74\a 75\a 76\a 77\a 78\a 79\a 80\a 81\a 82\a 83\a 84\a 85\a 86\a 87\a 88\a 89\a 90\a 91\a 92\a 93\a 94\a 95\a 96\a 97\a 98\a 99\a "; content: var(--tw-content); font-variant-numeric: tabular-nums; white-space: pre; text-align: end; direction: rtl; transition: all 1s cubic-bezier(1, 0, 0, 1), width .2s ease-out .2s, opacity .2s ease-out .2s; position: absolute; overflow-x: clip } &:before { width: calc(1ch + var(--show-hundreds) * 1ch); top: calc(var(--first-digits) * -1em); opacity: var(--show-tens); inset-inline-end: 0 } &:after { width: 1ch; top: calc(var(--value-ones) * -1em); inset-inline-start: 0 } } } } .radial-progress { @layer daisyui.l1.l2.l3 { height: var(--size); width: var(--size); vertical-align: middle; box-sizing: content-box; --value: 0; --size: 5rem; --thickness: calc(var(--size) / 10); --radialprogress: calc(var(--value) * 1%); background-color: #0000; border-radius: 3.40282e38px; place-content: center; transition: --radialprogress .3s linear; display: inline-grid; position: relative; &:before { content: ""; background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor var(--radialprogress), #0000 0); -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + .5px - var(--thickness))); mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + .5px - var(--thickness))); border-radius: 3.40282e38px; position: absolute; inset: 0 } &:after { content: ""; inset: calc(50% - var(--thickness) / 2); transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%)); background-color: currentColor; border-radius: 3.40282e38px; transition: transform .3s linear; position: absolute } } } @media (width>=640px) { .sm\:radial-progress { @layer daisyui.l1.l2.l3 { height: var(--size); width: var(--size); vertical-align: middle; box-sizing: content-box; --value: 0; --size: 5rem; --thickness: calc(var(--size) / 10); --radialprogress: calc(var(--value) * 1%); background-color: #0000; border-radius: 3.40282e38px; place-content: center; transition: --radialprogress .3s linear; display: inline-grid; position: relative; &:before { content: ""; background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor var(--radialprogress), #0000 0); -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + .5px - var(--thickness))); mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + .5px - var(--thickness))); border-radius: 3.40282e38px; position: absolute; inset: 0 } &:after { content: ""; inset: calc(50% - var(--thickness) / 2); transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%)); background-color: currentColor; border-radius: 3.40282e38px; transition: transform .3s linear; position: absolute } } } } @media (width>=768px) { .md\:radial-progress { @layer daisyui.l1.l2.l3 { height: var(--size); width: var(--size); vertical-align: middle; box-sizing: content-box; --value: 0; --size: 5rem; --thickness: calc(var(--size) / 10); --radialprogress: calc(var(--value) * 1%); background-color: #0000; border-radius: 3.40282e38px; place-content: center; transition: --radialprogress .3s linear; display: inline-grid; position: relative; &:before { content: ""; background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor var(--radialprogress), #0000 0); -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + .5px - var(--thickness))); mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + .5px - var(--thickness))); border-radius: 3.40282e38px; position: absolute; inset: 0 } &:after { content: ""; inset: calc(50% - var(--thickness) / 2); transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%)); background-color: currentColor; border-radius: 3.40282e38px; transition: transform .3s linear; position: absolute } } } } @media (width>=1024px) { .lg\:radial-progress { @layer daisyui.l1.l2.l3 { height: var(--size); width: var(--size); vertical-align: middle; box-sizing: content-box; --value: 0; --size: 5rem; --thickness: calc(var(--size) / 10); --radialprogress: calc(var(--value) * 1%); background-color: #0000; border-radius: 3.40282e38px; place-content: center; transition: --radialprogress .3s linear; display: inline-grid; position: relative; &:before { content: ""; background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor var(--radialprogress), #0000 0); -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + .5px - var(--thickness))); mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + .5px - var(--thickness))); border-radius: 3.40282e38px; position: absolute; inset: 0 } &:after { content: ""; inset: calc(50% - var(--thickness) / 2); transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%)); background-color: currentColor; border-radius: 3.40282e38px; transition: transform .3s linear; position: absolute } } } } @media (width>=1280px) { .xl\:radial-progress { @layer daisyui.l1.l2.l3 { height: var(--size); width: var(--size); vertical-align: middle; box-sizing: content-box; --value: 0; --size: 5rem; --thickness: calc(var(--size) / 10); --radialprogress: calc(var(--value) * 1%); background-color: #0000; border-radius: 3.40282e38px; place-content: center; transition: --radialprogress .3s linear; display: inline-grid; position: relative; &:before { content: ""; background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor var(--radialprogress), #0000 0); -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + .5px - var(--thickness))); mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + .5px - var(--thickness))); border-radius: 3.40282e38px; position: absolute; inset: 0 } &:after { content: ""; inset: calc(50% - var(--thickness) / 2); transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%)); background-color: currentColor; border-radius: 3.40282e38px; transition: transform .3s linear; position: absolute } } } } @media (width>=1536px) { .\32 xl\:radial-progress { @layer daisyui.l1.l2.l3 { height: var(--size); width: var(--size); vertical-align: middle; box-sizing: content-box; --value: 0; --size: 5rem; --thickness: calc(var(--size) / 10); --radialprogress: calc(var(--value) * 1%); background-color: #0000; border-radius: 3.40282e38px; place-content: center; transition: --radialprogress .3s linear; display: inline-grid; position: relative; &:before { content: ""; background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor var(--radialprogress), #0000 0); -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + .5px - var(--thickness))); mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + .5px - var(--thickness))); border-radius: 3.40282e38px; position: absolute; inset: 0 } &:after { content: ""; inset: calc(50% - var(--thickness) / 2); transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%)); background-color: currentColor; border-radius: 3.40282e38px; transition: transform .3s linear; position: absolute } } } } .hero { @layer daisyui.l1.l2.l3 { background-position: 50%; background-size: cover; place-items: center; width: 100%; display: grid; &>* { grid-row-start: 1; grid-column-start: 1 } } } .hero-overlay { @layer daisyui.l1.l2.l3 { background-color: color-mix(in oklab, var(--color-neutral) 50%, transparent); grid-row-start: 1; grid-column-start: 1; width: 100%; height: 100% } } .hero-content { @layer daisyui.l1.l2.l3 { isolation: isolate; justify-content: center; align-items: center; gap: 1rem; max-width: 80rem; padding: 1rem; display: flex } } @media (width>=640px) { .sm\:hero { @layer daisyui.l1.l2.l3 { background-position: 50%; background-size: cover; place-items: center; width: 100%; display: grid; &>* { grid-row-start: 1; grid-column-start: 1 } } } .sm\:hero-overlay { @layer daisyui.l1.l2.l3 { background-color: color-mix(in oklab, var(--color-neutral) 50%, transparent); grid-row-start: 1; grid-column-start: 1; width: 100%; height: 100% } } .sm\:hero-content { @layer daisyui.l1.l2.l3 { isolation: isolate; justify-content: center; align-items: center; gap: 1rem; max-width: 80rem; padding: 1rem; display: flex } } } @media (width>=768px) { .md\:hero { @layer daisyui.l1.l2.l3 { background-position: 50%; background-size: cover; place-items: center; width: 100%; display: grid; &>* { grid-row-start: 1; grid-column-start: 1 } } } .md\:hero-overlay { @layer daisyui.l1.l2.l3 { background-color: color-mix(in oklab, var(--color-neutral) 50%, transparent); grid-row-start: 1; grid-column-start: 1; width: 100%; height: 100% } } .md\:hero-content { @layer daisyui.l1.l2.l3 { isolation: isolate; justify-content: center; align-items: center; gap: 1rem; max-width: 80rem; padding: 1rem; display: flex } } } @media (width>=1024px) { .lg\:hero { @layer daisyui.l1.l2.l3 { background-position: 50%; background-size: cover; place-items: center; width: 100%; display: grid; &>* { grid-row-start: 1; grid-column-start: 1 } } } .lg\:hero-overlay { @layer daisyui.l1.l2.l3 { background-color: color-mix(in oklab, var(--color-neutral) 50%, transparent); grid-row-start: 1; grid-column-start: 1; width: 100%; height: 100% } } .lg\:hero-content { @layer daisyui.l1.l2.l3 { isolation: isolate; justify-content: center; align-items: center; gap: 1rem; max-width: 80rem; padding: 1rem; display: flex } } } @media (width>=1280px) { .xl\:hero { @layer daisyui.l1.l2.l3 { background-position: 50%; background-size: cover; place-items: center; width: 100%; display: grid; &>* { grid-row-start: 1; grid-column-start: 1 } } } .xl\:hero-overlay { @layer daisyui.l1.l2.l3 { background-color: color-mix(in oklab, var(--color-neutral) 50%, transparent); grid-row-start: 1; grid-column-start: 1; width: 100%; height: 100% } } .xl\:hero-content { @layer daisyui.l1.l2.l3 { isolation: isolate; justify-content: center; align-items: center; gap: 1rem; max-width: 80rem; padding: 1rem; display: flex } } } @media (width>=1536px) { .\32 xl\:hero { @layer daisyui.l1.l2.l3 { background-position: 50%; background-size: cover; place-items: center; width: 100%; display: grid; &>* { grid-row-start: 1; grid-column-start: 1 } } } .\32 xl\:hero-overlay { @layer daisyui.l1.l2.l3 { background-color: color-mix(in oklab, var(--color-neutral) 50%, transparent); grid-row-start: 1; grid-column-start: 1; width: 100%; height: 100% } } .\32 xl\:hero-content { @layer daisyui.l1.l2.l3 { isolation: isolate; justify-content: center; align-items: center; gap: 1rem; max-width: 80rem; padding: 1rem; display: flex } } } .label { @layer daisyui.l1.l2.l3 { white-space: nowrap; color: color-mix(in oklab, currentcolor 60%, transparent); align-items: center; gap: .375rem; display: inline-flex; &:has(input) { cursor: pointer } &:is(.input>*, .select>*) { white-space: nowrap; height: calc(100% - .5rem); font-size: inherit; align-items: center; padding-inline: .75rem; display: flex; &:first-child { border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); margin-inline: -.75rem .75rem } &:last-child { border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); margin-inline: .75rem -.75rem } } } } .floating-label { @layer daisyui.l1.l2.l3 { display: flex; position: relative; & ::placeholder { transition: top .1s ease-out, translate .1s ease-out, scale .1s ease-out, opacity .1s ease-out } &>span { z-index: 1; background-color: var(--color-base-100); opacity: 0; font-size: var(--font-size, .875rem); inset-inline-start: .75rem; top: calc(var(--size-field, .25rem) * var(--top-mul, 5)); pointer-events: none; border-radius: 2px; padding-inline: .25rem; line-height: 1; transition: top .1s ease-out, translate .1s ease-out, scale .1s ease-out, opacity .1s ease-out; position: absolute; translate: 0 -50% } &:focus-within, &:not(:has(input:placeholder-shown, textarea:placeholder-shown)) { & ::placeholder { opacity: 0; pointer-events: auto; top: 0; translate: -12.5% calc(-50% - .125em); scale: .75 } &>span { opacity: 1; pointer-events: auto; z-index: 2; top: 0; translate: -12.5% calc(-50% - .125em); scale: .75 } } &:has(:disabled, [disabled]) { &>span { opacity: 0 } } } } @media (width>=640px) { .sm\:label { @layer daisyui.l1.l2.l3 { white-space: nowrap; color: color-mix(in oklab, currentcolor 60%, transparent); align-items: center; gap: .375rem; display: inline-flex; &:has(input) { cursor: pointer } &:is(.input>*, .select>*) { white-space: nowrap; height: calc(100% - .5rem); font-size: inherit; align-items: center; padding-inline: .75rem; display: flex; &:first-child { border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); margin-inline: -.75rem .75rem } &:last-child { border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); margin-inline: .75rem -.75rem } } } } .sm\:floating-label { @layer daisyui.l1.l2.l3 { display: flex; position: relative; & ::placeholder { transition: top .1s ease-out, translate .1s ease-out, scale .1s ease-out, opacity .1s ease-out } &>span { z-index: 1; background-color: var(--color-base-100); opacity: 0; font-size: var(--font-size, .875rem); inset-inline-start: .75rem; top: calc(var(--size-field, .25rem) * var(--top-mul, 5)); pointer-events: none; border-radius: 2px; padding-inline: .25rem; line-height: 1; transition: top .1s ease-out, translate .1s ease-out, scale .1s ease-out, opacity .1s ease-out; position: absolute; translate: 0 -50% } &:focus-within, &:not(:has(input:placeholder-shown, textarea:placeholder-shown)) { & ::placeholder { opacity: 0; pointer-events: auto; top: 0; translate: -12.5% calc(-50% - .125em); scale: .75 } &>span { opacity: 1; pointer-events: auto; z-index: 2; top: 0; translate: -12.5% calc(-50% - .125em); scale: .75 } } &:has(:disabled, [disabled]) { &>span { opacity: 0 } } } } } @media (width>=768px) { .md\:label { @layer daisyui.l1.l2.l3 { white-space: nowrap; color: color-mix(in oklab, currentcolor 60%, transparent); align-items: center; gap: .375rem; display: inline-flex; &:has(input) { cursor: pointer } &:is(.input>*, .select>*) { white-space: nowrap; height: calc(100% - .5rem); font-size: inherit; align-items: center; padding-inline: .75rem; display: flex; &:first-child { border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); margin-inline: -.75rem .75rem } &:last-child { border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); margin-inline: .75rem -.75rem } } } } .md\:floating-label { @layer daisyui.l1.l2.l3 { display: flex; position: relative; & ::placeholder { transition: top .1s ease-out, translate .1s ease-out, scale .1s ease-out, opacity .1s ease-out } &>span { z-index: 1; background-color: var(--color-base-100); opacity: 0; font-size: var(--font-size, .875rem); inset-inline-start: .75rem; top: calc(var(--size-field, .25rem) * var(--top-mul, 5)); pointer-events: none; border-radius: 2px; padding-inline: .25rem; line-height: 1; transition: top .1s ease-out, translate .1s ease-out, scale .1s ease-out, opacity .1s ease-out; position: absolute; translate: 0 -50% } &:focus-within, &:not(:has(input:placeholder-shown, textarea:placeholder-shown)) { & ::placeholder { opacity: 0; pointer-events: auto; top: 0; translate: -12.5% calc(-50% - .125em); scale: .75 } &>span { opacity: 1; pointer-events: auto; z-index: 2; top: 0; translate: -12.5% calc(-50% - .125em); scale: .75 } } &:has(:disabled, [disabled]) { &>span { opacity: 0 } } } } } @media (width>=1024px) { .lg\:label { @layer daisyui.l1.l2.l3 { white-space: nowrap; color: color-mix(in oklab, currentcolor 60%, transparent); align-items: center; gap: .375rem; display: inline-flex; &:has(input) { cursor: pointer } &:is(.input>*, .select>*) { white-space: nowrap; height: calc(100% - .5rem); font-size: inherit; align-items: center; padding-inline: .75rem; display: flex; &:first-child { border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); margin-inline: -.75rem .75rem } &:last-child { border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); margin-inline: .75rem -.75rem } } } } .lg\:floating-label { @layer daisyui.l1.l2.l3 { display: flex; position: relative; & ::placeholder { transition: top .1s ease-out, translate .1s ease-out, scale .1s ease-out, opacity .1s ease-out } &>span { z-index: 1; background-color: var(--color-base-100); opacity: 0; font-size: var(--font-size, .875rem); inset-inline-start: .75rem; top: calc(var(--size-field, .25rem) * var(--top-mul, 5)); pointer-events: none; border-radius: 2px; padding-inline: .25rem; line-height: 1; transition: top .1s ease-out, translate .1s ease-out, scale .1s ease-out, opacity .1s ease-out; position: absolute; translate: 0 -50% } &:focus-within, &:not(:has(input:placeholder-shown, textarea:placeholder-shown)) { & ::placeholder { opacity: 0; pointer-events: auto; top: 0; translate: -12.5% calc(-50% - .125em); scale: .75 } &>span { opacity: 1; pointer-events: auto; z-index: 2; top: 0; translate: -12.5% calc(-50% - .125em); scale: .75 } } &:has(:disabled, [disabled]) { &>span { opacity: 0 } } } } } @media (width>=1280px) { .xl\:label { @layer daisyui.l1.l2.l3 { white-space: nowrap; color: color-mix(in oklab, currentcolor 60%, transparent); align-items: center; gap: .375rem; display: inline-flex; &:has(input) { cursor: pointer } &:is(.input>*, .select>*) { white-space: nowrap; height: calc(100% - .5rem); font-size: inherit; align-items: center; padding-inline: .75rem; display: flex; &:first-child { border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); margin-inline: -.75rem .75rem } &:last-child { border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); margin-inline: .75rem -.75rem } } } } .xl\:floating-label { @layer daisyui.l1.l2.l3 { display: flex; position: relative; & ::placeholder { transition: top .1s ease-out, translate .1s ease-out, scale .1s ease-out, opacity .1s ease-out } &>span { z-index: 1; background-color: var(--color-base-100); opacity: 0; font-size: var(--font-size, .875rem); inset-inline-start: .75rem; top: calc(var(--size-field, .25rem) * var(--top-mul, 5)); pointer-events: none; border-radius: 2px; padding-inline: .25rem; line-height: 1; transition: top .1s ease-out, translate .1s ease-out, scale .1s ease-out, opacity .1s ease-out; position: absolute; translate: 0 -50% } &:focus-within, &:not(:has(input:placeholder-shown, textarea:placeholder-shown)) { & ::placeholder { opacity: 0; pointer-events: auto; top: 0; translate: -12.5% calc(-50% - .125em); scale: .75 } &>span { opacity: 1; pointer-events: auto; z-index: 2; top: 0; translate: -12.5% calc(-50% - .125em); scale: .75 } } &:has(:disabled, [disabled]) { &>span { opacity: 0 } } } } } @media (width>=1536px) { .\32 xl\:label { @layer daisyui.l1.l2.l3 { white-space: nowrap; color: color-mix(in oklab, currentcolor 60%, transparent); align-items: center; gap: .375rem; display: inline-flex; &:has(input) { cursor: pointer } &:is(.input>*, .select>*) { white-space: nowrap; height: calc(100% - .5rem); font-size: inherit; align-items: center; padding-inline: .75rem; display: flex; &:first-child { border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); margin-inline: -.75rem .75rem } &:last-child { border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); margin-inline: .75rem -.75rem } } } } .\32 xl\:floating-label { @layer daisyui.l1.l2.l3 { display: flex; position: relative; & ::placeholder { transition: top .1s ease-out, translate .1s ease-out, scale .1s ease-out, opacity .1s ease-out } &>span { z-index: 1; background-color: var(--color-base-100); opacity: 0; font-size: var(--font-size, .875rem); inset-inline-start: .75rem; top: calc(var(--size-field, .25rem) * var(--top-mul, 5)); pointer-events: none; border-radius: 2px; padding-inline: .25rem; line-height: 1; transition: top .1s ease-out, translate .1s ease-out, scale .1s ease-out, opacity .1s ease-out; position: absolute; translate: 0 -50% } &:focus-within, &:not(:has(input:placeholder-shown, textarea:placeholder-shown)) { & ::placeholder { opacity: 0; pointer-events: auto; top: 0; translate: -12.5% calc(-50% - .125em); scale: .75 } &>span { opacity: 1; pointer-events: auto; z-index: 2; top: 0; translate: -12.5% calc(-50% - .125em); scale: .75 } } &:has(:disabled, [disabled]) { &>span { opacity: 0 } } } } } .table { @layer daisyui.l1.l2.l3 { border-collapse: separate; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; width: 100%; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); border-radius: var(--radius-box); text-align: left; font-size: .875rem; position: relative; &:where(:dir(rtl), [dir=rtl], [dir=rtl] *) { text-align: right } & tr.row-hover { &, &:nth-child(2n) { &:hover { @media (hover:hover) { background-color: var(--color-base-200) } } } } & :where(th, td) { vertical-align: middle; padding-block: .75rem; padding-inline: 1rem } & :where(thead, tfoot) { white-space: nowrap; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-size: .875rem; font-weight: 600 } & :where(tfoot tr:first-child :is(td, th)) { border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000) } & :where(.table-pin-rows thead tr) { z-index: 1; background-color: var(--color-base-100); position: sticky; top: 0 } & :where(.table-pin-rows tfoot tr) { z-index: 1; background-color: var(--color-base-100); position: sticky; bottom: 0 } & :where(.table-pin-cols tr th) { background-color: var(--color-base-100); position: sticky; left: 0; right: 0 } & :where(thead tr :is(td, th), tbody tr:not(:last-child) :is(td, th)) { border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000) } } } .table-zebra { @layer daisyui.l1.l2 { & tbody { & tr { &:where(:nth-child(2n)) { background-color: var(--color-base-200); & :where(.table-pin-cols tr th) { background-color: var(--color-base-200) } } &.row-hover { &, &:where(:nth-child(2n)) { &:hover { @media (hover:hover) { background-color: var(--color-base-300) } } } } } } } } .table-xs { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: .6875rem } & :where(th, td) { padding-block: .25rem; padding-inline: .5rem } } } .table-sm { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: .75rem } & :where(th, td) { padding-block: .5rem; padding-inline: .75rem } } } .table-md { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: .875rem } & :where(th, td) { padding-block: .75rem; padding-inline: 1rem } } } .table-lg { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: 1.125rem } & :where(th, td) { padding-block: 1rem; padding-inline: 1.25rem } } } .table-xl { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: 1.375rem } & :where(th, td) { padding-block: 1.25rem; padding-inline: 1.5rem } } } @media (width>=640px) { .sm\:table { @layer daisyui.l1.l2.l3 { border-collapse: separate; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; width: 100%; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); border-radius: var(--radius-box); text-align: left; font-size: .875rem; position: relative; &:where(:dir(rtl), [dir=rtl], [dir=rtl] *) { text-align: right } & tr.row-hover { &, &:nth-child(2n) { &:hover { @media (hover:hover) { background-color: var(--color-base-200) } } } } & :where(th, td) { vertical-align: middle; padding-block: .75rem; padding-inline: 1rem } & :where(thead, tfoot) { white-space: nowrap; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-size: .875rem; font-weight: 600 } & :where(tfoot tr:first-child :is(td, th)) { border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000) } & :where(.table-pin-rows thead tr) { z-index: 1; background-color: var(--color-base-100); position: sticky; top: 0 } & :where(.table-pin-rows tfoot tr) { z-index: 1; background-color: var(--color-base-100); position: sticky; bottom: 0 } & :where(.table-pin-cols tr th) { background-color: var(--color-base-100); position: sticky; left: 0; right: 0 } & :where(thead tr :is(td, th), tbody tr:not(:last-child) :is(td, th)) { border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000) } } } .sm\:table-zebra { @layer daisyui.l1.l2 { & tbody { & tr { &:where(:nth-child(2n)) { background-color: var(--color-base-200); & :where(.table-pin-cols tr th) { background-color: var(--color-base-200) } } &.row-hover { &, &:where(:nth-child(2n)) { &:hover { @media (hover:hover) { background-color: var(--color-base-300) } } } } } } } } .sm\:table-xs { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: .6875rem } & :where(th, td) { padding-block: .25rem; padding-inline: .5rem } } } .sm\:table-sm { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: .75rem } & :where(th, td) { padding-block: .5rem; padding-inline: .75rem } } } .sm\:table-md { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: .875rem } & :where(th, td) { padding-block: .75rem; padding-inline: 1rem } } } .sm\:table-lg { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: 1.125rem } & :where(th, td) { padding-block: 1rem; padding-inline: 1.25rem } } } .sm\:table-xl { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: 1.375rem } & :where(th, td) { padding-block: 1.25rem; padding-inline: 1.5rem } } } } @media (width>=768px) { .md\:table { @layer daisyui.l1.l2.l3 { border-collapse: separate; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; width: 100%; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); border-radius: var(--radius-box); text-align: left; font-size: .875rem; position: relative; &:where(:dir(rtl), [dir=rtl], [dir=rtl] *) { text-align: right } & tr.row-hover { &, &:nth-child(2n) { &:hover { @media (hover:hover) { background-color: var(--color-base-200) } } } } & :where(th, td) { vertical-align: middle; padding-block: .75rem; padding-inline: 1rem } & :where(thead, tfoot) { white-space: nowrap; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-size: .875rem; font-weight: 600 } & :where(tfoot tr:first-child :is(td, th)) { border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000) } & :where(.table-pin-rows thead tr) { z-index: 1; background-color: var(--color-base-100); position: sticky; top: 0 } & :where(.table-pin-rows tfoot tr) { z-index: 1; background-color: var(--color-base-100); position: sticky; bottom: 0 } & :where(.table-pin-cols tr th) { background-color: var(--color-base-100); position: sticky; left: 0; right: 0 } & :where(thead tr :is(td, th), tbody tr:not(:last-child) :is(td, th)) { border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000) } } } .md\:table-zebra { @layer daisyui.l1.l2 { & tbody { & tr { &:where(:nth-child(2n)) { background-color: var(--color-base-200); & :where(.table-pin-cols tr th) { background-color: var(--color-base-200) } } &.row-hover { &, &:where(:nth-child(2n)) { &:hover { @media (hover:hover) { background-color: var(--color-base-300) } } } } } } } } .md\:table-xs { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: .6875rem } & :where(th, td) { padding-block: .25rem; padding-inline: .5rem } } } .md\:table-sm { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: .75rem } & :where(th, td) { padding-block: .5rem; padding-inline: .75rem } } } .md\:table-md { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: .875rem } & :where(th, td) { padding-block: .75rem; padding-inline: 1rem } } } .md\:table-lg { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: 1.125rem } & :where(th, td) { padding-block: 1rem; padding-inline: 1.25rem } } } .md\:table-xl { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: 1.375rem } & :where(th, td) { padding-block: 1.25rem; padding-inline: 1.5rem } } } } @media (width>=1024px) { .lg\:table { @layer daisyui.l1.l2.l3 { border-collapse: separate; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; width: 100%; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); border-radius: var(--radius-box); text-align: left; font-size: .875rem; position: relative; &:where(:dir(rtl), [dir=rtl], [dir=rtl] *) { text-align: right } & tr.row-hover { &, &:nth-child(2n) { &:hover { @media (hover:hover) { background-color: var(--color-base-200) } } } } & :where(th, td) { vertical-align: middle; padding-block: .75rem; padding-inline: 1rem } & :where(thead, tfoot) { white-space: nowrap; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-size: .875rem; font-weight: 600 } & :where(tfoot tr:first-child :is(td, th)) { border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000) } & :where(.table-pin-rows thead tr) { z-index: 1; background-color: var(--color-base-100); position: sticky; top: 0 } & :where(.table-pin-rows tfoot tr) { z-index: 1; background-color: var(--color-base-100); position: sticky; bottom: 0 } & :where(.table-pin-cols tr th) { background-color: var(--color-base-100); position: sticky; left: 0; right: 0 } & :where(thead tr :is(td, th), tbody tr:not(:last-child) :is(td, th)) { border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000) } } } .lg\:table-zebra { @layer daisyui.l1.l2 { & tbody { & tr { &:where(:nth-child(2n)) { background-color: var(--color-base-200); & :where(.table-pin-cols tr th) { background-color: var(--color-base-200) } } &.row-hover { &, &:where(:nth-child(2n)) { &:hover { @media (hover:hover) { background-color: var(--color-base-300) } } } } } } } } .lg\:table-xs { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: .6875rem } & :where(th, td) { padding-block: .25rem; padding-inline: .5rem } } } .lg\:table-sm { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: .75rem } & :where(th, td) { padding-block: .5rem; padding-inline: .75rem } } } .lg\:table-md { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: .875rem } & :where(th, td) { padding-block: .75rem; padding-inline: 1rem } } } .lg\:table-lg { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: 1.125rem } & :where(th, td) { padding-block: 1rem; padding-inline: 1.25rem } } } .lg\:table-xl { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: 1.375rem } & :where(th, td) { padding-block: 1.25rem; padding-inline: 1.5rem } } } } @media (width>=1280px) { .xl\:table { @layer daisyui.l1.l2.l3 { border-collapse: separate; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; width: 100%; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); border-radius: var(--radius-box); text-align: left; font-size: .875rem; position: relative; &:where(:dir(rtl), [dir=rtl], [dir=rtl] *) { text-align: right } & tr.row-hover { &, &:nth-child(2n) { &:hover { @media (hover:hover) { background-color: var(--color-base-200) } } } } & :where(th, td) { vertical-align: middle; padding-block: .75rem; padding-inline: 1rem } & :where(thead, tfoot) { white-space: nowrap; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-size: .875rem; font-weight: 600 } & :where(tfoot tr:first-child :is(td, th)) { border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000) } & :where(.table-pin-rows thead tr) { z-index: 1; background-color: var(--color-base-100); position: sticky; top: 0 } & :where(.table-pin-rows tfoot tr) { z-index: 1; background-color: var(--color-base-100); position: sticky; bottom: 0 } & :where(.table-pin-cols tr th) { background-color: var(--color-base-100); position: sticky; left: 0; right: 0 } & :where(thead tr :is(td, th), tbody tr:not(:last-child) :is(td, th)) { border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000) } } } .xl\:table-zebra { @layer daisyui.l1.l2 { & tbody { & tr { &:where(:nth-child(2n)) { background-color: var(--color-base-200); & :where(.table-pin-cols tr th) { background-color: var(--color-base-200) } } &.row-hover { &, &:where(:nth-child(2n)) { &:hover { @media (hover:hover) { background-color: var(--color-base-300) } } } } } } } } .xl\:table-xs { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: .6875rem } & :where(th, td) { padding-block: .25rem; padding-inline: .5rem } } } .xl\:table-sm { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: .75rem } & :where(th, td) { padding-block: .5rem; padding-inline: .75rem } } } .xl\:table-md { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: .875rem } & :where(th, td) { padding-block: .75rem; padding-inline: 1rem } } } .xl\:table-lg { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: 1.125rem } & :where(th, td) { padding-block: 1rem; padding-inline: 1.25rem } } } .xl\:table-xl { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: 1.375rem } & :where(th, td) { padding-block: 1.25rem; padding-inline: 1.5rem } } } } @media (width>=1536px) { .\32 xl\:table { @layer daisyui.l1.l2.l3 { border-collapse: separate; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; width: 100%; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); border-radius: var(--radius-box); text-align: left; font-size: .875rem; position: relative; &:where(:dir(rtl), [dir=rtl], [dir=rtl] *) { text-align: right } & tr.row-hover { &, &:nth-child(2n) { &:hover { @media (hover:hover) { background-color: var(--color-base-200) } } } } & :where(th, td) { vertical-align: middle; padding-block: .75rem; padding-inline: 1rem } & :where(thead, tfoot) { white-space: nowrap; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-size: .875rem; font-weight: 600 } & :where(tfoot tr:first-child :is(td, th)) { border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000) } & :where(.table-pin-rows thead tr) { z-index: 1; background-color: var(--color-base-100); position: sticky; top: 0 } & :where(.table-pin-rows tfoot tr) { z-index: 1; background-color: var(--color-base-100); position: sticky; bottom: 0 } & :where(.table-pin-cols tr th) { background-color: var(--color-base-100); position: sticky; left: 0; right: 0 } & :where(thead tr :is(td, th), tbody tr:not(:last-child) :is(td, th)) { border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000) } } } .\32 xl\:table-zebra { @layer daisyui.l1.l2 { & tbody { & tr { &:where(:nth-child(2n)) { background-color: var(--color-base-200); & :where(.table-pin-cols tr th) { background-color: var(--color-base-200) } } &.row-hover { &, &:where(:nth-child(2n)) { &:hover { @media (hover:hover) { background-color: var(--color-base-300) } } } } } } } } .\32 xl\:table-xs { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: .6875rem } & :where(th, td) { padding-block: .25rem; padding-inline: .5rem } } } .\32 xl\:table-sm { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: .75rem } & :where(th, td) { padding-block: .5rem; padding-inline: .75rem } } } .\32 xl\:table-md { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: .875rem } & :where(th, td) { padding-block: .75rem; padding-inline: 1rem } } } .\32 xl\:table-lg { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: 1.125rem } & :where(th, td) { padding-block: 1rem; padding-inline: 1.25rem } } } .\32 xl\:table-xl { @layer daisyui.l1.l2 { & :not(thead, tfoot) tr { font-size: 1.375rem } & :where(th, td) { padding-block: 1.25rem; padding-inline: 1.5rem } } } } .validator { @layer daisyui.l1.l2.l3 { &:user-valid, &:has(:user-valid) { &, &:focus, &:checked, &[aria-checked=true], &:focus-within { --input-color: var(--color-success) } } &:user-invalid, &:has(:user-invalid), &[aria-invalid]:not([aria-invalid=false]), &:has([aria-invalid]:not([aria-invalid=false])) { &, &:focus, &:checked, &[aria-checked=true], &:focus-within { --input-color: var(--color-error) } &~.validator-hint { visibility: visible; color: var(--color-error) } } } } .validator-hint { @layer daisyui.l1.l2.l3 { visibility: hidden; margin-top: .5rem; font-size: .75rem } } .validator { &:user-invalid, &:has(:user-invalid), &[aria-invalid]:not([aria-invalid=false]), &:has([aria-invalid]:not([aria-invalid=false])) { &~.validator-hint { display: revert-layer } } } .status { @layer daisyui.l1.l2.l3 { aspect-ratio: 1; border-radius: var(--radius-selector); background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); vertical-align: middle; width: .5rem; height: .5rem; color: color-mix(in oklab, var(--color-black) 30%, transparent); background-position: 50%; background-repeat: no-repeat; background-image: radial-gradient(circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * .5)), #0000); box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000); display: inline-block } } .status-primary { @layer daisyui.l1.l2 { background-color: var(--color-primary); color: var(--color-primary) } } .status-secondary { @layer daisyui.l1.l2 { background-color: var(--color-secondary); color: var(--color-secondary) } } .status-accent { @layer daisyui.l1.l2 { background-color: var(--color-accent); color: var(--color-accent) } } .status-neutral { @layer daisyui.l1.l2 { background-color: var(--color-neutral); color: var(--color-neutral) } } .status-info { @layer daisyui.l1.l2 { background-color: var(--color-info); color: var(--color-info) } } .status-success { @layer daisyui.l1.l2 { background-color: var(--color-success); color: var(--color-success) } } .status-warning { @layer daisyui.l1.l2 { background-color: var(--color-warning); color: var(--color-warning) } } .status-error { @layer daisyui.l1.l2 { background-color: var(--color-error); color: var(--color-error) } } .status-xs { @layer daisyui.l1.l2 { width: .125rem; height: .125rem } } .status-sm { @layer daisyui.l1.l2 { width: .25rem; height: .25rem } } .status-md { @layer daisyui.l1.l2 { width: .5rem; height: .5rem } } .status-lg { @layer daisyui.l1.l2 { width: .75rem; height: .75rem } } .status-xl { @layer daisyui.l1.l2 { width: 1rem; height: 1rem } } @media (width>=640px) { .sm\:status { @layer daisyui.l1.l2.l3 { aspect-ratio: 1; border-radius: var(--radius-selector); background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); vertical-align: middle; width: .5rem; height: .5rem; color: color-mix(in oklab, var(--color-black) 30%, transparent); background-position: 50%; background-repeat: no-repeat; background-image: radial-gradient(circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * .5)), #0000); box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000); display: inline-block } } .sm\:status-primary { @layer daisyui.l1.l2 { background-color: var(--color-primary); color: var(--color-primary) } } .sm\:status-secondary { @layer daisyui.l1.l2 { background-color: var(--color-secondary); color: var(--color-secondary) } } .sm\:status-accent { @layer daisyui.l1.l2 { background-color: var(--color-accent); color: var(--color-accent) } } .sm\:status-neutral { @layer daisyui.l1.l2 { background-color: var(--color-neutral); color: var(--color-neutral) } } .sm\:status-info { @layer daisyui.l1.l2 { background-color: var(--color-info); color: var(--color-info) } } .sm\:status-success { @layer daisyui.l1.l2 { background-color: var(--color-success); color: var(--color-success) } } .sm\:status-warning { @layer daisyui.l1.l2 { background-color: var(--color-warning); color: var(--color-warning) } } .sm\:status-error { @layer daisyui.l1.l2 { background-color: var(--color-error); color: var(--color-error) } } .sm\:status-xs { @layer daisyui.l1.l2 { width: .125rem; height: .125rem } } .sm\:status-sm { @layer daisyui.l1.l2 { width: .25rem; height: .25rem } } .sm\:status-md { @layer daisyui.l1.l2 { width: .5rem; height: .5rem } } .sm\:status-lg { @layer daisyui.l1.l2 { width: .75rem; height: .75rem } } .sm\:status-xl { @layer daisyui.l1.l2 { width: 1rem; height: 1rem } } } @media (width>=768px) { .md\:status { @layer daisyui.l1.l2.l3 { aspect-ratio: 1; border-radius: var(--radius-selector); background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); vertical-align: middle; width: .5rem; height: .5rem; color: color-mix(in oklab, var(--color-black) 30%, transparent); background-position: 50%; background-repeat: no-repeat; background-image: radial-gradient(circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * .5)), #0000); box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000); display: inline-block } } .md\:status-primary { @layer daisyui.l1.l2 { background-color: var(--color-primary); color: var(--color-primary) } } .md\:status-secondary { @layer daisyui.l1.l2 { background-color: var(--color-secondary); color: var(--color-secondary) } } .md\:status-accent { @layer daisyui.l1.l2 { background-color: var(--color-accent); color: var(--color-accent) } } .md\:status-neutral { @layer daisyui.l1.l2 { background-color: var(--color-neutral); color: var(--color-neutral) } } .md\:status-info { @layer daisyui.l1.l2 { background-color: var(--color-info); color: var(--color-info) } } .md\:status-success { @layer daisyui.l1.l2 { background-color: var(--color-success); color: var(--color-success) } } .md\:status-warning { @layer daisyui.l1.l2 { background-color: var(--color-warning); color: var(--color-warning) } } .md\:status-error { @layer daisyui.l1.l2 { background-color: var(--color-error); color: var(--color-error) } } .md\:status-xs { @layer daisyui.l1.l2 { width: .125rem; height: .125rem } } .md\:status-sm { @layer daisyui.l1.l2 { width: .25rem; height: .25rem } } .md\:status-md { @layer daisyui.l1.l2 { width: .5rem; height: .5rem } } .md\:status-lg { @layer daisyui.l1.l2 { width: .75rem; height: .75rem } } .md\:status-xl { @layer daisyui.l1.l2 { width: 1rem; height: 1rem } } } @media (width>=1024px) { .lg\:status { @layer daisyui.l1.l2.l3 { aspect-ratio: 1; border-radius: var(--radius-selector); background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); vertical-align: middle; width: .5rem; height: .5rem; color: color-mix(in oklab, var(--color-black) 30%, transparent); background-position: 50%; background-repeat: no-repeat; background-image: radial-gradient(circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * .5)), #0000); box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000); display: inline-block } } .lg\:status-primary { @layer daisyui.l1.l2 { background-color: var(--color-primary); color: var(--color-primary) } } .lg\:status-secondary { @layer daisyui.l1.l2 { background-color: var(--color-secondary); color: var(--color-secondary) } } .lg\:status-accent { @layer daisyui.l1.l2 { background-color: var(--color-accent); color: var(--color-accent) } } .lg\:status-neutral { @layer daisyui.l1.l2 { background-color: var(--color-neutral); color: var(--color-neutral) } } .lg\:status-info { @layer daisyui.l1.l2 { background-color: var(--color-info); color: var(--color-info) } } .lg\:status-success { @layer daisyui.l1.l2 { background-color: var(--color-success); color: var(--color-success) } } .lg\:status-warning { @layer daisyui.l1.l2 { background-color: var(--color-warning); color: var(--color-warning) } } .lg\:status-error { @layer daisyui.l1.l2 { background-color: var(--color-error); color: var(--color-error) } } .lg\:status-xs { @layer daisyui.l1.l2 { width: .125rem; height: .125rem } } .lg\:status-sm { @layer daisyui.l1.l2 { width: .25rem; height: .25rem } } .lg\:status-md { @layer daisyui.l1.l2 { width: .5rem; height: .5rem } } .lg\:status-lg { @layer daisyui.l1.l2 { width: .75rem; height: .75rem } } .lg\:status-xl { @layer daisyui.l1.l2 { width: 1rem; height: 1rem } } } @media (width>=1280px) { .xl\:status { @layer daisyui.l1.l2.l3 { aspect-ratio: 1; border-radius: var(--radius-selector); background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); vertical-align: middle; width: .5rem; height: .5rem; color: color-mix(in oklab, var(--color-black) 30%, transparent); background-position: 50%; background-repeat: no-repeat; background-image: radial-gradient(circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * .5)), #0000); box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000); display: inline-block } } .xl\:status-primary { @layer daisyui.l1.l2 { background-color: var(--color-primary); color: var(--color-primary) } } .xl\:status-secondary { @layer daisyui.l1.l2 { background-color: var(--color-secondary); color: var(--color-secondary) } } .xl\:status-accent { @layer daisyui.l1.l2 { background-color: var(--color-accent); color: var(--color-accent) } } .xl\:status-neutral { @layer daisyui.l1.l2 { background-color: var(--color-neutral); color: var(--color-neutral) } } .xl\:status-info { @layer daisyui.l1.l2 { background-color: var(--color-info); color: var(--color-info) } } .xl\:status-success { @layer daisyui.l1.l2 { background-color: var(--color-success); color: var(--color-success) } } .xl\:status-warning { @layer daisyui.l1.l2 { background-color: var(--color-warning); color: var(--color-warning) } } .xl\:status-error { @layer daisyui.l1.l2 { background-color: var(--color-error); color: var(--color-error) } } .xl\:status-xs { @layer daisyui.l1.l2 { width: .125rem; height: .125rem } } .xl\:status-sm { @layer daisyui.l1.l2 { width: .25rem; height: .25rem } } .xl\:status-md { @layer daisyui.l1.l2 { width: .5rem; height: .5rem } } .xl\:status-lg { @layer daisyui.l1.l2 { width: .75rem; height: .75rem } } .xl\:status-xl { @layer daisyui.l1.l2 { width: 1rem; height: 1rem } } } @media (width>=1536px) { .\32 xl\:status { @layer daisyui.l1.l2.l3 { aspect-ratio: 1; border-radius: var(--radius-selector); background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); vertical-align: middle; width: .5rem; height: .5rem; color: color-mix(in oklab, var(--color-black) 30%, transparent); background-position: 50%; background-repeat: no-repeat; background-image: radial-gradient(circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * .5)), #0000); box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000); display: inline-block } } .\32 xl\:status-primary { @layer daisyui.l1.l2 { background-color: var(--color-primary); color: var(--color-primary) } } .\32 xl\:status-secondary { @layer daisyui.l1.l2 { background-color: var(--color-secondary); color: var(--color-secondary) } } .\32 xl\:status-accent { @layer daisyui.l1.l2 { background-color: var(--color-accent); color: var(--color-accent) } } .\32 xl\:status-neutral { @layer daisyui.l1.l2 { background-color: var(--color-neutral); color: var(--color-neutral) } } .\32 xl\:status-info { @layer daisyui.l1.l2 { background-color: var(--color-info); color: var(--color-info) } } .\32 xl\:status-success { @layer daisyui.l1.l2 { background-color: var(--color-success); color: var(--color-success) } } .\32 xl\:status-warning { @layer daisyui.l1.l2 { background-color: var(--color-warning); color: var(--color-warning) } } .\32 xl\:status-error { @layer daisyui.l1.l2 { background-color: var(--color-error); color: var(--color-error) } } .\32 xl\:status-xs { @layer daisyui.l1.l2 { width: .125rem; height: .125rem } } .\32 xl\:status-sm { @layer daisyui.l1.l2 { width: .25rem; height: .25rem } } .\32 xl\:status-md { @layer daisyui.l1.l2 { width: .5rem; height: .5rem } } .\32 xl\:status-lg { @layer daisyui.l1.l2 { width: .75rem; height: .75rem } } .\32 xl\:status-xl { @layer daisyui.l1.l2 { width: 1rem; height: 1rem } } } .rating { @layer daisyui.l1.l2.l3 { vertical-align: middle; --size: var(--size-selector, .25rem) * 6; display: inline-flex; position: relative; & input { cursor: pointer; appearance: none } & * { background-color: var(--color-base-content); opacity: .2; width: calc(var(--size) * 1); height: calc(var(--size)); border-radius: 0; @media (prefers-reduced-motion:no-preference) { animation: .25s ease-out rating } } & .rating-hidden { background-color: #0000; width: .5rem } & :checked, & [aria-checked=true], & [aria-current=true], & :has(~:checked, ~[aria-checked=true], ~[aria-current=true]) { opacity: 1 } & :focus-visible { scale: 1.1; @media (prefers-reduced-motion:no-preference) { transition: scale .2s ease-out } } & :active:focus { animation: none; scale: 1.1 } } } .rating-half { @layer daisyui.l1.l2 { & * { width: calc(var(--size) * .5) } } } .rating-xs { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 4 } } .rating-sm { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 5 } } .rating, .rating-md { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 6 } } .rating-lg { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 7 } } .rating-xl { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 8 } } @media (width>=640px) { .sm\:rating { @layer daisyui.l1.l2.l3 { vertical-align: middle; --size: var(--size-selector, .25rem) * 6; display: inline-flex; position: relative; & input { cursor: pointer; appearance: none } & * { background-color: var(--color-base-content); opacity: .2; width: calc(var(--size) * 1); height: calc(var(--size)); border-radius: 0; @media (prefers-reduced-motion:no-preference) { animation: .25s ease-out rating } } & .rating-hidden { background-color: #0000; width: .5rem } & :checked, & [aria-checked=true], & [aria-current=true], & :has(~:checked, ~[aria-checked=true], ~[aria-current=true]) { opacity: 1 } & :focus-visible { scale: 1.1; @media (prefers-reduced-motion:no-preference) { transition: scale .2s ease-out } } & :active:focus { animation: none; scale: 1.1 } } } .sm\:rating-half { @layer daisyui.l1.l2 { & * { width: calc(var(--size) * .5) } } } .sm\:rating-xs { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 4 } } .sm\:rating-sm { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 5 } } .sm\:rating, .sm\:rating-md { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 6 } } .sm\:rating-lg { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 7 } } .sm\:rating-xl { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 8 } } } @media (width>=768px) { .md\:rating { @layer daisyui.l1.l2.l3 { vertical-align: middle; --size: var(--size-selector, .25rem) * 6; display: inline-flex; position: relative; & input { cursor: pointer; appearance: none } & * { background-color: var(--color-base-content); opacity: .2; width: calc(var(--size) * 1); height: calc(var(--size)); border-radius: 0; @media (prefers-reduced-motion:no-preference) { animation: .25s ease-out rating } } & .rating-hidden { background-color: #0000; width: .5rem } & :checked, & [aria-checked=true], & [aria-current=true], & :has(~:checked, ~[aria-checked=true], ~[aria-current=true]) { opacity: 1 } & :focus-visible { scale: 1.1; @media (prefers-reduced-motion:no-preference) { transition: scale .2s ease-out } } & :active:focus { animation: none; scale: 1.1 } } } .md\:rating-half { @layer daisyui.l1.l2 { & * { width: calc(var(--size) * .5) } } } .md\:rating-xs { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 4 } } .md\:rating-sm { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 5 } } .md\:rating, .md\:rating-md { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 6 } } .md\:rating-lg { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 7 } } .md\:rating-xl { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 8 } } } @media (width>=1024px) { .lg\:rating { @layer daisyui.l1.l2.l3 { vertical-align: middle; --size: var(--size-selector, .25rem) * 6; display: inline-flex; position: relative; & input { cursor: pointer; appearance: none } & * { background-color: var(--color-base-content); opacity: .2; width: calc(var(--size) * 1); height: calc(var(--size)); border-radius: 0; @media (prefers-reduced-motion:no-preference) { animation: .25s ease-out rating } } & .rating-hidden { background-color: #0000; width: .5rem } & :checked, & [aria-checked=true], & [aria-current=true], & :has(~:checked, ~[aria-checked=true], ~[aria-current=true]) { opacity: 1 } & :focus-visible { scale: 1.1; @media (prefers-reduced-motion:no-preference) { transition: scale .2s ease-out } } & :active:focus { animation: none; scale: 1.1 } } } .lg\:rating-half { @layer daisyui.l1.l2 { & * { width: calc(var(--size) * .5) } } } .lg\:rating-xs { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 4 } } .lg\:rating-sm { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 5 } } .lg\:rating, .lg\:rating-md { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 6 } } .lg\:rating-lg { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 7 } } .lg\:rating-xl { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 8 } } } @media (width>=1280px) { .xl\:rating { @layer daisyui.l1.l2.l3 { vertical-align: middle; --size: var(--size-selector, .25rem) * 6; display: inline-flex; position: relative; & input { cursor: pointer; appearance: none } & * { background-color: var(--color-base-content); opacity: .2; width: calc(var(--size) * 1); height: calc(var(--size)); border-radius: 0; @media (prefers-reduced-motion:no-preference) { animation: .25s ease-out rating } } & .rating-hidden { background-color: #0000; width: .5rem } & :checked, & [aria-checked=true], & [aria-current=true], & :has(~:checked, ~[aria-checked=true], ~[aria-current=true]) { opacity: 1 } & :focus-visible { scale: 1.1; @media (prefers-reduced-motion:no-preference) { transition: scale .2s ease-out } } & :active:focus { animation: none; scale: 1.1 } } } .xl\:rating-half { @layer daisyui.l1.l2 { & * { width: calc(var(--size) * .5) } } } .xl\:rating-xs { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 4 } } .xl\:rating-sm { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 5 } } .xl\:rating, .xl\:rating-md { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 6 } } .xl\:rating-lg { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 7 } } .xl\:rating-xl { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 8 } } } @media (width>=1536px) { .\32 xl\:rating { @layer daisyui.l1.l2.l3 { vertical-align: middle; --size: var(--size-selector, .25rem) * 6; display: inline-flex; position: relative; & input { cursor: pointer; appearance: none } & * { background-color: var(--color-base-content); opacity: .2; width: calc(var(--size) * 1); height: calc(var(--size)); border-radius: 0; @media (prefers-reduced-motion:no-preference) { animation: .25s ease-out rating } } & .rating-hidden { background-color: #0000; width: .5rem } & :checked, & [aria-checked=true], & [aria-current=true], & :has(~:checked, ~[aria-checked=true], ~[aria-current=true]) { opacity: 1 } & :focus-visible { scale: 1.1; @media (prefers-reduced-motion:no-preference) { transition: scale .2s ease-out } } & :active:focus { animation: none; scale: 1.1 } } } .\32 xl\:rating-half { @layer daisyui.l1.l2 { & * { width: calc(var(--size) * .5) } } } .\32 xl\:rating-xs { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 4 } } .\32 xl\:rating-sm { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 5 } } .\32 xl\:rating, .\32 xl\:rating-md { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 6 } } .\32 xl\:rating-lg { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 7 } } .\32 xl\:rating-xl { @layer daisyui.l1.l2 { --size: var(--size-selector, .25rem) * 8 } } } @keyframes rating { 0%, 40% { filter: brightness(1.05)contrast(1.05); scale: 1.1 } } .select { @layer daisyui.l1.l2.l3 { appearance: none; background-color: var(--color-base-100); vertical-align: middle; --size: calc(var(--size-field, .25rem) * var(--sl-size-mul)); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); width: clamp(3rem, 20rem, 100%); height: var(--size); font-size: max(var(--font-size, 0rem), var(--font-size-min)); touch-action: manipulation; white-space: nowrap; text-overflow: ellipsis; border: var(--border) solid var(--input-color, #0000); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%); background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%); background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-shrink: 1; align-items: center; gap: .375rem; padding-inline: .75rem 1.75rem; display: inline-flex; position: relative; overflow: hidden; [dir=rtl] & { background-position: 12px calc(1px + 50%), 16px calc(1px + 50%) } &[multiple] { background-image: none; height: auto; padding-block: .75rem; padding-inline-end: .75rem; overflow: auto } & select { appearance: none; width: calc(100% + 2.75rem); height: calc(100% - calc(var(--border) * 2)); background: inherit; border-radius: inherit; border-style: none; align-items: center; margin-inline: -.75rem -1.75rem; padding-inline: .75rem 1.75rem; &::placeholder { color: var(--color-base-content); opacity: .5 } &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:not(:last-child) { background-image: none; margin-inline-end: -1.375rem } } &:focus, &:focus-within, &:open { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate; background-image: linear-gradient(135deg, #0000 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, #0000 50%) } &:has(>select[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); &:is(select), & :is(select) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent) } box-shadow:none; &::placeholder, & ::placeholder { color: var(--color-base-content); opacity: .2 } } &:has(>select[disabled])>select[disabled] { cursor: not-allowed } &, & select { @supports (appearance:base-select) { &, &::picker(select) { appearance: base-select } } &::picker(select) { color: inherit; border: var(--border) solid var(--color-base-200); border-radius: var(--radius-box); background-color: inherit; max-height: min(24rem, 70dvh); box-shadow: 0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0/.2); box-shadow: 0 20px 25px -5px rgb(0 0 0/calc(var(--depth) * .1)), 0 8px 10px -6px rgb(0 0 0/calc(var(--depth) * .1)); margin-block: .5rem; margin-inline: .5rem; padding: .5rem; translate: -.5rem } &::picker-icon { display: none } & selectedcontent { text-overflow: ellipsis; white-space: nowrap; width: 100%; overflow: hidden } & optgroup { padding-top: .5em; & option { &:first-child { margin-top: .5em } } } & option { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: calc(.25rem * var(--option-px)); white-space: normal; transition-property: color, background-color; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); &:not(:disabled) { &:hover, &:focus-visible { cursor: pointer; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:active { background-color: var(--color-neutral); color: var(--color-neutral-content); box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral) } } } } [dir=rtl] & { &::picker(select), & select::picker(select) { translate: .5rem } } } } .select-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; transition: background-color .2s; &:focus, &:focus-within, &:open { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } &::picker(select) { background-color: var(--color-base-100); color: var(--color-base-content) } } } .select-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-neutral) } } } .select-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-primary) } } } .select-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-secondary) } } } .select-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-accent) } } } .select-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-info) } } } .select-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-success) } } } .select-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-warning) } } } .select-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-error) } } } .select-xs { @layer daisyui.l1.l2 { --sl-size-mul: 6; --font-size-min: .6875rem; --option-px: 2; .floating-label:has(&) { --top-mul: 3; --font-size: .6875rem } } } .select-sm { @layer daisyui.l1.l2 { --sl-size-mul: 8; --font-size-min: .75rem; --option-px: 2.5; .floating-label:has(&) { --top-mul: 4; --font-size: .75rem } } } .select, .select-md { @layer daisyui.l1.l2 { --sl-size-mul: 10; --font-size-min: .875rem; --option-px: 3; .floating-label:has(&) { --top-mul: 5; --font-size: .875rem } } } .select-lg { @layer daisyui.l1.l2 { --sl-size-mul: 12; --font-size-min: 1.125rem; --option-px: 4; .floating-label:has(&) { --top-mul: 6; --font-size: 1.125rem } } } .select-xl { @layer daisyui.l1.l2 { --sl-size-mul: 14; --font-size-min: 1.375rem; --option-px: 5; .floating-label:has(&) { --top-mul: 7; --font-size: 1.375rem } } } @media (width>=640px) { .sm\:select { @layer daisyui.l1.l2.l3 { appearance: none; background-color: var(--color-base-100); vertical-align: middle; --size: calc(var(--size-field, .25rem) * var(--sl-size-mul)); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); width: clamp(3rem, 20rem, 100%); height: var(--size); font-size: max(var(--font-size, 0rem), var(--font-size-min)); touch-action: manipulation; white-space: nowrap; text-overflow: ellipsis; border: var(--border) solid var(--input-color, #0000); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%); background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%); background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-shrink: 1; align-items: center; gap: .375rem; padding-inline: .75rem 1.75rem; display: inline-flex; position: relative; overflow: hidden; [dir=rtl] & { background-position: 12px calc(1px + 50%), 16px calc(1px + 50%) } &[multiple] { background-image: none; height: auto; padding-block: .75rem; padding-inline-end: .75rem; overflow: auto } & select { appearance: none; width: calc(100% + 2.75rem); height: calc(100% - calc(var(--border) * 2)); background: inherit; border-radius: inherit; border-style: none; align-items: center; margin-inline: -.75rem -1.75rem; padding-inline: .75rem 1.75rem; &::placeholder { color: var(--color-base-content); opacity: .5 } &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:not(:last-child) { background-image: none; margin-inline-end: -1.375rem } } &:focus, &:focus-within, &:open { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate; background-image: linear-gradient(135deg, #0000 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, #0000 50%) } &:has(>select[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); &:is(select), & :is(select) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent) } box-shadow:none; &::placeholder, & ::placeholder { color: var(--color-base-content); opacity: .2 } } &:has(>select[disabled])>select[disabled] { cursor: not-allowed } &, & select { @supports (appearance:base-select) { &, &::picker(select) { appearance: base-select } } &::picker(select) { color: inherit; border: var(--border) solid var(--color-base-200); border-radius: var(--radius-box); background-color: inherit; max-height: min(24rem, 70dvh); box-shadow: 0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0/.2); box-shadow: 0 20px 25px -5px rgb(0 0 0/calc(var(--depth) * .1)), 0 8px 10px -6px rgb(0 0 0/calc(var(--depth) * .1)); margin-block: .5rem; margin-inline: .5rem; padding: .5rem; translate: -.5rem } &::picker-icon { display: none } & selectedcontent { text-overflow: ellipsis; white-space: nowrap; width: 100%; overflow: hidden } & optgroup { padding-top: .5em; & option { &:first-child { margin-top: .5em } } } & option { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: calc(.25rem * var(--option-px)); white-space: normal; transition-property: color, background-color; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); &:not(:disabled) { &:hover, &:focus-visible { cursor: pointer; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:active { background-color: var(--color-neutral); color: var(--color-neutral-content); box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral) } } } } [dir=rtl] & { &::picker(select), & select::picker(select) { translate: .5rem } } } } .sm\:select-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; transition: background-color .2s; &:focus, &:focus-within, &:open { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } &::picker(select) { background-color: var(--color-base-100); color: var(--color-base-content) } } } .sm\:select-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-neutral) } } } .sm\:select-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-primary) } } } .sm\:select-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-secondary) } } } .sm\:select-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-accent) } } } .sm\:select-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-info) } } } .sm\:select-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-success) } } } .sm\:select-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-warning) } } } .sm\:select-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-error) } } } .sm\:select-xs { @layer daisyui.l1.l2 { --sl-size-mul: 6; --font-size-min: .6875rem; --option-px: 2; .floating-label:has(&) { --top-mul: 3; --font-size: .6875rem } } } .sm\:select-sm { @layer daisyui.l1.l2 { --sl-size-mul: 8; --font-size-min: .75rem; --option-px: 2.5; .floating-label:has(&) { --top-mul: 4; --font-size: .75rem } } } .sm\:select, .sm\:select-md { @layer daisyui.l1.l2 { --sl-size-mul: 10; --font-size-min: .875rem; --option-px: 3; .floating-label:has(&) { --top-mul: 5; --font-size: .875rem } } } .sm\:select-lg { @layer daisyui.l1.l2 { --sl-size-mul: 12; --font-size-min: 1.125rem; --option-px: 4; .floating-label:has(&) { --top-mul: 6; --font-size: 1.125rem } } } .sm\:select-xl { @layer daisyui.l1.l2 { --sl-size-mul: 14; --font-size-min: 1.375rem; --option-px: 5; .floating-label:has(&) { --top-mul: 7; --font-size: 1.375rem } } } } @media (width>=768px) { .md\:select { @layer daisyui.l1.l2.l3 { appearance: none; background-color: var(--color-base-100); vertical-align: middle; --size: calc(var(--size-field, .25rem) * var(--sl-size-mul)); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); width: clamp(3rem, 20rem, 100%); height: var(--size); font-size: max(var(--font-size, 0rem), var(--font-size-min)); touch-action: manipulation; white-space: nowrap; text-overflow: ellipsis; border: var(--border) solid var(--input-color, #0000); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%); background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%); background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-shrink: 1; align-items: center; gap: .375rem; padding-inline: .75rem 1.75rem; display: inline-flex; position: relative; overflow: hidden; [dir=rtl] & { background-position: 12px calc(1px + 50%), 16px calc(1px + 50%) } &[multiple] { background-image: none; height: auto; padding-block: .75rem; padding-inline-end: .75rem; overflow: auto } & select { appearance: none; width: calc(100% + 2.75rem); height: calc(100% - calc(var(--border) * 2)); background: inherit; border-radius: inherit; border-style: none; align-items: center; margin-inline: -.75rem -1.75rem; padding-inline: .75rem 1.75rem; &::placeholder { color: var(--color-base-content); opacity: .5 } &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:not(:last-child) { background-image: none; margin-inline-end: -1.375rem } } &:focus, &:focus-within, &:open { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate; background-image: linear-gradient(135deg, #0000 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, #0000 50%) } &:has(>select[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); &:is(select), & :is(select) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent) } box-shadow:none; &::placeholder, & ::placeholder { color: var(--color-base-content); opacity: .2 } } &:has(>select[disabled])>select[disabled] { cursor: not-allowed } &, & select { @supports (appearance:base-select) { &, &::picker(select) { appearance: base-select } } &::picker(select) { color: inherit; border: var(--border) solid var(--color-base-200); border-radius: var(--radius-box); background-color: inherit; max-height: min(24rem, 70dvh); box-shadow: 0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0/.2); box-shadow: 0 20px 25px -5px rgb(0 0 0/calc(var(--depth) * .1)), 0 8px 10px -6px rgb(0 0 0/calc(var(--depth) * .1)); margin-block: .5rem; margin-inline: .5rem; padding: .5rem; translate: -.5rem } &::picker-icon { display: none } & selectedcontent { text-overflow: ellipsis; white-space: nowrap; width: 100%; overflow: hidden } & optgroup { padding-top: .5em; & option { &:first-child { margin-top: .5em } } } & option { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: calc(.25rem * var(--option-px)); white-space: normal; transition-property: color, background-color; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); &:not(:disabled) { &:hover, &:focus-visible { cursor: pointer; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:active { background-color: var(--color-neutral); color: var(--color-neutral-content); box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral) } } } } [dir=rtl] & { &::picker(select), & select::picker(select) { translate: .5rem } } } } .md\:select-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; transition: background-color .2s; &:focus, &:focus-within, &:open { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } &::picker(select) { background-color: var(--color-base-100); color: var(--color-base-content) } } } .md\:select-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-neutral) } } } .md\:select-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-primary) } } } .md\:select-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-secondary) } } } .md\:select-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-accent) } } } .md\:select-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-info) } } } .md\:select-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-success) } } } .md\:select-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-warning) } } } .md\:select-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-error) } } } .md\:select-xs { @layer daisyui.l1.l2 { --sl-size-mul: 6; --font-size-min: .6875rem; --option-px: 2; .floating-label:has(&) { --top-mul: 3; --font-size: .6875rem } } } .md\:select-sm { @layer daisyui.l1.l2 { --sl-size-mul: 8; --font-size-min: .75rem; --option-px: 2.5; .floating-label:has(&) { --top-mul: 4; --font-size: .75rem } } } .md\:select, .md\:select-md { @layer daisyui.l1.l2 { --sl-size-mul: 10; --font-size-min: .875rem; --option-px: 3; .floating-label:has(&) { --top-mul: 5; --font-size: .875rem } } } .md\:select-lg { @layer daisyui.l1.l2 { --sl-size-mul: 12; --font-size-min: 1.125rem; --option-px: 4; .floating-label:has(&) { --top-mul: 6; --font-size: 1.125rem } } } .md\:select-xl { @layer daisyui.l1.l2 { --sl-size-mul: 14; --font-size-min: 1.375rem; --option-px: 5; .floating-label:has(&) { --top-mul: 7; --font-size: 1.375rem } } } } @media (width>=1024px) { .lg\:select { @layer daisyui.l1.l2.l3 { appearance: none; background-color: var(--color-base-100); vertical-align: middle; --size: calc(var(--size-field, .25rem) * var(--sl-size-mul)); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); width: clamp(3rem, 20rem, 100%); height: var(--size); font-size: max(var(--font-size, 0rem), var(--font-size-min)); touch-action: manipulation; white-space: nowrap; text-overflow: ellipsis; border: var(--border) solid var(--input-color, #0000); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%); background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%); background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-shrink: 1; align-items: center; gap: .375rem; padding-inline: .75rem 1.75rem; display: inline-flex; position: relative; overflow: hidden; [dir=rtl] & { background-position: 12px calc(1px + 50%), 16px calc(1px + 50%) } &[multiple] { background-image: none; height: auto; padding-block: .75rem; padding-inline-end: .75rem; overflow: auto } & select { appearance: none; width: calc(100% + 2.75rem); height: calc(100% - calc(var(--border) * 2)); background: inherit; border-radius: inherit; border-style: none; align-items: center; margin-inline: -.75rem -1.75rem; padding-inline: .75rem 1.75rem; &::placeholder { color: var(--color-base-content); opacity: .5 } &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:not(:last-child) { background-image: none; margin-inline-end: -1.375rem } } &:focus, &:focus-within, &:open { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate; background-image: linear-gradient(135deg, #0000 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, #0000 50%) } &:has(>select[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); &:is(select), & :is(select) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent) } box-shadow:none; &::placeholder, & ::placeholder { color: var(--color-base-content); opacity: .2 } } &:has(>select[disabled])>select[disabled] { cursor: not-allowed } &, & select { @supports (appearance:base-select) { &, &::picker(select) { appearance: base-select } } &::picker(select) { color: inherit; border: var(--border) solid var(--color-base-200); border-radius: var(--radius-box); background-color: inherit; max-height: min(24rem, 70dvh); box-shadow: 0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0/.2); box-shadow: 0 20px 25px -5px rgb(0 0 0/calc(var(--depth) * .1)), 0 8px 10px -6px rgb(0 0 0/calc(var(--depth) * .1)); margin-block: .5rem; margin-inline: .5rem; padding: .5rem; translate: -.5rem } &::picker-icon { display: none } & selectedcontent { text-overflow: ellipsis; white-space: nowrap; width: 100%; overflow: hidden } & optgroup { padding-top: .5em; & option { &:first-child { margin-top: .5em } } } & option { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: calc(.25rem * var(--option-px)); white-space: normal; transition-property: color, background-color; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); &:not(:disabled) { &:hover, &:focus-visible { cursor: pointer; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:active { background-color: var(--color-neutral); color: var(--color-neutral-content); box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral) } } } } [dir=rtl] & { &::picker(select), & select::picker(select) { translate: .5rem } } } } .lg\:select-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; transition: background-color .2s; &:focus, &:focus-within, &:open { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } &::picker(select) { background-color: var(--color-base-100); color: var(--color-base-content) } } } .lg\:select-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-neutral) } } } .lg\:select-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-primary) } } } .lg\:select-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-secondary) } } } .lg\:select-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-accent) } } } .lg\:select-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-info) } } } .lg\:select-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-success) } } } .lg\:select-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-warning) } } } .lg\:select-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-error) } } } .lg\:select-xs { @layer daisyui.l1.l2 { --sl-size-mul: 6; --font-size-min: .6875rem; --option-px: 2; .floating-label:has(&) { --top-mul: 3; --font-size: .6875rem } } } .lg\:select-sm { @layer daisyui.l1.l2 { --sl-size-mul: 8; --font-size-min: .75rem; --option-px: 2.5; .floating-label:has(&) { --top-mul: 4; --font-size: .75rem } } } .lg\:select, .lg\:select-md { @layer daisyui.l1.l2 { --sl-size-mul: 10; --font-size-min: .875rem; --option-px: 3; .floating-label:has(&) { --top-mul: 5; --font-size: .875rem } } } .lg\:select-lg { @layer daisyui.l1.l2 { --sl-size-mul: 12; --font-size-min: 1.125rem; --option-px: 4; .floating-label:has(&) { --top-mul: 6; --font-size: 1.125rem } } } .lg\:select-xl { @layer daisyui.l1.l2 { --sl-size-mul: 14; --font-size-min: 1.375rem; --option-px: 5; .floating-label:has(&) { --top-mul: 7; --font-size: 1.375rem } } } } @media (width>=1280px) { .xl\:select { @layer daisyui.l1.l2.l3 { appearance: none; background-color: var(--color-base-100); vertical-align: middle; --size: calc(var(--size-field, .25rem) * var(--sl-size-mul)); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); width: clamp(3rem, 20rem, 100%); height: var(--size); font-size: max(var(--font-size, 0rem), var(--font-size-min)); touch-action: manipulation; white-space: nowrap; text-overflow: ellipsis; border: var(--border) solid var(--input-color, #0000); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%); background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%); background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-shrink: 1; align-items: center; gap: .375rem; padding-inline: .75rem 1.75rem; display: inline-flex; position: relative; overflow: hidden; [dir=rtl] & { background-position: 12px calc(1px + 50%), 16px calc(1px + 50%) } &[multiple] { background-image: none; height: auto; padding-block: .75rem; padding-inline-end: .75rem; overflow: auto } & select { appearance: none; width: calc(100% + 2.75rem); height: calc(100% - calc(var(--border) * 2)); background: inherit; border-radius: inherit; border-style: none; align-items: center; margin-inline: -.75rem -1.75rem; padding-inline: .75rem 1.75rem; &::placeholder { color: var(--color-base-content); opacity: .5 } &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:not(:last-child) { background-image: none; margin-inline-end: -1.375rem } } &:focus, &:focus-within, &:open { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate; background-image: linear-gradient(135deg, #0000 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, #0000 50%) } &:has(>select[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); &:is(select), & :is(select) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent) } box-shadow:none; &::placeholder, & ::placeholder { color: var(--color-base-content); opacity: .2 } } &:has(>select[disabled])>select[disabled] { cursor: not-allowed } &, & select { @supports (appearance:base-select) { &, &::picker(select) { appearance: base-select } } &::picker(select) { color: inherit; border: var(--border) solid var(--color-base-200); border-radius: var(--radius-box); background-color: inherit; max-height: min(24rem, 70dvh); box-shadow: 0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0/.2); box-shadow: 0 20px 25px -5px rgb(0 0 0/calc(var(--depth) * .1)), 0 8px 10px -6px rgb(0 0 0/calc(var(--depth) * .1)); margin-block: .5rem; margin-inline: .5rem; padding: .5rem; translate: -.5rem } &::picker-icon { display: none } & selectedcontent { text-overflow: ellipsis; white-space: nowrap; width: 100%; overflow: hidden } & optgroup { padding-top: .5em; & option { &:first-child { margin-top: .5em } } } & option { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: calc(.25rem * var(--option-px)); white-space: normal; transition-property: color, background-color; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); &:not(:disabled) { &:hover, &:focus-visible { cursor: pointer; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:active { background-color: var(--color-neutral); color: var(--color-neutral-content); box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral) } } } } [dir=rtl] & { &::picker(select), & select::picker(select) { translate: .5rem } } } } .xl\:select-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; transition: background-color .2s; &:focus, &:focus-within, &:open { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } &::picker(select) { background-color: var(--color-base-100); color: var(--color-base-content) } } } .xl\:select-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-neutral) } } } .xl\:select-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-primary) } } } .xl\:select-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-secondary) } } } .xl\:select-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-accent) } } } .xl\:select-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-info) } } } .xl\:select-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-success) } } } .xl\:select-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-warning) } } } .xl\:select-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-error) } } } .xl\:select-xs { @layer daisyui.l1.l2 { --sl-size-mul: 6; --font-size-min: .6875rem; --option-px: 2; .floating-label:has(&) { --top-mul: 3; --font-size: .6875rem } } } .xl\:select-sm { @layer daisyui.l1.l2 { --sl-size-mul: 8; --font-size-min: .75rem; --option-px: 2.5; .floating-label:has(&) { --top-mul: 4; --font-size: .75rem } } } .xl\:select, .xl\:select-md { @layer daisyui.l1.l2 { --sl-size-mul: 10; --font-size-min: .875rem; --option-px: 3; .floating-label:has(&) { --top-mul: 5; --font-size: .875rem } } } .xl\:select-lg { @layer daisyui.l1.l2 { --sl-size-mul: 12; --font-size-min: 1.125rem; --option-px: 4; .floating-label:has(&) { --top-mul: 6; --font-size: 1.125rem } } } .xl\:select-xl { @layer daisyui.l1.l2 { --sl-size-mul: 14; --font-size-min: 1.375rem; --option-px: 5; .floating-label:has(&) { --top-mul: 7; --font-size: 1.375rem } } } } @media (width>=1536px) { .\32 xl\:select { @layer daisyui.l1.l2.l3 { appearance: none; background-color: var(--color-base-100); vertical-align: middle; --size: calc(var(--size-field, .25rem) * var(--sl-size-mul)); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); width: clamp(3rem, 20rem, 100%); height: var(--size); font-size: max(var(--font-size, 0rem), var(--font-size-min)); touch-action: manipulation; white-space: nowrap; text-overflow: ellipsis; border: var(--border) solid var(--input-color, #0000); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%); background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%); background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-shrink: 1; align-items: center; gap: .375rem; padding-inline: .75rem 1.75rem; display: inline-flex; position: relative; overflow: hidden; [dir=rtl] & { background-position: 12px calc(1px + 50%), 16px calc(1px + 50%) } &[multiple] { background-image: none; height: auto; padding-block: .75rem; padding-inline-end: .75rem; overflow: auto } & select { appearance: none; width: calc(100% + 2.75rem); height: calc(100% - calc(var(--border) * 2)); background: inherit; border-radius: inherit; border-style: none; align-items: center; margin-inline: -.75rem -1.75rem; padding-inline: .75rem 1.75rem; &::placeholder { color: var(--color-base-content); opacity: .5 } &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:not(:last-child) { background-image: none; margin-inline-end: -1.375rem } } &:focus, &:focus-within, &:open { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate; background-image: linear-gradient(135deg, #0000 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, #0000 50%) } &:has(>select[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); &:is(select), & :is(select) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent) } box-shadow:none; &::placeholder, & ::placeholder { color: var(--color-base-content); opacity: .2 } } &:has(>select[disabled])>select[disabled] { cursor: not-allowed } &, & select { @supports (appearance:base-select) { &, &::picker(select) { appearance: base-select } } &::picker(select) { color: inherit; border: var(--border) solid var(--color-base-200); border-radius: var(--radius-box); background-color: inherit; max-height: min(24rem, 70dvh); box-shadow: 0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0/.2); box-shadow: 0 20px 25px -5px rgb(0 0 0/calc(var(--depth) * .1)), 0 8px 10px -6px rgb(0 0 0/calc(var(--depth) * .1)); margin-block: .5rem; margin-inline: .5rem; padding: .5rem; translate: -.5rem } &::picker-icon { display: none } & selectedcontent { text-overflow: ellipsis; white-space: nowrap; width: 100%; overflow: hidden } & optgroup { padding-top: .5em; & option { &:first-child { margin-top: .5em } } } & option { border-radius: var(--radius-field); padding-block: .375rem; padding-inline: calc(.25rem * var(--option-px)); white-space: normal; transition-property: color, background-color; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); &:not(:disabled) { &:hover, &:focus-visible { cursor: pointer; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:active { background-color: var(--color-neutral); color: var(--color-neutral-content); box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral) } } } } [dir=rtl] & { &::picker(select), & select::picker(select) { translate: .5rem } } } } .\32 xl\:select-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; transition: background-color .2s; &:focus, &:focus-within, &:open { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } &::picker(select) { background-color: var(--color-base-100); color: var(--color-base-content) } } } .\32 xl\:select-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-neutral) } } } .\32 xl\:select-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-primary) } } } .\32 xl\:select-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-secondary) } } } .\32 xl\:select-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-accent) } } } .\32 xl\:select-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-info) } } } .\32 xl\:select-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-success) } } } .\32 xl\:select-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-warning) } } } .\32 xl\:select-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within, &:open { --input-color: var(--color-error) } } } .\32 xl\:select-xs { @layer daisyui.l1.l2 { --sl-size-mul: 6; --font-size-min: .6875rem; --option-px: 2; .floating-label:has(&) { --top-mul: 3; --font-size: .6875rem } } } .\32 xl\:select-sm { @layer daisyui.l1.l2 { --sl-size-mul: 8; --font-size-min: .75rem; --option-px: 2.5; .floating-label:has(&) { --top-mul: 4; --font-size: .75rem } } } .\32 xl\:select, .\32 xl\:select-md { @layer daisyui.l1.l2 { --sl-size-mul: 10; --font-size-min: .875rem; --option-px: 3; .floating-label:has(&) { --top-mul: 5; --font-size: .875rem } } } .\32 xl\:select-lg { @layer daisyui.l1.l2 { --sl-size-mul: 12; --font-size-min: 1.125rem; --option-px: 4; .floating-label:has(&) { --top-mul: 6; --font-size: 1.125rem } } } .\32 xl\:select-xl { @layer daisyui.l1.l2 { --sl-size-mul: 14; --font-size-min: 1.375rem; --option-px: 5; .floating-label:has(&) { --top-mul: 7; --font-size: 1.375rem } } } } .dropdown { @layer daisyui.l1.l2.l3 { position-area: var(--anchor-v, bottom) var(--anchor-h, span-right); display: inline-block; position: relative; &>:not(:has(~[class*=dropdown-content])):focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } & .dropdown-content { position: absolute } &.dropdown-close .dropdown-content, &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content, &.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible)~.dropdown-content { transform-origin: top; opacity: 0; display: none; scale: .95 } &[popover], & .dropdown-content { z-index: 999; @media (prefers-reduced-motion:no-preference) { transition-behavior: allow-discrete; transition-property: opacity, scale, display, overlay; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); animation: .2s dropdown } } @starting-style { &[popover], & .dropdown-content { opacity: 0; scale: .95 } } &:not(.dropdown-close) { &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within { &>[tabindex]:first-child { pointer-events: none } & .dropdown-content { opacity: 1; scale: 1 } } &.dropdown-hover:hover { & .dropdown-content { opacity: 1; scale: 1 } } } &:is(details) { overflow: revert-layer; & summary { &::-webkit-details-marker { display: none } } } &:where([popover]) { background: 0 0 } &[popover] { color: inherit; position: fixed; @supports not (position-area:bottom) { margin: auto; &.dropdown-close, &.dropdown-open:not(:popover-open) { transform-origin: top; opacity: 0; display: none; scale: .95 } &::backdrop { background-color: oklab(0% none none/.3) } } &.dropdown-close, &:not(.dropdown-open, :popover-open) { transform-origin: top; opacity: 0; display: none; scale: .95 } } } } .dropdown-start { @layer daisyui.l1.l2 { --anchor-h: span-right; & :where(.dropdown-content) { inset-inline-end: auto; translate: 0; [dir=rtl] & { translate: 0 } } &.dropdown-left { --anchor-h: left; --anchor-v: span-bottom; & .dropdown-content { top: 0; bottom: auto } } &.dropdown-right { --anchor-h: right; --anchor-v: span-bottom; & .dropdown-content { top: 0; bottom: auto } } } } .dropdown-center { @layer daisyui.l1.l2 { --anchor-h: center; & :where(.dropdown-content) { inset-inline-end: 50%; translate: 50%; [dir=rtl] & { translate: -50% } } &.dropdown-left { --anchor-h: left; --anchor-v: center; & .dropdown-content { top: auto; bottom: 50%; translate: 0 50% } } &.dropdown-right { --anchor-h: right; --anchor-v: center; & .dropdown-content { top: auto; bottom: 50%; translate: 0 50% } } } } .dropdown-end { @layer daisyui.l1.l2 { --anchor-h: span-left; & :where(.dropdown-content) { inset-inline-end: 0; translate: 0; [dir=rtl] & { translate: 0 } } &.dropdown-left { --anchor-h: left; --anchor-v: span-top; & .dropdown-content { top: auto; bottom: 0 } } &.dropdown-right { --anchor-h: right; --anchor-v: span-top; & .dropdown-content { top: auto; bottom: 0 } } } } .dropdown-left { @layer daisyui.l1.l2 { --anchor-h: left; --anchor-v: span-bottom; & .dropdown-content { inset-inline-end: 100%; transform-origin: 100%; top: 0; bottom: auto } } } .dropdown-right { @layer daisyui.l1.l2 { --anchor-h: right; --anchor-v: span-bottom; & .dropdown-content { inset-inline-start: 100%; transform-origin: 0; top: 0; bottom: auto } } } .dropdown-bottom { @layer daisyui.l1.l2 { --anchor-v: bottom; & .dropdown-content { transform-origin: top; top: 100%; bottom: auto } } } .dropdown-top { @layer daisyui.l1.l2 { --anchor-v: top; & .dropdown-content { transform-origin: bottom; top: auto; bottom: 100% } } } @media (width>=640px) { .sm\:dropdown { @layer daisyui.l1.l2.l3 { position-area: var(--anchor-v, bottom) var(--anchor-h, span-right); display: inline-block; position: relative; &>:not(:has(~[class*=dropdown-content])):focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } & .dropdown-content { position: absolute } &.dropdown-close .dropdown-content, &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content, &.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible)~.dropdown-content { transform-origin: top; opacity: 0; display: none; scale: .95 } &[popover], & .dropdown-content { z-index: 999; @media (prefers-reduced-motion:no-preference) { transition-behavior: allow-discrete; transition-property: opacity, scale, display, overlay; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); animation: .2s dropdown } } @starting-style { &[popover], & .dropdown-content { opacity: 0; scale: .95 } } &:not(.dropdown-close) { &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within { &>[tabindex]:first-child { pointer-events: none } & .dropdown-content { opacity: 1; scale: 1 } } &.dropdown-hover:hover { & .dropdown-content { opacity: 1; scale: 1 } } } &:is(details) { overflow: revert-layer; & summary { &::-webkit-details-marker { display: none } } } &:where([popover]) { background: 0 0 } &[popover] { color: inherit; position: fixed; @supports not (position-area:bottom) { margin: auto; &.dropdown-close, &.dropdown-open:not(:popover-open) { transform-origin: top; opacity: 0; display: none; scale: .95 } &::backdrop { background-color: oklab(0% none none/.3) } } &.dropdown-close, &:not(.dropdown-open, :popover-open) { transform-origin: top; opacity: 0; display: none; scale: .95 } } } } .sm\:dropdown-start { @layer daisyui.l1.l2 { --anchor-h: span-right; & :where(.dropdown-content) { inset-inline-end: auto; translate: 0; [dir=rtl] & { translate: 0 } } &.dropdown-left { --anchor-h: left; --anchor-v: span-bottom; & .dropdown-content { top: 0; bottom: auto } } &.dropdown-right { --anchor-h: right; --anchor-v: span-bottom; & .dropdown-content { top: 0; bottom: auto } } } } .sm\:dropdown-center { @layer daisyui.l1.l2 { --anchor-h: center; & :where(.dropdown-content) { inset-inline-end: 50%; translate: 50%; [dir=rtl] & { translate: -50% } } &.dropdown-left { --anchor-h: left; --anchor-v: center; & .dropdown-content { top: auto; bottom: 50%; translate: 0 50% } } &.dropdown-right { --anchor-h: right; --anchor-v: center; & .dropdown-content { top: auto; bottom: 50%; translate: 0 50% } } } } .sm\:dropdown-end { @layer daisyui.l1.l2 { --anchor-h: span-left; & :where(.dropdown-content) { inset-inline-end: 0; translate: 0; [dir=rtl] & { translate: 0 } } &.dropdown-left { --anchor-h: left; --anchor-v: span-top; & .dropdown-content { top: auto; bottom: 0 } } &.dropdown-right { --anchor-h: right; --anchor-v: span-top; & .dropdown-content { top: auto; bottom: 0 } } } } .sm\:dropdown-left { @layer daisyui.l1.l2 { --anchor-h: left; --anchor-v: span-bottom; & .dropdown-content { inset-inline-end: 100%; transform-origin: 100%; top: 0; bottom: auto } } } .sm\:dropdown-right { @layer daisyui.l1.l2 { --anchor-h: right; --anchor-v: span-bottom; & .dropdown-content { inset-inline-start: 100%; transform-origin: 0; top: 0; bottom: auto } } } .sm\:dropdown-bottom { @layer daisyui.l1.l2 { --anchor-v: bottom; & .dropdown-content { transform-origin: top; top: 100%; bottom: auto } } } .sm\:dropdown-top { @layer daisyui.l1.l2 { --anchor-v: top; & .dropdown-content { transform-origin: bottom; top: auto; bottom: 100% } } } } @media (width>=768px) { .md\:dropdown { @layer daisyui.l1.l2.l3 { position-area: var(--anchor-v, bottom) var(--anchor-h, span-right); display: inline-block; position: relative; &>:not(:has(~[class*=dropdown-content])):focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } & .dropdown-content { position: absolute } &.dropdown-close .dropdown-content, &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content, &.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible)~.dropdown-content { transform-origin: top; opacity: 0; display: none; scale: .95 } &[popover], & .dropdown-content { z-index: 999; @media (prefers-reduced-motion:no-preference) { transition-behavior: allow-discrete; transition-property: opacity, scale, display, overlay; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); animation: .2s dropdown } } @starting-style { &[popover], & .dropdown-content { opacity: 0; scale: .95 } } &:not(.dropdown-close) { &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within { &>[tabindex]:first-child { pointer-events: none } & .dropdown-content { opacity: 1; scale: 1 } } &.dropdown-hover:hover { & .dropdown-content { opacity: 1; scale: 1 } } } &:is(details) { overflow: revert-layer; & summary { &::-webkit-details-marker { display: none } } } &:where([popover]) { background: 0 0 } &[popover] { color: inherit; position: fixed; @supports not (position-area:bottom) { margin: auto; &.dropdown-close, &.dropdown-open:not(:popover-open) { transform-origin: top; opacity: 0; display: none; scale: .95 } &::backdrop { background-color: oklab(0% none none/.3) } } &.dropdown-close, &:not(.dropdown-open, :popover-open) { transform-origin: top; opacity: 0; display: none; scale: .95 } } } } .md\:dropdown-start { @layer daisyui.l1.l2 { --anchor-h: span-right; & :where(.dropdown-content) { inset-inline-end: auto; translate: 0; [dir=rtl] & { translate: 0 } } &.dropdown-left { --anchor-h: left; --anchor-v: span-bottom; & .dropdown-content { top: 0; bottom: auto } } &.dropdown-right { --anchor-h: right; --anchor-v: span-bottom; & .dropdown-content { top: 0; bottom: auto } } } } .md\:dropdown-center { @layer daisyui.l1.l2 { --anchor-h: center; & :where(.dropdown-content) { inset-inline-end: 50%; translate: 50%; [dir=rtl] & { translate: -50% } } &.dropdown-left { --anchor-h: left; --anchor-v: center; & .dropdown-content { top: auto; bottom: 50%; translate: 0 50% } } &.dropdown-right { --anchor-h: right; --anchor-v: center; & .dropdown-content { top: auto; bottom: 50%; translate: 0 50% } } } } .md\:dropdown-end { @layer daisyui.l1.l2 { --anchor-h: span-left; & :where(.dropdown-content) { inset-inline-end: 0; translate: 0; [dir=rtl] & { translate: 0 } } &.dropdown-left { --anchor-h: left; --anchor-v: span-top; & .dropdown-content { top: auto; bottom: 0 } } &.dropdown-right { --anchor-h: right; --anchor-v: span-top; & .dropdown-content { top: auto; bottom: 0 } } } } .md\:dropdown-left { @layer daisyui.l1.l2 { --anchor-h: left; --anchor-v: span-bottom; & .dropdown-content { inset-inline-end: 100%; transform-origin: 100%; top: 0; bottom: auto } } } .md\:dropdown-right { @layer daisyui.l1.l2 { --anchor-h: right; --anchor-v: span-bottom; & .dropdown-content { inset-inline-start: 100%; transform-origin: 0; top: 0; bottom: auto } } } .md\:dropdown-bottom { @layer daisyui.l1.l2 { --anchor-v: bottom; & .dropdown-content { transform-origin: top; top: 100%; bottom: auto } } } .md\:dropdown-top { @layer daisyui.l1.l2 { --anchor-v: top; & .dropdown-content { transform-origin: bottom; top: auto; bottom: 100% } } } } @media (width>=1024px) { .lg\:dropdown { @layer daisyui.l1.l2.l3 { position-area: var(--anchor-v, bottom) var(--anchor-h, span-right); display: inline-block; position: relative; &>:not(:has(~[class*=dropdown-content])):focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } & .dropdown-content { position: absolute } &.dropdown-close .dropdown-content, &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content, &.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible)~.dropdown-content { transform-origin: top; opacity: 0; display: none; scale: .95 } &[popover], & .dropdown-content { z-index: 999; @media (prefers-reduced-motion:no-preference) { transition-behavior: allow-discrete; transition-property: opacity, scale, display, overlay; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); animation: .2s dropdown } } @starting-style { &[popover], & .dropdown-content { opacity: 0; scale: .95 } } &:not(.dropdown-close) { &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within { &>[tabindex]:first-child { pointer-events: none } & .dropdown-content { opacity: 1; scale: 1 } } &.dropdown-hover:hover { & .dropdown-content { opacity: 1; scale: 1 } } } &:is(details) { overflow: revert-layer; & summary { &::-webkit-details-marker { display: none } } } &:where([popover]) { background: 0 0 } &[popover] { color: inherit; position: fixed; @supports not (position-area:bottom) { margin: auto; &.dropdown-close, &.dropdown-open:not(:popover-open) { transform-origin: top; opacity: 0; display: none; scale: .95 } &::backdrop { background-color: oklab(0% none none/.3) } } &.dropdown-close, &:not(.dropdown-open, :popover-open) { transform-origin: top; opacity: 0; display: none; scale: .95 } } } } .lg\:dropdown-start { @layer daisyui.l1.l2 { --anchor-h: span-right; & :where(.dropdown-content) { inset-inline-end: auto; translate: 0; [dir=rtl] & { translate: 0 } } &.dropdown-left { --anchor-h: left; --anchor-v: span-bottom; & .dropdown-content { top: 0; bottom: auto } } &.dropdown-right { --anchor-h: right; --anchor-v: span-bottom; & .dropdown-content { top: 0; bottom: auto } } } } .lg\:dropdown-center { @layer daisyui.l1.l2 { --anchor-h: center; & :where(.dropdown-content) { inset-inline-end: 50%; translate: 50%; [dir=rtl] & { translate: -50% } } &.dropdown-left { --anchor-h: left; --anchor-v: center; & .dropdown-content { top: auto; bottom: 50%; translate: 0 50% } } &.dropdown-right { --anchor-h: right; --anchor-v: center; & .dropdown-content { top: auto; bottom: 50%; translate: 0 50% } } } } .lg\:dropdown-end { @layer daisyui.l1.l2 { --anchor-h: span-left; & :where(.dropdown-content) { inset-inline-end: 0; translate: 0; [dir=rtl] & { translate: 0 } } &.dropdown-left { --anchor-h: left; --anchor-v: span-top; & .dropdown-content { top: auto; bottom: 0 } } &.dropdown-right { --anchor-h: right; --anchor-v: span-top; & .dropdown-content { top: auto; bottom: 0 } } } } .lg\:dropdown-left { @layer daisyui.l1.l2 { --anchor-h: left; --anchor-v: span-bottom; & .dropdown-content { inset-inline-end: 100%; transform-origin: 100%; top: 0; bottom: auto } } } .lg\:dropdown-right { @layer daisyui.l1.l2 { --anchor-h: right; --anchor-v: span-bottom; & .dropdown-content { inset-inline-start: 100%; transform-origin: 0; top: 0; bottom: auto } } } .lg\:dropdown-bottom { @layer daisyui.l1.l2 { --anchor-v: bottom; & .dropdown-content { transform-origin: top; top: 100%; bottom: auto } } } .lg\:dropdown-top { @layer daisyui.l1.l2 { --anchor-v: top; & .dropdown-content { transform-origin: bottom; top: auto; bottom: 100% } } } } @media (width>=1280px) { .xl\:dropdown { @layer daisyui.l1.l2.l3 { position-area: var(--anchor-v, bottom) var(--anchor-h, span-right); display: inline-block; position: relative; &>:not(:has(~[class*=dropdown-content])):focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } & .dropdown-content { position: absolute } &.dropdown-close .dropdown-content, &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content, &.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible)~.dropdown-content { transform-origin: top; opacity: 0; display: none; scale: .95 } &[popover], & .dropdown-content { z-index: 999; @media (prefers-reduced-motion:no-preference) { transition-behavior: allow-discrete; transition-property: opacity, scale, display, overlay; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); animation: .2s dropdown } } @starting-style { &[popover], & .dropdown-content { opacity: 0; scale: .95 } } &:not(.dropdown-close) { &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within { &>[tabindex]:first-child { pointer-events: none } & .dropdown-content { opacity: 1; scale: 1 } } &.dropdown-hover:hover { & .dropdown-content { opacity: 1; scale: 1 } } } &:is(details) { overflow: revert-layer; & summary { &::-webkit-details-marker { display: none } } } &:where([popover]) { background: 0 0 } &[popover] { color: inherit; position: fixed; @supports not (position-area:bottom) { margin: auto; &.dropdown-close, &.dropdown-open:not(:popover-open) { transform-origin: top; opacity: 0; display: none; scale: .95 } &::backdrop { background-color: oklab(0% none none/.3) } } &.dropdown-close, &:not(.dropdown-open, :popover-open) { transform-origin: top; opacity: 0; display: none; scale: .95 } } } } .xl\:dropdown-start { @layer daisyui.l1.l2 { --anchor-h: span-right; & :where(.dropdown-content) { inset-inline-end: auto; translate: 0; [dir=rtl] & { translate: 0 } } &.dropdown-left { --anchor-h: left; --anchor-v: span-bottom; & .dropdown-content { top: 0; bottom: auto } } &.dropdown-right { --anchor-h: right; --anchor-v: span-bottom; & .dropdown-content { top: 0; bottom: auto } } } } .xl\:dropdown-center { @layer daisyui.l1.l2 { --anchor-h: center; & :where(.dropdown-content) { inset-inline-end: 50%; translate: 50%; [dir=rtl] & { translate: -50% } } &.dropdown-left { --anchor-h: left; --anchor-v: center; & .dropdown-content { top: auto; bottom: 50%; translate: 0 50% } } &.dropdown-right { --anchor-h: right; --anchor-v: center; & .dropdown-content { top: auto; bottom: 50%; translate: 0 50% } } } } .xl\:dropdown-end { @layer daisyui.l1.l2 { --anchor-h: span-left; & :where(.dropdown-content) { inset-inline-end: 0; translate: 0; [dir=rtl] & { translate: 0 } } &.dropdown-left { --anchor-h: left; --anchor-v: span-top; & .dropdown-content { top: auto; bottom: 0 } } &.dropdown-right { --anchor-h: right; --anchor-v: span-top; & .dropdown-content { top: auto; bottom: 0 } } } } .xl\:dropdown-left { @layer daisyui.l1.l2 { --anchor-h: left; --anchor-v: span-bottom; & .dropdown-content { inset-inline-end: 100%; transform-origin: 100%; top: 0; bottom: auto } } } .xl\:dropdown-right { @layer daisyui.l1.l2 { --anchor-h: right; --anchor-v: span-bottom; & .dropdown-content { inset-inline-start: 100%; transform-origin: 0; top: 0; bottom: auto } } } .xl\:dropdown-bottom { @layer daisyui.l1.l2 { --anchor-v: bottom; & .dropdown-content { transform-origin: top; top: 100%; bottom: auto } } } .xl\:dropdown-top { @layer daisyui.l1.l2 { --anchor-v: top; & .dropdown-content { transform-origin: bottom; top: auto; bottom: 100% } } } } @media (width>=1536px) { .\32 xl\:dropdown { @layer daisyui.l1.l2.l3 { position-area: var(--anchor-v, bottom) var(--anchor-h, span-right); display: inline-block; position: relative; &>:not(:has(~[class*=dropdown-content])):focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } & .dropdown-content { position: absolute } &.dropdown-close .dropdown-content, &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content, &.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible)~.dropdown-content { transform-origin: top; opacity: 0; display: none; scale: .95 } &[popover], & .dropdown-content { z-index: 999; @media (prefers-reduced-motion:no-preference) { transition-behavior: allow-discrete; transition-property: opacity, scale, display, overlay; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); animation: .2s dropdown } } @starting-style { &[popover], & .dropdown-content { opacity: 0; scale: .95 } } &:not(.dropdown-close) { &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within { &>[tabindex]:first-child { pointer-events: none } & .dropdown-content { opacity: 1; scale: 1 } } &.dropdown-hover:hover { & .dropdown-content { opacity: 1; scale: 1 } } } &:is(details) { overflow: revert-layer; & summary { &::-webkit-details-marker { display: none } } } &:where([popover]) { background: 0 0 } &[popover] { color: inherit; position: fixed; @supports not (position-area:bottom) { margin: auto; &.dropdown-close, &.dropdown-open:not(:popover-open) { transform-origin: top; opacity: 0; display: none; scale: .95 } &::backdrop { background-color: oklab(0% none none/.3) } } &.dropdown-close, &:not(.dropdown-open, :popover-open) { transform-origin: top; opacity: 0; display: none; scale: .95 } } } } .\32 xl\:dropdown-start { @layer daisyui.l1.l2 { --anchor-h: span-right; & :where(.dropdown-content) { inset-inline-end: auto; translate: 0; [dir=rtl] & { translate: 0 } } &.dropdown-left { --anchor-h: left; --anchor-v: span-bottom; & .dropdown-content { top: 0; bottom: auto } } &.dropdown-right { --anchor-h: right; --anchor-v: span-bottom; & .dropdown-content { top: 0; bottom: auto } } } } .\32 xl\:dropdown-center { @layer daisyui.l1.l2 { --anchor-h: center; & :where(.dropdown-content) { inset-inline-end: 50%; translate: 50%; [dir=rtl] & { translate: -50% } } &.dropdown-left { --anchor-h: left; --anchor-v: center; & .dropdown-content { top: auto; bottom: 50%; translate: 0 50% } } &.dropdown-right { --anchor-h: right; --anchor-v: center; & .dropdown-content { top: auto; bottom: 50%; translate: 0 50% } } } } .\32 xl\:dropdown-end { @layer daisyui.l1.l2 { --anchor-h: span-left; & :where(.dropdown-content) { inset-inline-end: 0; translate: 0; [dir=rtl] & { translate: 0 } } &.dropdown-left { --anchor-h: left; --anchor-v: span-top; & .dropdown-content { top: auto; bottom: 0 } } &.dropdown-right { --anchor-h: right; --anchor-v: span-top; & .dropdown-content { top: auto; bottom: 0 } } } } .\32 xl\:dropdown-left { @layer daisyui.l1.l2 { --anchor-h: left; --anchor-v: span-bottom; & .dropdown-content { inset-inline-end: 100%; transform-origin: 100%; top: 0; bottom: auto } } } .\32 xl\:dropdown-right { @layer daisyui.l1.l2 { --anchor-h: right; --anchor-v: span-bottom; & .dropdown-content { inset-inline-start: 100%; transform-origin: 0; top: 0; bottom: auto } } } .\32 xl\:dropdown-bottom { @layer daisyui.l1.l2 { --anchor-v: bottom; & .dropdown-content { transform-origin: top; top: 100%; bottom: auto } } } .\32 xl\:dropdown-top { @layer daisyui.l1.l2 { --anchor-v: top; & .dropdown-content { transform-origin: bottom; top: auto; bottom: 100% } } } } @keyframes dropdown { 0% { opacity: 0 } } .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) } } } } .avatar-group { @layer daisyui.l1.l2.l3 { display: flex; overflow: hidden; & .avatar { border: 4px solid var(--color-base-100); border-radius: 3.40282e38px; overflow: hidden } } } .avatar { @layer daisyui.l1.l2.l3 { vertical-align: middle; display: inline-flex; position: relative; &>div { aspect-ratio: 1; display: block; overflow: hidden } & img { object-fit: cover; width: 100%; height: 100% } } } .avatar-placeholder { @layer daisyui.l1.l2 { &>div { justify-content: center; align-items: center; display: flex } } } .avatar-online { @layer daisyui.l1.l2 { &:before { content: ""; z-index: 1; background-color: var(--color-success); outline: 2px solid var(--color-base-100); border-radius: 3.40282e38px; width: 15%; height: 15%; display: block; position: absolute; top: 7%; right: 7% } } } .avatar-offline { @layer daisyui.l1.l2 { &:before { content: ""; z-index: 1; background-color: var(--color-base-300); outline: 2px solid var(--color-base-100); border-radius: 3.40282e38px; width: 15%; height: 15%; display: block; position: absolute; top: 7%; right: 7% } } } @media (width>=640px) { .sm\:avatar-group { @layer daisyui.l1.l2.l3 { display: flex; overflow: hidden; & .avatar { border: 4px solid var(--color-base-100); border-radius: 3.40282e38px; overflow: hidden } } } .sm\:avatar { @layer daisyui.l1.l2.l3 { vertical-align: middle; display: inline-flex; position: relative; &>div { aspect-ratio: 1; display: block; overflow: hidden } & img { object-fit: cover; width: 100%; height: 100% } } } .sm\:avatar-placeholder { @layer daisyui.l1.l2 { &>div { justify-content: center; align-items: center; display: flex } } } .sm\:avatar-online { @layer daisyui.l1.l2 { &:before { content: ""; z-index: 1; background-color: var(--color-success); outline: 2px solid var(--color-base-100); border-radius: 3.40282e38px; width: 15%; height: 15%; display: block; position: absolute; top: 7%; right: 7% } } } .sm\:avatar-offline { @layer daisyui.l1.l2 { &:before { content: ""; z-index: 1; background-color: var(--color-base-300); outline: 2px solid var(--color-base-100); border-radius: 3.40282e38px; width: 15%; height: 15%; display: block; position: absolute; top: 7%; right: 7% } } } } @media (width>=768px) { .md\:avatar-group { @layer daisyui.l1.l2.l3 { display: flex; overflow: hidden; & .avatar { border: 4px solid var(--color-base-100); border-radius: 3.40282e38px; overflow: hidden } } } .md\:avatar { @layer daisyui.l1.l2.l3 { vertical-align: middle; display: inline-flex; position: relative; &>div { aspect-ratio: 1; display: block; overflow: hidden } & img { object-fit: cover; width: 100%; height: 100% } } } .md\:avatar-placeholder { @layer daisyui.l1.l2 { &>div { justify-content: center; align-items: center; display: flex } } } .md\:avatar-online { @layer daisyui.l1.l2 { &:before { content: ""; z-index: 1; background-color: var(--color-success); outline: 2px solid var(--color-base-100); border-radius: 3.40282e38px; width: 15%; height: 15%; display: block; position: absolute; top: 7%; right: 7% } } } .md\:avatar-offline { @layer daisyui.l1.l2 { &:before { content: ""; z-index: 1; background-color: var(--color-base-300); outline: 2px solid var(--color-base-100); border-radius: 3.40282e38px; width: 15%; height: 15%; display: block; position: absolute; top: 7%; right: 7% } } } } @media (width>=1024px) { .lg\:avatar-group { @layer daisyui.l1.l2.l3 { display: flex; overflow: hidden; & .avatar { border: 4px solid var(--color-base-100); border-radius: 3.40282e38px; overflow: hidden } } } .lg\:avatar { @layer daisyui.l1.l2.l3 { vertical-align: middle; display: inline-flex; position: relative; &>div { aspect-ratio: 1; display: block; overflow: hidden } & img { object-fit: cover; width: 100%; height: 100% } } } .lg\:avatar-placeholder { @layer daisyui.l1.l2 { &>div { justify-content: center; align-items: center; display: flex } } } .lg\:avatar-online { @layer daisyui.l1.l2 { &:before { content: ""; z-index: 1; background-color: var(--color-success); outline: 2px solid var(--color-base-100); border-radius: 3.40282e38px; width: 15%; height: 15%; display: block; position: absolute; top: 7%; right: 7% } } } .lg\:avatar-offline { @layer daisyui.l1.l2 { &:before { content: ""; z-index: 1; background-color: var(--color-base-300); outline: 2px solid var(--color-base-100); border-radius: 3.40282e38px; width: 15%; height: 15%; display: block; position: absolute; top: 7%; right: 7% } } } } @media (width>=1280px) { .xl\:avatar-group { @layer daisyui.l1.l2.l3 { display: flex; overflow: hidden; & .avatar { border: 4px solid var(--color-base-100); border-radius: 3.40282e38px; overflow: hidden } } } .xl\:avatar { @layer daisyui.l1.l2.l3 { vertical-align: middle; display: inline-flex; position: relative; &>div { aspect-ratio: 1; display: block; overflow: hidden } & img { object-fit: cover; width: 100%; height: 100% } } } .xl\:avatar-placeholder { @layer daisyui.l1.l2 { &>div { justify-content: center; align-items: center; display: flex } } } .xl\:avatar-online { @layer daisyui.l1.l2 { &:before { content: ""; z-index: 1; background-color: var(--color-success); outline: 2px solid var(--color-base-100); border-radius: 3.40282e38px; width: 15%; height: 15%; display: block; position: absolute; top: 7%; right: 7% } } } .xl\:avatar-offline { @layer daisyui.l1.l2 { &:before { content: ""; z-index: 1; background-color: var(--color-base-300); outline: 2px solid var(--color-base-100); border-radius: 3.40282e38px; width: 15%; height: 15%; display: block; position: absolute; top: 7%; right: 7% } } } } @media (width>=1536px) { .\32 xl\:avatar-group { @layer daisyui.l1.l2.l3 { display: flex; overflow: hidden; & .avatar { border: 4px solid var(--color-base-100); border-radius: 3.40282e38px; overflow: hidden } } } .\32 xl\:avatar { @layer daisyui.l1.l2.l3 { vertical-align: middle; display: inline-flex; position: relative; &>div { aspect-ratio: 1; display: block; overflow: hidden } & img { object-fit: cover; width: 100%; height: 100% } } } .\32 xl\:avatar-placeholder { @layer daisyui.l1.l2 { &>div { justify-content: center; align-items: center; display: flex } } } .\32 xl\:avatar-online { @layer daisyui.l1.l2 { &:before { content: ""; z-index: 1; background-color: var(--color-success); outline: 2px solid var(--color-base-100); border-radius: 3.40282e38px; width: 15%; height: 15%; display: block; position: absolute; top: 7%; right: 7% } } } .\32 xl\:avatar-offline { @layer daisyui.l1.l2 { &:before { content: ""; z-index: 1; background-color: var(--color-base-300); outline: 2px solid var(--color-base-100); border-radius: 3.40282e38px; width: 15%; height: 15%; display: block; position: absolute; top: 7%; right: 7% } } } } .skeleton { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box); background-color: var(--color-base-300); @media (prefers-reduced-motion:reduce) { transition-duration: 15s } will-change:background-position; background-image:linear-gradient(105deg, #0000 0% 40%, var(--color-base-100) 50%, #0000 60% 100%); background-position-x:-50%; background-size:200%; @media (prefers-reduced-motion:no-preference) { animation: 1.8s ease-in-out infinite skeleton } } } .skeleton-text { @layer daisyui.l1.l2 { color: #0000; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(105deg, color-mix(in oklab, var(--color-base-content) 20%, transparent) 0% 40%, var(--color-base-content) 50%, color-mix(in oklab, var(--color-base-content) 20%, transparent) 60% 100%) } } @keyframes skeleton { 0% { background-position: 150% } to { background-position: -50% } } .collapse:not(td, tr, colgroup) { visibility: revert-layer; @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box, 1rem); isolation: isolate; grid-template-rows: max-content 0fr; grid-template-columns: minmax(0, 1fr); width: 100%; display: grid; position: relative; @media (prefers-reduced-motion:no-preference) { transition: grid-template-rows .2s } &>input:is([type=checkbox], [type=radio]) { appearance: none; opacity: 0; grid-row-start: 1; grid-column-start: 1 } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close)), &:not(.collapse-close):has(>input:is([type=checkbox], [type=radio]):checked) { grid-template-rows: max-content 1fr } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close))>.collapse-content, &:not(.collapse-close)>:where(input:is([type=checkbox], [type=radio]):checked~.collapse-content) { --overflow-delay: .2s; overflow: revert-layer; content-visibility: visible; min-height: fit-content; @supports not (content-visibility:visible) { visibility: visible } } &:focus-visible, &:has(>input:is([type=checkbox], [type=radio]):focus-visible), &:has(summary:focus-visible) { outline-color: var(--color-base-content); outline-offset: 2px; outline-width: 2px; outline-style: solid } &:not(.collapse-close) { &>input[type=checkbox], &>input[type=radio]:not(:checked), &>.collapse-title { cursor: pointer } } &[tabindex]:focus:not(.collapse-close, .collapse[open]), &[tabindex]:focus-within:not(.collapse-close, .collapse[open]) { &>.collapse-title { cursor: unset } } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close))>:where(.collapse-content), &:not(.collapse-close)>:where(input:is([type=checkbox], [type=radio]):checked~.collapse-content) { padding-bottom: 1rem } &>input:is([type=checkbox], [type=radio]) { z-index: 1; padding: 1rem; width: 100%; min-height: 1lh; padding-inline-end: 3rem; transition: background-color .2s ease-out } &:is(details) { width: 100%; &::details-content { --overflow-delay: 0s; height: 0; overflow: clip } &:where([open])::details-content { overflow: revert-layer; height: auto } @media (prefers-reduced-motion:no-preference) { &::details-content { transition: overflow .2s allow-discrete var(--overflow-delay), content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out, height .2s; interpolate-size: allow-keywords } &:where([open])::details-content { --overflow-delay: .2s } } &>summary { outline: none; display: block; position: relative; &::-webkit-details-marker { display: none } } } } @layer daisyui.l1.l2 { &[open] { &.collapse-arrow { &>.collapse-title:after { @media (prefers-reduced-motion:no-preference) { transform: translateY(-50%)rotate(225deg) } } } } &.collapse-open { &.collapse-arrow { &>.collapse-title:after { @media (prefers-reduced-motion:no-preference) { transform: translateY(-50%)rotate(225deg) } } } } &[tabindex].collapse-arrow:focus:not(.collapse-close), &.collapse-arrow[tabindex]:focus-within:not(.collapse-close) { &>.collapse-title:after { transform: translateY(-50%)rotate(225deg) } } &.collapse-arrow:not(.collapse-close) { &>input:is([type=checkbox], [type=radio]):checked~.collapse-title:after { transform: translateY(-50%)rotate(225deg) } } &[open] { &.collapse-plus { &>.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } } &.collapse-open { &.collapse-plus { &>.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } } &[tabindex].collapse-plus:focus:not(.collapse-close) { &>.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } &.collapse-plus:not(.collapse-close) { &>input:is([type=checkbox], [type=radio]):checked~.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } } } .collapse-content { @layer daisyui.l1.l2.l3 { --overflow-delay: 0s; content-visibility: hidden; min-height: 0; cursor: unset; grid-row-start: 2; grid-column-start: 1; padding-left: 1rem; padding-right: 1rem; overflow: clip; @supports not (content-visibility:hidden) { visibility: hidden } @media (prefers-reduced-motion:no-preference) { transition: overflow .2s allow-discrete var(--overflow-delay), content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out } details>& { content-visibility: visible } } } .collapse-arrow { @layer daisyui.l1.l2 { &>.collapse-title:after { width: .5rem; height: .5rem; display: block; position: absolute; transform: translateY(-100%)rotate(45deg); @media (prefers-reduced-motion:no-preference) { transition-property: all; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1) } top:50%; content:""; transform-origin:75% 75%; pointer-events:none; inset-inline-end:1.4rem; box-shadow:2px 2px } } } .collapse-plus { @layer daisyui.l1.l2 { &>.collapse-title:after { width: .5rem; height: .5rem; display: block; position: absolute; @media (prefers-reduced-motion:no-preference) { transition-property: all; transition-duration: .3s; transition-timing-function: cubic-bezier(.4, 0, .2, 1) } top:.9rem; --tw-content:"+"; content:var(--tw-content); pointer-events:none; inset-inline-end:1.4rem } } } .collapse-title { @layer daisyui.l1.l2.l3 { padding: 1rem; grid-row-start: 1; grid-column-start: 1; width: 100%; min-height: 1lh; padding-inline-end: 3rem; transition: background-color .2s ease-out; position: relative } } .collapse-open { @layer daisyui.l1.l2 { grid-template-rows: max-content 1fr; &>.collapse-content { --overflow-delay: .2s; overflow: revert-layer; content-visibility: visible; min-height: fit-content; padding-bottom: 1rem; @supports not (content-visibility:visible) { visibility: visible } } } } @media (width>=640px) { .sm\:collapse:not(td, tr, colgroup) { visibility: revert-layer; @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box, 1rem); isolation: isolate; grid-template-rows: max-content 0fr; grid-template-columns: minmax(0, 1fr); width: 100%; display: grid; position: relative; @media (prefers-reduced-motion:no-preference) { transition: grid-template-rows .2s } &>input:is([type=checkbox], [type=radio]) { appearance: none; opacity: 0; grid-row-start: 1; grid-column-start: 1 } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close)), &:not(.collapse-close):has(>input:is([type=checkbox], [type=radio]):checked) { grid-template-rows: max-content 1fr } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close))>.collapse-content, &:not(.collapse-close)>:where(input:is([type=checkbox], [type=radio]):checked~.collapse-content) { --overflow-delay: .2s; overflow: revert-layer; content-visibility: visible; min-height: fit-content; @supports not (content-visibility:visible) { visibility: visible } } &:focus-visible, &:has(>input:is([type=checkbox], [type=radio]):focus-visible), &:has(summary:focus-visible) { outline-color: var(--color-base-content); outline-offset: 2px; outline-width: 2px; outline-style: solid } &:not(.collapse-close) { &>input[type=checkbox], &>input[type=radio]:not(:checked), &>.collapse-title { cursor: pointer } } &[tabindex]:focus:not(.collapse-close, .collapse[open]), &[tabindex]:focus-within:not(.collapse-close, .collapse[open]) { &>.collapse-title { cursor: unset } } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close))>:where(.collapse-content), &:not(.collapse-close)>:where(input:is([type=checkbox], [type=radio]):checked~.collapse-content) { padding-bottom: 1rem } &>input:is([type=checkbox], [type=radio]) { z-index: 1; padding: 1rem; width: 100%; min-height: 1lh; padding-inline-end: 3rem; transition: background-color .2s ease-out } &:is(details) { width: 100%; &::details-content { --overflow-delay: 0s; height: 0; overflow: clip } &:where([open])::details-content { overflow: revert-layer; height: auto } @media (prefers-reduced-motion:no-preference) { &::details-content { transition: overflow .2s allow-discrete var(--overflow-delay), content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out, height .2s; interpolate-size: allow-keywords } &:where([open])::details-content { --overflow-delay: .2s } } &>summary { outline: none; display: block; position: relative; &::-webkit-details-marker { display: none } } } } @layer daisyui.l1.l2 { &[open] { &.collapse-arrow { &>.collapse-title:after { @media (prefers-reduced-motion:no-preference) { transform: translateY(-50%)rotate(225deg) } } } } &.collapse-open { &.collapse-arrow { &>.collapse-title:after { @media (prefers-reduced-motion:no-preference) { transform: translateY(-50%)rotate(225deg) } } } } &[tabindex].collapse-arrow:focus:not(.collapse-close), &.collapse-arrow[tabindex]:focus-within:not(.collapse-close) { &>.collapse-title:after { transform: translateY(-50%)rotate(225deg) } } &.collapse-arrow:not(.collapse-close) { &>input:is([type=checkbox], [type=radio]):checked~.collapse-title:after { transform: translateY(-50%)rotate(225deg) } } &[open] { &.collapse-plus { &>.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } } &.collapse-open { &.collapse-plus { &>.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } } &[tabindex].collapse-plus:focus:not(.collapse-close) { &>.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } &.collapse-plus:not(.collapse-close) { &>input:is([type=checkbox], [type=radio]):checked~.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } } } .sm\:collapse-content { @layer daisyui.l1.l2.l3 { --overflow-delay: 0s; content-visibility: hidden; min-height: 0; cursor: unset; grid-row-start: 2; grid-column-start: 1; padding-left: 1rem; padding-right: 1rem; overflow: clip; @supports not (content-visibility:hidden) { visibility: hidden } @media (prefers-reduced-motion:no-preference) { transition: overflow .2s allow-discrete var(--overflow-delay), content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out } details>& { content-visibility: visible } } } .sm\:collapse-arrow { @layer daisyui.l1.l2 { &>.collapse-title:after { width: .5rem; height: .5rem; display: block; position: absolute; transform: translateY(-100%)rotate(45deg); @media (prefers-reduced-motion:no-preference) { transition-property: all; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1) } top:50%; content:""; transform-origin:75% 75%; pointer-events:none; inset-inline-end:1.4rem; box-shadow:2px 2px } } } .sm\:collapse-plus { @layer daisyui.l1.l2 { &>.collapse-title:after { width: .5rem; height: .5rem; display: block; position: absolute; @media (prefers-reduced-motion:no-preference) { transition-property: all; transition-duration: .3s; transition-timing-function: cubic-bezier(.4, 0, .2, 1) } top:.9rem; --tw-content:"+"; content:var(--tw-content); pointer-events:none; inset-inline-end:1.4rem } } } .sm\:collapse-title { @layer daisyui.l1.l2.l3 { padding: 1rem; grid-row-start: 1; grid-column-start: 1; width: 100%; min-height: 1lh; padding-inline-end: 3rem; transition: background-color .2s ease-out; position: relative } } .sm\:collapse-open { @layer daisyui.l1.l2 { grid-template-rows: max-content 1fr; &>.collapse-content { --overflow-delay: .2s; overflow: revert-layer; content-visibility: visible; min-height: fit-content; padding-bottom: 1rem; @supports not (content-visibility:visible) { visibility: visible } } } } } @media (width>=768px) { .md\:collapse:not(td, tr, colgroup) { visibility: revert-layer; @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box, 1rem); isolation: isolate; grid-template-rows: max-content 0fr; grid-template-columns: minmax(0, 1fr); width: 100%; display: grid; position: relative; @media (prefers-reduced-motion:no-preference) { transition: grid-template-rows .2s } &>input:is([type=checkbox], [type=radio]) { appearance: none; opacity: 0; grid-row-start: 1; grid-column-start: 1 } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close)), &:not(.collapse-close):has(>input:is([type=checkbox], [type=radio]):checked) { grid-template-rows: max-content 1fr } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close))>.collapse-content, &:not(.collapse-close)>:where(input:is([type=checkbox], [type=radio]):checked~.collapse-content) { --overflow-delay: .2s; overflow: revert-layer; content-visibility: visible; min-height: fit-content; @supports not (content-visibility:visible) { visibility: visible } } &:focus-visible, &:has(>input:is([type=checkbox], [type=radio]):focus-visible), &:has(summary:focus-visible) { outline-color: var(--color-base-content); outline-offset: 2px; outline-width: 2px; outline-style: solid } &:not(.collapse-close) { &>input[type=checkbox], &>input[type=radio]:not(:checked), &>.collapse-title { cursor: pointer } } &[tabindex]:focus:not(.collapse-close, .collapse[open]), &[tabindex]:focus-within:not(.collapse-close, .collapse[open]) { &>.collapse-title { cursor: unset } } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close))>:where(.collapse-content), &:not(.collapse-close)>:where(input:is([type=checkbox], [type=radio]):checked~.collapse-content) { padding-bottom: 1rem } &>input:is([type=checkbox], [type=radio]) { z-index: 1; padding: 1rem; width: 100%; min-height: 1lh; padding-inline-end: 3rem; transition: background-color .2s ease-out } &:is(details) { width: 100%; &::details-content { --overflow-delay: 0s; height: 0; overflow: clip } &:where([open])::details-content { overflow: revert-layer; height: auto } @media (prefers-reduced-motion:no-preference) { &::details-content { transition: overflow .2s allow-discrete var(--overflow-delay), content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out, height .2s; interpolate-size: allow-keywords } &:where([open])::details-content { --overflow-delay: .2s } } &>summary { outline: none; display: block; position: relative; &::-webkit-details-marker { display: none } } } } @layer daisyui.l1.l2 { &[open] { &.collapse-arrow { &>.collapse-title:after { @media (prefers-reduced-motion:no-preference) { transform: translateY(-50%)rotate(225deg) } } } } &.collapse-open { &.collapse-arrow { &>.collapse-title:after { @media (prefers-reduced-motion:no-preference) { transform: translateY(-50%)rotate(225deg) } } } } &[tabindex].collapse-arrow:focus:not(.collapse-close), &.collapse-arrow[tabindex]:focus-within:not(.collapse-close) { &>.collapse-title:after { transform: translateY(-50%)rotate(225deg) } } &.collapse-arrow:not(.collapse-close) { &>input:is([type=checkbox], [type=radio]):checked~.collapse-title:after { transform: translateY(-50%)rotate(225deg) } } &[open] { &.collapse-plus { &>.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } } &.collapse-open { &.collapse-plus { &>.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } } &[tabindex].collapse-plus:focus:not(.collapse-close) { &>.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } &.collapse-plus:not(.collapse-close) { &>input:is([type=checkbox], [type=radio]):checked~.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } } } .md\:collapse-content { @layer daisyui.l1.l2.l3 { --overflow-delay: 0s; content-visibility: hidden; min-height: 0; cursor: unset; grid-row-start: 2; grid-column-start: 1; padding-left: 1rem; padding-right: 1rem; overflow: clip; @supports not (content-visibility:hidden) { visibility: hidden } @media (prefers-reduced-motion:no-preference) { transition: overflow .2s allow-discrete var(--overflow-delay), content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out } details>& { content-visibility: visible } } } .md\:collapse-arrow { @layer daisyui.l1.l2 { &>.collapse-title:after { width: .5rem; height: .5rem; display: block; position: absolute; transform: translateY(-100%)rotate(45deg); @media (prefers-reduced-motion:no-preference) { transition-property: all; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1) } top:50%; content:""; transform-origin:75% 75%; pointer-events:none; inset-inline-end:1.4rem; box-shadow:2px 2px } } } .md\:collapse-plus { @layer daisyui.l1.l2 { &>.collapse-title:after { width: .5rem; height: .5rem; display: block; position: absolute; @media (prefers-reduced-motion:no-preference) { transition-property: all; transition-duration: .3s; transition-timing-function: cubic-bezier(.4, 0, .2, 1) } top:.9rem; --tw-content:"+"; content:var(--tw-content); pointer-events:none; inset-inline-end:1.4rem } } } .md\:collapse-title { @layer daisyui.l1.l2.l3 { padding: 1rem; grid-row-start: 1; grid-column-start: 1; width: 100%; min-height: 1lh; padding-inline-end: 3rem; transition: background-color .2s ease-out; position: relative } } .md\:collapse-open { @layer daisyui.l1.l2 { grid-template-rows: max-content 1fr; &>.collapse-content { --overflow-delay: .2s; overflow: revert-layer; content-visibility: visible; min-height: fit-content; padding-bottom: 1rem; @supports not (content-visibility:visible) { visibility: visible } } } } } @media (width>=1024px) { .lg\:collapse:not(td, tr, colgroup) { visibility: revert-layer; @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box, 1rem); isolation: isolate; grid-template-rows: max-content 0fr; grid-template-columns: minmax(0, 1fr); width: 100%; display: grid; position: relative; @media (prefers-reduced-motion:no-preference) { transition: grid-template-rows .2s } &>input:is([type=checkbox], [type=radio]) { appearance: none; opacity: 0; grid-row-start: 1; grid-column-start: 1 } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close)), &:not(.collapse-close):has(>input:is([type=checkbox], [type=radio]):checked) { grid-template-rows: max-content 1fr } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close))>.collapse-content, &:not(.collapse-close)>:where(input:is([type=checkbox], [type=radio]):checked~.collapse-content) { --overflow-delay: .2s; overflow: revert-layer; content-visibility: visible; min-height: fit-content; @supports not (content-visibility:visible) { visibility: visible } } &:focus-visible, &:has(>input:is([type=checkbox], [type=radio]):focus-visible), &:has(summary:focus-visible) { outline-color: var(--color-base-content); outline-offset: 2px; outline-width: 2px; outline-style: solid } &:not(.collapse-close) { &>input[type=checkbox], &>input[type=radio]:not(:checked), &>.collapse-title { cursor: pointer } } &[tabindex]:focus:not(.collapse-close, .collapse[open]), &[tabindex]:focus-within:not(.collapse-close, .collapse[open]) { &>.collapse-title { cursor: unset } } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close))>:where(.collapse-content), &:not(.collapse-close)>:where(input:is([type=checkbox], [type=radio]):checked~.collapse-content) { padding-bottom: 1rem } &>input:is([type=checkbox], [type=radio]) { z-index: 1; padding: 1rem; width: 100%; min-height: 1lh; padding-inline-end: 3rem; transition: background-color .2s ease-out } &:is(details) { width: 100%; &::details-content { --overflow-delay: 0s; height: 0; overflow: clip } &:where([open])::details-content { overflow: revert-layer; height: auto } @media (prefers-reduced-motion:no-preference) { &::details-content { transition: overflow .2s allow-discrete var(--overflow-delay), content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out, height .2s; interpolate-size: allow-keywords } &:where([open])::details-content { --overflow-delay: .2s } } &>summary { outline: none; display: block; position: relative; &::-webkit-details-marker { display: none } } } } @layer daisyui.l1.l2 { &[open] { &.collapse-arrow { &>.collapse-title:after { @media (prefers-reduced-motion:no-preference) { transform: translateY(-50%)rotate(225deg) } } } } &.collapse-open { &.collapse-arrow { &>.collapse-title:after { @media (prefers-reduced-motion:no-preference) { transform: translateY(-50%)rotate(225deg) } } } } &[tabindex].collapse-arrow:focus:not(.collapse-close), &.collapse-arrow[tabindex]:focus-within:not(.collapse-close) { &>.collapse-title:after { transform: translateY(-50%)rotate(225deg) } } &.collapse-arrow:not(.collapse-close) { &>input:is([type=checkbox], [type=radio]):checked~.collapse-title:after { transform: translateY(-50%)rotate(225deg) } } &[open] { &.collapse-plus { &>.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } } &.collapse-open { &.collapse-plus { &>.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } } &[tabindex].collapse-plus:focus:not(.collapse-close) { &>.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } &.collapse-plus:not(.collapse-close) { &>input:is([type=checkbox], [type=radio]):checked~.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } } } .lg\:collapse-content { @layer daisyui.l1.l2.l3 { --overflow-delay: 0s; content-visibility: hidden; min-height: 0; cursor: unset; grid-row-start: 2; grid-column-start: 1; padding-left: 1rem; padding-right: 1rem; overflow: clip; @supports not (content-visibility:hidden) { visibility: hidden } @media (prefers-reduced-motion:no-preference) { transition: overflow .2s allow-discrete var(--overflow-delay), content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out } details>& { content-visibility: visible } } } .lg\:collapse-arrow { @layer daisyui.l1.l2 { &>.collapse-title:after { width: .5rem; height: .5rem; display: block; position: absolute; transform: translateY(-100%)rotate(45deg); @media (prefers-reduced-motion:no-preference) { transition-property: all; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1) } top:50%; content:""; transform-origin:75% 75%; pointer-events:none; inset-inline-end:1.4rem; box-shadow:2px 2px } } } .lg\:collapse-plus { @layer daisyui.l1.l2 { &>.collapse-title:after { width: .5rem; height: .5rem; display: block; position: absolute; @media (prefers-reduced-motion:no-preference) { transition-property: all; transition-duration: .3s; transition-timing-function: cubic-bezier(.4, 0, .2, 1) } top:.9rem; --tw-content:"+"; content:var(--tw-content); pointer-events:none; inset-inline-end:1.4rem } } } .lg\:collapse-title { @layer daisyui.l1.l2.l3 { padding: 1rem; grid-row-start: 1; grid-column-start: 1; width: 100%; min-height: 1lh; padding-inline-end: 3rem; transition: background-color .2s ease-out; position: relative } } .lg\:collapse-open { @layer daisyui.l1.l2 { grid-template-rows: max-content 1fr; &>.collapse-content { --overflow-delay: .2s; overflow: revert-layer; content-visibility: visible; min-height: fit-content; padding-bottom: 1rem; @supports not (content-visibility:visible) { visibility: visible } } } } } @media (width>=1280px) { .xl\:collapse:not(td, tr, colgroup) { visibility: revert-layer; @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box, 1rem); isolation: isolate; grid-template-rows: max-content 0fr; grid-template-columns: minmax(0, 1fr); width: 100%; display: grid; position: relative; @media (prefers-reduced-motion:no-preference) { transition: grid-template-rows .2s } &>input:is([type=checkbox], [type=radio]) { appearance: none; opacity: 0; grid-row-start: 1; grid-column-start: 1 } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close)), &:not(.collapse-close):has(>input:is([type=checkbox], [type=radio]):checked) { grid-template-rows: max-content 1fr } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close))>.collapse-content, &:not(.collapse-close)>:where(input:is([type=checkbox], [type=radio]):checked~.collapse-content) { --overflow-delay: .2s; overflow: revert-layer; content-visibility: visible; min-height: fit-content; @supports not (content-visibility:visible) { visibility: visible } } &:focus-visible, &:has(>input:is([type=checkbox], [type=radio]):focus-visible), &:has(summary:focus-visible) { outline-color: var(--color-base-content); outline-offset: 2px; outline-width: 2px; outline-style: solid } &:not(.collapse-close) { &>input[type=checkbox], &>input[type=radio]:not(:checked), &>.collapse-title { cursor: pointer } } &[tabindex]:focus:not(.collapse-close, .collapse[open]), &[tabindex]:focus-within:not(.collapse-close, .collapse[open]) { &>.collapse-title { cursor: unset } } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close))>:where(.collapse-content), &:not(.collapse-close)>:where(input:is([type=checkbox], [type=radio]):checked~.collapse-content) { padding-bottom: 1rem } &>input:is([type=checkbox], [type=radio]) { z-index: 1; padding: 1rem; width: 100%; min-height: 1lh; padding-inline-end: 3rem; transition: background-color .2s ease-out } &:is(details) { width: 100%; &::details-content { --overflow-delay: 0s; height: 0; overflow: clip } &:where([open])::details-content { overflow: revert-layer; height: auto } @media (prefers-reduced-motion:no-preference) { &::details-content { transition: overflow .2s allow-discrete var(--overflow-delay), content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out, height .2s; interpolate-size: allow-keywords } &:where([open])::details-content { --overflow-delay: .2s } } &>summary { outline: none; display: block; position: relative; &::-webkit-details-marker { display: none } } } } @layer daisyui.l1.l2 { &[open] { &.collapse-arrow { &>.collapse-title:after { @media (prefers-reduced-motion:no-preference) { transform: translateY(-50%)rotate(225deg) } } } } &.collapse-open { &.collapse-arrow { &>.collapse-title:after { @media (prefers-reduced-motion:no-preference) { transform: translateY(-50%)rotate(225deg) } } } } &[tabindex].collapse-arrow:focus:not(.collapse-close), &.collapse-arrow[tabindex]:focus-within:not(.collapse-close) { &>.collapse-title:after { transform: translateY(-50%)rotate(225deg) } } &.collapse-arrow:not(.collapse-close) { &>input:is([type=checkbox], [type=radio]):checked~.collapse-title:after { transform: translateY(-50%)rotate(225deg) } } &[open] { &.collapse-plus { &>.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } } &.collapse-open { &.collapse-plus { &>.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } } &[tabindex].collapse-plus:focus:not(.collapse-close) { &>.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } &.collapse-plus:not(.collapse-close) { &>input:is([type=checkbox], [type=radio]):checked~.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } } } .xl\:collapse-content { @layer daisyui.l1.l2.l3 { --overflow-delay: 0s; content-visibility: hidden; min-height: 0; cursor: unset; grid-row-start: 2; grid-column-start: 1; padding-left: 1rem; padding-right: 1rem; overflow: clip; @supports not (content-visibility:hidden) { visibility: hidden } @media (prefers-reduced-motion:no-preference) { transition: overflow .2s allow-discrete var(--overflow-delay), content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out } details>& { content-visibility: visible } } } .xl\:collapse-arrow { @layer daisyui.l1.l2 { &>.collapse-title:after { width: .5rem; height: .5rem; display: block; position: absolute; transform: translateY(-100%)rotate(45deg); @media (prefers-reduced-motion:no-preference) { transition-property: all; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1) } top:50%; content:""; transform-origin:75% 75%; pointer-events:none; inset-inline-end:1.4rem; box-shadow:2px 2px } } } .xl\:collapse-plus { @layer daisyui.l1.l2 { &>.collapse-title:after { width: .5rem; height: .5rem; display: block; position: absolute; @media (prefers-reduced-motion:no-preference) { transition-property: all; transition-duration: .3s; transition-timing-function: cubic-bezier(.4, 0, .2, 1) } top:.9rem; --tw-content:"+"; content:var(--tw-content); pointer-events:none; inset-inline-end:1.4rem } } } .xl\:collapse-title { @layer daisyui.l1.l2.l3 { padding: 1rem; grid-row-start: 1; grid-column-start: 1; width: 100%; min-height: 1lh; padding-inline-end: 3rem; transition: background-color .2s ease-out; position: relative } } .xl\:collapse-open { @layer daisyui.l1.l2 { grid-template-rows: max-content 1fr; &>.collapse-content { --overflow-delay: .2s; overflow: revert-layer; content-visibility: visible; min-height: fit-content; padding-bottom: 1rem; @supports not (content-visibility:visible) { visibility: visible } } } } } @media (width>=1536px) { .\32 xl\:collapse:not(td, tr, colgroup) { visibility: revert-layer; @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box, 1rem); isolation: isolate; grid-template-rows: max-content 0fr; grid-template-columns: minmax(0, 1fr); width: 100%; display: grid; position: relative; @media (prefers-reduced-motion:no-preference) { transition: grid-template-rows .2s } &>input:is([type=checkbox], [type=radio]) { appearance: none; opacity: 0; grid-row-start: 1; grid-column-start: 1 } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close)), &:not(.collapse-close):has(>input:is([type=checkbox], [type=radio]):checked) { grid-template-rows: max-content 1fr } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close))>.collapse-content, &:not(.collapse-close)>:where(input:is([type=checkbox], [type=radio]):checked~.collapse-content) { --overflow-delay: .2s; overflow: revert-layer; content-visibility: visible; min-height: fit-content; @supports not (content-visibility:visible) { visibility: visible } } &:focus-visible, &:has(>input:is([type=checkbox], [type=radio]):focus-visible), &:has(summary:focus-visible) { outline-color: var(--color-base-content); outline-offset: 2px; outline-width: 2px; outline-style: solid } &:not(.collapse-close) { &>input[type=checkbox], &>input[type=radio]:not(:checked), &>.collapse-title { cursor: pointer } } &[tabindex]:focus:not(.collapse-close, .collapse[open]), &[tabindex]:focus-within:not(.collapse-close, .collapse[open]) { &>.collapse-title { cursor: unset } } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close))>:where(.collapse-content), &:not(.collapse-close)>:where(input:is([type=checkbox], [type=radio]):checked~.collapse-content) { padding-bottom: 1rem } &>input:is([type=checkbox], [type=radio]) { z-index: 1; padding: 1rem; width: 100%; min-height: 1lh; padding-inline-end: 3rem; transition: background-color .2s ease-out } &:is(details) { width: 100%; &::details-content { --overflow-delay: 0s; height: 0; overflow: clip } &:where([open])::details-content { overflow: revert-layer; height: auto } @media (prefers-reduced-motion:no-preference) { &::details-content { transition: overflow .2s allow-discrete var(--overflow-delay), content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out, height .2s; interpolate-size: allow-keywords } &:where([open])::details-content { --overflow-delay: .2s } } &>summary { outline: none; display: block; position: relative; &::-webkit-details-marker { display: none } } } } @layer daisyui.l1.l2 { &[open] { &.collapse-arrow { &>.collapse-title:after { @media (prefers-reduced-motion:no-preference) { transform: translateY(-50%)rotate(225deg) } } } } &.collapse-open { &.collapse-arrow { &>.collapse-title:after { @media (prefers-reduced-motion:no-preference) { transform: translateY(-50%)rotate(225deg) } } } } &[tabindex].collapse-arrow:focus:not(.collapse-close), &.collapse-arrow[tabindex]:focus-within:not(.collapse-close) { &>.collapse-title:after { transform: translateY(-50%)rotate(225deg) } } &.collapse-arrow:not(.collapse-close) { &>input:is([type=checkbox], [type=radio]):checked~.collapse-title:after { transform: translateY(-50%)rotate(225deg) } } &[open] { &.collapse-plus { &>.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } } &.collapse-open { &.collapse-plus { &>.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } } &[tabindex].collapse-plus:focus:not(.collapse-close) { &>.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } &.collapse-plus:not(.collapse-close) { &>input:is([type=checkbox], [type=radio]):checked~.collapse-title:after { --tw-content: "−"; content: var(--tw-content) } } } } .\32 xl\:collapse-content { @layer daisyui.l1.l2.l3 { --overflow-delay: 0s; content-visibility: hidden; min-height: 0; cursor: unset; grid-row-start: 2; grid-column-start: 1; padding-left: 1rem; padding-right: 1rem; overflow: clip; @supports not (content-visibility:hidden) { visibility: hidden } @media (prefers-reduced-motion:no-preference) { transition: overflow .2s allow-discrete var(--overflow-delay), content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out } details>& { content-visibility: visible } } } .\32 xl\:collapse-arrow { @layer daisyui.l1.l2 { &>.collapse-title:after { width: .5rem; height: .5rem; display: block; position: absolute; transform: translateY(-100%)rotate(45deg); @media (prefers-reduced-motion:no-preference) { transition-property: all; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1) } top:50%; content:""; transform-origin:75% 75%; pointer-events:none; inset-inline-end:1.4rem; box-shadow:2px 2px } } } .\32 xl\:collapse-plus { @layer daisyui.l1.l2 { &>.collapse-title:after { width: .5rem; height: .5rem; display: block; position: absolute; @media (prefers-reduced-motion:no-preference) { transition-property: all; transition-duration: .3s; transition-timing-function: cubic-bezier(.4, 0, .2, 1) } top:.9rem; --tw-content:"+"; content:var(--tw-content); pointer-events:none; inset-inline-end:1.4rem } } } .\32 xl\:collapse-title { @layer daisyui.l1.l2.l3 { padding: 1rem; grid-row-start: 1; grid-column-start: 1; width: 100%; min-height: 1lh; padding-inline-end: 3rem; transition: background-color .2s ease-out; position: relative } } .\32 xl\:collapse-open { @layer daisyui.l1.l2 { grid-template-rows: max-content 1fr; &>.collapse-content { --overflow-delay: .2s; overflow: revert-layer; content-visibility: visible; min-height: fit-content; padding-bottom: 1rem; @supports not (content-visibility:visible) { visibility: visible } } } } } .badge { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-selector); vertical-align: middle; color: var(--badge-fg); border: var(--border) solid var(--badge-color, var(--color-base-200)); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); background-color: var(--badge-bg); --badge-bg: var(--badge-color, var(--color-base-100)); --badge-fg: var(--color-base-content); --size: calc(var(--size-selector, .25rem) * 6); width: fit-content; height: var(--size); padding-inline: calc(var(--size) / 2 - var(--border)); justify-content: center; align-items: center; gap: .5rem; font-size: .875rem; display: inline-flex } } .badge-outline { @layer daisyui.l1.l2 { color: var(--badge-color); --badge-bg: #0000; background-image: none; border-color: currentColor } } .badge-dash { @layer daisyui.l1.l2 { color: var(--badge-color); --badge-bg: #0000; background-image: none; border-style: dashed; border-color: currentColor } } .badge-soft { @layer daisyui.l1.l2 { color: var(--badge-color, var(--color-base-content)); background-color: color-mix(in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100)); border-color: color-mix(in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100)); background-image: none } } .badge-primary { @layer daisyui.l1.l2 { --badge-color: var(--color-primary); --badge-fg: var(--color-primary-content) } } .badge-secondary { @layer daisyui.l1.l2 { --badge-color: var(--color-secondary); --badge-fg: var(--color-secondary-content) } } .badge-accent { @layer daisyui.l1.l2 { --badge-color: var(--color-accent); --badge-fg: var(--color-accent-content) } } .badge-neutral { @layer daisyui.l1.l2 { --badge-color: var(--color-neutral); --badge-fg: var(--color-neutral-content) } } .badge-info { @layer daisyui.l1.l2 { --badge-color: var(--color-info); --badge-fg: var(--color-info-content) } } .badge-success { @layer daisyui.l1.l2 { --badge-color: var(--color-success); --badge-fg: var(--color-success-content) } } .badge-warning { @layer daisyui.l1.l2 { --badge-color: var(--color-warning); --badge-fg: var(--color-warning-content) } } .badge-error { @layer daisyui.l1.l2 { --badge-color: var(--color-error); --badge-fg: var(--color-error-content) } } .badge-ghost { @layer daisyui.l1.l2 { border-color: var(--color-base-200); background-color: var(--color-base-200); color: var(--color-base-content); background-image: none } } .badge-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 4); font-size: .625rem } } .badge-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 5); font-size: .75rem } } .badge-md { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 6); font-size: .875rem } } .badge-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 7); font-size: 1rem } } .badge-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 8); font-size: 1.125rem } } @media (width>=640px) { .sm\:badge { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-selector); vertical-align: middle; color: var(--badge-fg); border: var(--border) solid var(--badge-color, var(--color-base-200)); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); background-color: var(--badge-bg); --badge-bg: var(--badge-color, var(--color-base-100)); --badge-fg: var(--color-base-content); --size: calc(var(--size-selector, .25rem) * 6); width: fit-content; height: var(--size); padding-inline: calc(var(--size) / 2 - var(--border)); justify-content: center; align-items: center; gap: .5rem; font-size: .875rem; display: inline-flex } } .sm\:badge-outline { @layer daisyui.l1.l2 { color: var(--badge-color); --badge-bg: #0000; background-image: none; border-color: currentColor } } .sm\:badge-dash { @layer daisyui.l1.l2 { color: var(--badge-color); --badge-bg: #0000; background-image: none; border-style: dashed; border-color: currentColor } } .sm\:badge-soft { @layer daisyui.l1.l2 { color: var(--badge-color, var(--color-base-content)); background-color: color-mix(in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100)); border-color: color-mix(in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100)); background-image: none } } .sm\:badge-primary { @layer daisyui.l1.l2 { --badge-color: var(--color-primary); --badge-fg: var(--color-primary-content) } } .sm\:badge-secondary { @layer daisyui.l1.l2 { --badge-color: var(--color-secondary); --badge-fg: var(--color-secondary-content) } } .sm\:badge-accent { @layer daisyui.l1.l2 { --badge-color: var(--color-accent); --badge-fg: var(--color-accent-content) } } .sm\:badge-neutral { @layer daisyui.l1.l2 { --badge-color: var(--color-neutral); --badge-fg: var(--color-neutral-content) } } .sm\:badge-info { @layer daisyui.l1.l2 { --badge-color: var(--color-info); --badge-fg: var(--color-info-content) } } .sm\:badge-success { @layer daisyui.l1.l2 { --badge-color: var(--color-success); --badge-fg: var(--color-success-content) } } .sm\:badge-warning { @layer daisyui.l1.l2 { --badge-color: var(--color-warning); --badge-fg: var(--color-warning-content) } } .sm\:badge-error { @layer daisyui.l1.l2 { --badge-color: var(--color-error); --badge-fg: var(--color-error-content) } } .sm\:badge-ghost { @layer daisyui.l1.l2 { border-color: var(--color-base-200); background-color: var(--color-base-200); color: var(--color-base-content); background-image: none } } .sm\:badge-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 4); font-size: .625rem } } .sm\:badge-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 5); font-size: .75rem } } .sm\:badge-md { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 6); font-size: .875rem } } .sm\:badge-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 7); font-size: 1rem } } .sm\:badge-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 8); font-size: 1.125rem } } } @media (width>=768px) { .md\:badge { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-selector); vertical-align: middle; color: var(--badge-fg); border: var(--border) solid var(--badge-color, var(--color-base-200)); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); background-color: var(--badge-bg); --badge-bg: var(--badge-color, var(--color-base-100)); --badge-fg: var(--color-base-content); --size: calc(var(--size-selector, .25rem) * 6); width: fit-content; height: var(--size); padding-inline: calc(var(--size) / 2 - var(--border)); justify-content: center; align-items: center; gap: .5rem; font-size: .875rem; display: inline-flex } } .md\:badge-outline { @layer daisyui.l1.l2 { color: var(--badge-color); --badge-bg: #0000; background-image: none; border-color: currentColor } } .md\:badge-dash { @layer daisyui.l1.l2 { color: var(--badge-color); --badge-bg: #0000; background-image: none; border-style: dashed; border-color: currentColor } } .md\:badge-soft { @layer daisyui.l1.l2 { color: var(--badge-color, var(--color-base-content)); background-color: color-mix(in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100)); border-color: color-mix(in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100)); background-image: none } } .md\:badge-primary { @layer daisyui.l1.l2 { --badge-color: var(--color-primary); --badge-fg: var(--color-primary-content) } } .md\:badge-secondary { @layer daisyui.l1.l2 { --badge-color: var(--color-secondary); --badge-fg: var(--color-secondary-content) } } .md\:badge-accent { @layer daisyui.l1.l2 { --badge-color: var(--color-accent); --badge-fg: var(--color-accent-content) } } .md\:badge-neutral { @layer daisyui.l1.l2 { --badge-color: var(--color-neutral); --badge-fg: var(--color-neutral-content) } } .md\:badge-info { @layer daisyui.l1.l2 { --badge-color: var(--color-info); --badge-fg: var(--color-info-content) } } .md\:badge-success { @layer daisyui.l1.l2 { --badge-color: var(--color-success); --badge-fg: var(--color-success-content) } } .md\:badge-warning { @layer daisyui.l1.l2 { --badge-color: var(--color-warning); --badge-fg: var(--color-warning-content) } } .md\:badge-error { @layer daisyui.l1.l2 { --badge-color: var(--color-error); --badge-fg: var(--color-error-content) } } .md\:badge-ghost { @layer daisyui.l1.l2 { border-color: var(--color-base-200); background-color: var(--color-base-200); color: var(--color-base-content); background-image: none } } .md\:badge-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 4); font-size: .625rem } } .md\:badge-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 5); font-size: .75rem } } .md\:badge-md { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 6); font-size: .875rem } } .md\:badge-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 7); font-size: 1rem } } .md\:badge-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 8); font-size: 1.125rem } } } @media (width>=1024px) { .lg\:badge { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-selector); vertical-align: middle; color: var(--badge-fg); border: var(--border) solid var(--badge-color, var(--color-base-200)); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); background-color: var(--badge-bg); --badge-bg: var(--badge-color, var(--color-base-100)); --badge-fg: var(--color-base-content); --size: calc(var(--size-selector, .25rem) * 6); width: fit-content; height: var(--size); padding-inline: calc(var(--size) / 2 - var(--border)); justify-content: center; align-items: center; gap: .5rem; font-size: .875rem; display: inline-flex } } .lg\:badge-outline { @layer daisyui.l1.l2 { color: var(--badge-color); --badge-bg: #0000; background-image: none; border-color: currentColor } } .lg\:badge-dash { @layer daisyui.l1.l2 { color: var(--badge-color); --badge-bg: #0000; background-image: none; border-style: dashed; border-color: currentColor } } .lg\:badge-soft { @layer daisyui.l1.l2 { color: var(--badge-color, var(--color-base-content)); background-color: color-mix(in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100)); border-color: color-mix(in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100)); background-image: none } } .lg\:badge-primary { @layer daisyui.l1.l2 { --badge-color: var(--color-primary); --badge-fg: var(--color-primary-content) } } .lg\:badge-secondary { @layer daisyui.l1.l2 { --badge-color: var(--color-secondary); --badge-fg: var(--color-secondary-content) } } .lg\:badge-accent { @layer daisyui.l1.l2 { --badge-color: var(--color-accent); --badge-fg: var(--color-accent-content) } } .lg\:badge-neutral { @layer daisyui.l1.l2 { --badge-color: var(--color-neutral); --badge-fg: var(--color-neutral-content) } } .lg\:badge-info { @layer daisyui.l1.l2 { --badge-color: var(--color-info); --badge-fg: var(--color-info-content) } } .lg\:badge-success { @layer daisyui.l1.l2 { --badge-color: var(--color-success); --badge-fg: var(--color-success-content) } } .lg\:badge-warning { @layer daisyui.l1.l2 { --badge-color: var(--color-warning); --badge-fg: var(--color-warning-content) } } .lg\:badge-error { @layer daisyui.l1.l2 { --badge-color: var(--color-error); --badge-fg: var(--color-error-content) } } .lg\:badge-ghost { @layer daisyui.l1.l2 { border-color: var(--color-base-200); background-color: var(--color-base-200); color: var(--color-base-content); background-image: none } } .lg\:badge-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 4); font-size: .625rem } } .lg\:badge-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 5); font-size: .75rem } } .lg\:badge-md { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 6); font-size: .875rem } } .lg\:badge-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 7); font-size: 1rem } } .lg\:badge-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 8); font-size: 1.125rem } } } @media (width>=1280px) { .xl\:badge { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-selector); vertical-align: middle; color: var(--badge-fg); border: var(--border) solid var(--badge-color, var(--color-base-200)); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); background-color: var(--badge-bg); --badge-bg: var(--badge-color, var(--color-base-100)); --badge-fg: var(--color-base-content); --size: calc(var(--size-selector, .25rem) * 6); width: fit-content; height: var(--size); padding-inline: calc(var(--size) / 2 - var(--border)); justify-content: center; align-items: center; gap: .5rem; font-size: .875rem; display: inline-flex } } .xl\:badge-outline { @layer daisyui.l1.l2 { color: var(--badge-color); --badge-bg: #0000; background-image: none; border-color: currentColor } } .xl\:badge-dash { @layer daisyui.l1.l2 { color: var(--badge-color); --badge-bg: #0000; background-image: none; border-style: dashed; border-color: currentColor } } .xl\:badge-soft { @layer daisyui.l1.l2 { color: var(--badge-color, var(--color-base-content)); background-color: color-mix(in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100)); border-color: color-mix(in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100)); background-image: none } } .xl\:badge-primary { @layer daisyui.l1.l2 { --badge-color: var(--color-primary); --badge-fg: var(--color-primary-content) } } .xl\:badge-secondary { @layer daisyui.l1.l2 { --badge-color: var(--color-secondary); --badge-fg: var(--color-secondary-content) } } .xl\:badge-accent { @layer daisyui.l1.l2 { --badge-color: var(--color-accent); --badge-fg: var(--color-accent-content) } } .xl\:badge-neutral { @layer daisyui.l1.l2 { --badge-color: var(--color-neutral); --badge-fg: var(--color-neutral-content) } } .xl\:badge-info { @layer daisyui.l1.l2 { --badge-color: var(--color-info); --badge-fg: var(--color-info-content) } } .xl\:badge-success { @layer daisyui.l1.l2 { --badge-color: var(--color-success); --badge-fg: var(--color-success-content) } } .xl\:badge-warning { @layer daisyui.l1.l2 { --badge-color: var(--color-warning); --badge-fg: var(--color-warning-content) } } .xl\:badge-error { @layer daisyui.l1.l2 { --badge-color: var(--color-error); --badge-fg: var(--color-error-content) } } .xl\:badge-ghost { @layer daisyui.l1.l2 { border-color: var(--color-base-200); background-color: var(--color-base-200); color: var(--color-base-content); background-image: none } } .xl\:badge-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 4); font-size: .625rem } } .xl\:badge-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 5); font-size: .75rem } } .xl\:badge-md { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 6); font-size: .875rem } } .xl\:badge-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 7); font-size: 1rem } } .xl\:badge-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 8); font-size: 1.125rem } } } @media (width>=1536px) { .\32 xl\:badge { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-selector); vertical-align: middle; color: var(--badge-fg); border: var(--border) solid var(--badge-color, var(--color-base-200)); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); background-color: var(--badge-bg); --badge-bg: var(--badge-color, var(--color-base-100)); --badge-fg: var(--color-base-content); --size: calc(var(--size-selector, .25rem) * 6); width: fit-content; height: var(--size); padding-inline: calc(var(--size) / 2 - var(--border)); justify-content: center; align-items: center; gap: .5rem; font-size: .875rem; display: inline-flex } } .\32 xl\:badge-outline { @layer daisyui.l1.l2 { color: var(--badge-color); --badge-bg: #0000; background-image: none; border-color: currentColor } } .\32 xl\:badge-dash { @layer daisyui.l1.l2 { color: var(--badge-color); --badge-bg: #0000; background-image: none; border-style: dashed; border-color: currentColor } } .\32 xl\:badge-soft { @layer daisyui.l1.l2 { color: var(--badge-color, var(--color-base-content)); background-color: color-mix(in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100)); border-color: color-mix(in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100)); background-image: none } } .\32 xl\:badge-primary { @layer daisyui.l1.l2 { --badge-color: var(--color-primary); --badge-fg: var(--color-primary-content) } } .\32 xl\:badge-secondary { @layer daisyui.l1.l2 { --badge-color: var(--color-secondary); --badge-fg: var(--color-secondary-content) } } .\32 xl\:badge-accent { @layer daisyui.l1.l2 { --badge-color: var(--color-accent); --badge-fg: var(--color-accent-content) } } .\32 xl\:badge-neutral { @layer daisyui.l1.l2 { --badge-color: var(--color-neutral); --badge-fg: var(--color-neutral-content) } } .\32 xl\:badge-info { @layer daisyui.l1.l2 { --badge-color: var(--color-info); --badge-fg: var(--color-info-content) } } .\32 xl\:badge-success { @layer daisyui.l1.l2 { --badge-color: var(--color-success); --badge-fg: var(--color-success-content) } } .\32 xl\:badge-warning { @layer daisyui.l1.l2 { --badge-color: var(--color-warning); --badge-fg: var(--color-warning-content) } } .\32 xl\:badge-error { @layer daisyui.l1.l2 { --badge-color: var(--color-error); --badge-fg: var(--color-error-content) } } .\32 xl\:badge-ghost { @layer daisyui.l1.l2 { border-color: var(--color-base-200); background-color: var(--color-base-200); color: var(--color-base-content); background-image: none } } .\32 xl\:badge-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 4); font-size: .625rem } } .\32 xl\:badge-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 5); font-size: .75rem } } .\32 xl\:badge-md { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 6); font-size: .875rem } } .\32 xl\:badge-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 7); font-size: 1rem } } .\32 xl\:badge-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 8); font-size: 1.125rem } } } .breadcrumbs { @layer daisyui.l1.l2.l3 { max-width: 100%; padding-block: .5rem; overflow-x: auto; &>menu, &>ul, &>ol { white-space: nowrap; align-items: center; min-height: min-content; display: flex; &>li { align-items: center; display: flex; &>* { cursor: pointer; align-items: center; gap: .5rem; display: flex; &:hover { @media (hover:hover) { text-decoration-line: underline } } &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:focus-visible { outline-offset: 2px; outline: 2px solid } } &+:before { content: ""; opacity: .4; background-color: #0000; border-top: 1px solid; border-right: 1px solid; width: .375rem; height: .375rem; margin-inline: .5rem .75rem; display: block; rotate: 45deg } [dir=rtl] &+:before { rotate: -135deg } } } } } @media (width>=640px) { .sm\:breadcrumbs { @layer daisyui.l1.l2.l3 { max-width: 100%; padding-block: .5rem; overflow-x: auto; &>menu, &>ul, &>ol { white-space: nowrap; align-items: center; min-height: min-content; display: flex; &>li { align-items: center; display: flex; &>* { cursor: pointer; align-items: center; gap: .5rem; display: flex; &:hover { @media (hover:hover) { text-decoration-line: underline } } &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:focus-visible { outline-offset: 2px; outline: 2px solid } } &+:before { content: ""; opacity: .4; background-color: #0000; border-top: 1px solid; border-right: 1px solid; width: .375rem; height: .375rem; margin-inline: .5rem .75rem; display: block; rotate: 45deg } [dir=rtl] &+:before { rotate: -135deg } } } } } } @media (width>=768px) { .md\:breadcrumbs { @layer daisyui.l1.l2.l3 { max-width: 100%; padding-block: .5rem; overflow-x: auto; &>menu, &>ul, &>ol { white-space: nowrap; align-items: center; min-height: min-content; display: flex; &>li { align-items: center; display: flex; &>* { cursor: pointer; align-items: center; gap: .5rem; display: flex; &:hover { @media (hover:hover) { text-decoration-line: underline } } &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:focus-visible { outline-offset: 2px; outline: 2px solid } } &+:before { content: ""; opacity: .4; background-color: #0000; border-top: 1px solid; border-right: 1px solid; width: .375rem; height: .375rem; margin-inline: .5rem .75rem; display: block; rotate: 45deg } [dir=rtl] &+:before { rotate: -135deg } } } } } } @media (width>=1024px) { .lg\:breadcrumbs { @layer daisyui.l1.l2.l3 { max-width: 100%; padding-block: .5rem; overflow-x: auto; &>menu, &>ul, &>ol { white-space: nowrap; align-items: center; min-height: min-content; display: flex; &>li { align-items: center; display: flex; &>* { cursor: pointer; align-items: center; gap: .5rem; display: flex; &:hover { @media (hover:hover) { text-decoration-line: underline } } &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:focus-visible { outline-offset: 2px; outline: 2px solid } } &+:before { content: ""; opacity: .4; background-color: #0000; border-top: 1px solid; border-right: 1px solid; width: .375rem; height: .375rem; margin-inline: .5rem .75rem; display: block; rotate: 45deg } [dir=rtl] &+:before { rotate: -135deg } } } } } } @media (width>=1280px) { .xl\:breadcrumbs { @layer daisyui.l1.l2.l3 { max-width: 100%; padding-block: .5rem; overflow-x: auto; &>menu, &>ul, &>ol { white-space: nowrap; align-items: center; min-height: min-content; display: flex; &>li { align-items: center; display: flex; &>* { cursor: pointer; align-items: center; gap: .5rem; display: flex; &:hover { @media (hover:hover) { text-decoration-line: underline } } &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:focus-visible { outline-offset: 2px; outline: 2px solid } } &+:before { content: ""; opacity: .4; background-color: #0000; border-top: 1px solid; border-right: 1px solid; width: .375rem; height: .375rem; margin-inline: .5rem .75rem; display: block; rotate: 45deg } [dir=rtl] &+:before { rotate: -135deg } } } } } } @media (width>=1536px) { .\32 xl\:breadcrumbs { @layer daisyui.l1.l2.l3 { max-width: 100%; padding-block: .5rem; overflow-x: auto; &>menu, &>ul, &>ol { white-space: nowrap; align-items: center; min-height: min-content; display: flex; &>li { align-items: center; display: flex; &>* { cursor: pointer; align-items: center; gap: .5rem; display: flex; &:hover { @media (hover:hover) { text-decoration-line: underline } } &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:focus-visible { outline-offset: 2px; outline: 2px solid } } &+:before { content: ""; opacity: .4; background-color: #0000; border-top: 1px solid; border-right: 1px solid; width: .375rem; height: .375rem; margin-inline: .5rem .75rem; display: block; rotate: 45deg } [dir=rtl] &+:before { rotate: -135deg } } } } } } :where(.btn) { @layer daisyui.l1.l2.l3 { width: unset } } .prose :where(a.btn:not(.btn-link)):not(:where([class~=not-prose], [class~=not-prose] *)) { text-decoration-line: none } .btn { @layer daisyui.l1.l2.l3 { --size: calc(var(--size-field, .25rem) * 10); --btn-p: 1rem; --btn-fg: var(--color-base-content); cursor: pointer; text-align: center; vertical-align: middle; outline-offset: 2px; -webkit-user-select: none; user-select: none; border-width: var(--border); touch-action: manipulation; --btn-bg: var(--btn-color, var(--color-base-200)); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 calc(var(--depth) * 5%)); --btn-soft-bg: initial; --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); height: var(--size); padding-inline: var(--btn-p); font-weight: 600; font-size: var(--fontsize, .875rem); background-color: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-border); border-style: var(--btn-border-style, solid); outline-color: var(--btn-color, var(--color-base-content)); --tw-prose-links: var(--btn-fg); background-image: none, var(--fx-noise); background-size: auto, calc(var(--noise, 0) * 100%); text-shadow: 0 .5px oklch(100% 0 0 / calc(var(--depth) * .15)); box-shadow: var(--btn-inset) inset, var(--btn-shadow); border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-wrap: nowrap; flex-shrink: 0; justify-content: center; align-items: center; gap: .375rem; transition-property: color, background-color, border-color, box-shadow, transform; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); display: inline-flex; &:is([type=checkbox], [type=radio]) { appearance: none; &[aria-label]:after { --tw-content: attr(aria-label); content: var(--tw-content) } } } @layer daisyui.l1 { &:where(:checked:not(.filter [type=radio].btn)) { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content) } @media (hover:hover) { &:hover { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); color: var(--btn-fg); --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); --btn-border-style: solid; --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000) } } &:active:not(.btn-active) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); color: var(--btn-fg, var(--color-base-content)); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); translate: 0 .5px } &:where(:checked:not(.filter [type=radio].btn), :not([type=radio], [type=checkbox]):focus-visible) { --btn-bg: var(--btn-color, var(--color-base-200)); color: var(--btn-fg, var(--color-base-content)); --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); --btn-border-style: solid; --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); isolation: isolate } &:focus-visible, &:has(:focus-visible) { isolation: isolate; outline-width: 2px; outline-style: solid } } } .btn-active { @layer daisyui.l1.l2 { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); color: var(--btn-fg, var(--color-base-content)); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); isolation: isolate } } .btn-outline, .btn-dash { @layer daisyui.l1.l2.l3 { --btn-bg: #0000; color: var(--btn-rest-fg, var(--btn-color, var(--color-base-content))); --btn-border: var(--btn-color, var(--color-base-content)); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none } } .btn-dash { @layer daisyui.l1.l2.l3 { --btn-border-style: dashed } } .btn-ghost { @layer daisyui.l1.l2.l3 { --btn-bg: #0000; color: var(--btn-rest-fg, var(--btn-color, var(--color-base-content, currentColor))); --btn-border: #0000; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none } } .btn-soft { @layer daisyui.l1.l2.l3 { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 8%, var(--btn-soft-bg, var(--color-base-100))); color: var(--btn-rest-fg, var(--btn-color, var(--color-base-content))); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 10%, var(--btn-soft-bg, var(--color-base-100))); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none } } .btn-link { @layer daisyui { --btn-bg: #0000; color: var(--btn-color, var(--color-primary)); --btn-border: #0000; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none; text-decoration-line: underline } } .btn-primary { @layer daisyui.l1.l2 { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); --btn-soft-bg: initial } } .btn-secondary { @layer daisyui.l1.l2 { --btn-color: var(--color-secondary); --btn-fg: var(--color-secondary-content); --btn-soft-bg: initial } } .btn-accent { @layer daisyui.l1.l2 { --btn-color: var(--color-accent); --btn-fg: var(--color-accent-content); --btn-soft-bg: initial } } .btn-neutral { @layer daisyui.l1.l2 { --btn-color: var(--color-neutral); --btn-fg: var(--color-neutral-content); --btn-soft-bg: var(--color-neutral-content) 80%; --btn-rest-fg: initial } } .btn-info { @layer daisyui.l1.l2 { --btn-color: var(--color-info); --btn-fg: var(--color-info-content); --btn-soft-bg: initial } } .btn-success { @layer daisyui.l1.l2 { --btn-color: var(--color-success); --btn-fg: var(--color-success-content); --btn-soft-bg: initial } } .btn-warning { @layer daisyui.l1.l2 { --btn-color: var(--color-warning); --btn-fg: var(--color-warning-content); --btn-soft-bg: initial } } .btn-error { @layer daisyui.l1.l2 { --btn-color: var(--color-error); --btn-fg: var(--color-error-content); --btn-soft-bg: initial } } .btn-xs { @layer daisyui.l1.l2 { --fontsize: .6875rem; --btn-p: .5rem; --size: calc(var(--size-field, .25rem) * 6) } } .btn-sm { @layer daisyui.l1.l2 { --fontsize: .75rem; --btn-p: .75rem; --size: calc(var(--size-field, .25rem) * 8) } } .btn-md { @layer daisyui.l1.l2 { --fontsize: .875rem; --btn-p: 1rem; --size: calc(var(--size-field, .25rem) * 10) } } .btn-lg { @layer daisyui.l1.l2 { --fontsize: 1.125rem; --btn-p: 1.25rem; --size: calc(var(--size-field, .25rem) * 12) } } .btn-xl { @layer daisyui.l1.l2 { --fontsize: 1.375rem; --btn-p: 1.5rem; --size: calc(var(--size-field, .25rem) * 14) } } .btn-wide { @layer daisyui.l1.l2 { width: 100%; max-width: 16rem } } .btn-block { @layer daisyui.l1.l2 { width: 100% } } .btn-square { @layer daisyui.l1.l2 { width: var(--size); height: var(--size); padding-inline: 0 } } .btn-circle { @layer daisyui.l1.l2 { width: var(--size); height: var(--size); border-radius: 3.40282e38px; padding-inline: 0 } } .btn-disabled, .btn:is(:disabled, [disabled], [aria-disabled=true]) { @layer daisyui { pointer-events: none; color: color-mix(in oklch, var(--color-base-content) 20%, #0000); --btn-bg: #0000; --btn-border: #0000; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none; &:not(.btn-link, .btn-ghost) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent) } } } @media (width>=640px) { :where(.btn) { @layer daisyui.l1.l2.l3 { width: unset } } .sm\:prose :where(a.btn:not(.btn-link)):not(:where([class~=not-prose], [class~=not-prose] *)) { text-decoration-line: none } .sm\:btn { @layer daisyui.l1.l2.l3 { --size: calc(var(--size-field, .25rem) * 10); --btn-p: 1rem; --btn-fg: var(--color-base-content); cursor: pointer; text-align: center; vertical-align: middle; outline-offset: 2px; -webkit-user-select: none; user-select: none; border-width: var(--border); touch-action: manipulation; --btn-bg: var(--btn-color, var(--color-base-200)); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 calc(var(--depth) * 5%)); --btn-soft-bg: initial; --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); height: var(--size); padding-inline: var(--btn-p); font-weight: 600; font-size: var(--fontsize, .875rem); background-color: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-border); border-style: var(--btn-border-style, solid); outline-color: var(--btn-color, var(--color-base-content)); --tw-prose-links: var(--btn-fg); background-image: none, var(--fx-noise); background-size: auto, calc(var(--noise, 0) * 100%); text-shadow: 0 .5px oklch(100% 0 0 / calc(var(--depth) * .15)); box-shadow: var(--btn-inset) inset, var(--btn-shadow); border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-wrap: nowrap; flex-shrink: 0; justify-content: center; align-items: center; gap: .375rem; transition-property: color, background-color, border-color, box-shadow, transform; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); display: inline-flex; &:is([type=checkbox], [type=radio]) { appearance: none; &[aria-label]:after { --tw-content: attr(aria-label); content: var(--tw-content) } } } @layer daisyui.l1 { &:where(:checked:not(.filter [type=radio].btn)) { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content) } @media (hover:hover) { &:hover { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); color: var(--btn-fg); --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); --btn-border-style: solid; --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000) } } &:active:not(.btn-active) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); color: var(--btn-fg, var(--color-base-content)); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); translate: 0 .5px } &:where(:checked:not(.filter [type=radio].btn), :not([type=radio], [type=checkbox]):focus-visible) { --btn-bg: var(--btn-color, var(--color-base-200)); color: var(--btn-fg, var(--color-base-content)); --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); --btn-border-style: solid; --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); isolation: isolate } &:focus-visible, &:has(:focus-visible) { isolation: isolate; outline-width: 2px; outline-style: solid } } } .sm\:btn-active { @layer daisyui.l1.l2 { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); color: var(--btn-fg, var(--color-base-content)); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); isolation: isolate } } .sm\:btn-outline, .sm\:btn-dash { @layer daisyui.l1.l2.l3 { --btn-bg: #0000; color: var(--btn-rest-fg, var(--btn-color, var(--color-base-content))); --btn-border: var(--btn-color, var(--color-base-content)); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none } } .sm\:btn-dash { @layer daisyui.l1.l2.l3 { --btn-border-style: dashed } } .sm\:btn-ghost { @layer daisyui.l1.l2.l3 { --btn-bg: #0000; color: var(--btn-rest-fg, var(--btn-color, var(--color-base-content, currentColor))); --btn-border: #0000; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none } } .sm\:btn-soft { @layer daisyui.l1.l2.l3 { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 8%, var(--btn-soft-bg, var(--color-base-100))); color: var(--btn-rest-fg, var(--btn-color, var(--color-base-content))); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 10%, var(--btn-soft-bg, var(--color-base-100))); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none } } .sm\:btn-link { @layer daisyui { --btn-bg: #0000; color: var(--btn-color, var(--color-primary)); --btn-border: #0000; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none; text-decoration-line: underline } } .sm\:btn-primary { @layer daisyui.l1.l2 { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); --btn-soft-bg: initial } } .sm\:btn-secondary { @layer daisyui.l1.l2 { --btn-color: var(--color-secondary); --btn-fg: var(--color-secondary-content); --btn-soft-bg: initial } } .sm\:btn-accent { @layer daisyui.l1.l2 { --btn-color: var(--color-accent); --btn-fg: var(--color-accent-content); --btn-soft-bg: initial } } .sm\:btn-neutral { @layer daisyui.l1.l2 { --btn-color: var(--color-neutral); --btn-fg: var(--color-neutral-content); --btn-soft-bg: var(--color-neutral-content) 80%; --btn-rest-fg: initial } } .sm\:btn-info { @layer daisyui.l1.l2 { --btn-color: var(--color-info); --btn-fg: var(--color-info-content); --btn-soft-bg: initial } } .sm\:btn-success { @layer daisyui.l1.l2 { --btn-color: var(--color-success); --btn-fg: var(--color-success-content); --btn-soft-bg: initial } } .sm\:btn-warning { @layer daisyui.l1.l2 { --btn-color: var(--color-warning); --btn-fg: var(--color-warning-content); --btn-soft-bg: initial } } .sm\:btn-error { @layer daisyui.l1.l2 { --btn-color: var(--color-error); --btn-fg: var(--color-error-content); --btn-soft-bg: initial } } .sm\:btn-xs { @layer daisyui.l1.l2 { --fontsize: .6875rem; --btn-p: .5rem; --size: calc(var(--size-field, .25rem) * 6) } } .sm\:btn-sm { @layer daisyui.l1.l2 { --fontsize: .75rem; --btn-p: .75rem; --size: calc(var(--size-field, .25rem) * 8) } } .sm\:btn-md { @layer daisyui.l1.l2 { --fontsize: .875rem; --btn-p: 1rem; --size: calc(var(--size-field, .25rem) * 10) } } .sm\:btn-lg { @layer daisyui.l1.l2 { --fontsize: 1.125rem; --btn-p: 1.25rem; --size: calc(var(--size-field, .25rem) * 12) } } .sm\:btn-xl { @layer daisyui.l1.l2 { --fontsize: 1.375rem; --btn-p: 1.5rem; --size: calc(var(--size-field, .25rem) * 14) } } .sm\:btn-wide { @layer daisyui.l1.l2 { width: 100%; max-width: 16rem } } .sm\:btn-block { @layer daisyui.l1.l2 { width: 100% } } .sm\:btn-square { @layer daisyui.l1.l2 { width: var(--size); height: var(--size); padding-inline: 0 } } .sm\:btn-circle { @layer daisyui.l1.l2 { width: var(--size); height: var(--size); border-radius: 3.40282e38px; padding-inline: 0 } } .sm\:btn-disabled, .sm\:btn:is(:disabled, [disabled], [aria-disabled=true]) { @layer daisyui { pointer-events: none; color: color-mix(in oklch, var(--color-base-content) 20%, #0000); --btn-bg: #0000; --btn-border: #0000; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none; &:not(.btn-link, .btn-ghost) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent) } } } } @media (width>=768px) { :where(.btn) { @layer daisyui.l1.l2.l3 { width: unset } } .md\:prose :where(a.btn:not(.btn-link)):not(:where([class~=not-prose], [class~=not-prose] *)) { text-decoration-line: none } .md\:btn { @layer daisyui.l1.l2.l3 { --size: calc(var(--size-field, .25rem) * 10); --btn-p: 1rem; --btn-fg: var(--color-base-content); cursor: pointer; text-align: center; vertical-align: middle; outline-offset: 2px; -webkit-user-select: none; user-select: none; border-width: var(--border); touch-action: manipulation; --btn-bg: var(--btn-color, var(--color-base-200)); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 calc(var(--depth) * 5%)); --btn-soft-bg: initial; --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); height: var(--size); padding-inline: var(--btn-p); font-weight: 600; font-size: var(--fontsize, .875rem); background-color: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-border); border-style: var(--btn-border-style, solid); outline-color: var(--btn-color, var(--color-base-content)); --tw-prose-links: var(--btn-fg); background-image: none, var(--fx-noise); background-size: auto, calc(var(--noise, 0) * 100%); text-shadow: 0 .5px oklch(100% 0 0 / calc(var(--depth) * .15)); box-shadow: var(--btn-inset) inset, var(--btn-shadow); border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-wrap: nowrap; flex-shrink: 0; justify-content: center; align-items: center; gap: .375rem; transition-property: color, background-color, border-color, box-shadow, transform; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); display: inline-flex; &:is([type=checkbox], [type=radio]) { appearance: none; &[aria-label]:after { --tw-content: attr(aria-label); content: var(--tw-content) } } } @layer daisyui.l1 { &:where(:checked:not(.filter [type=radio].btn)) { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content) } @media (hover:hover) { &:hover { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); color: var(--btn-fg); --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); --btn-border-style: solid; --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000) } } &:active:not(.btn-active) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); color: var(--btn-fg, var(--color-base-content)); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); translate: 0 .5px } &:where(:checked:not(.filter [type=radio].btn), :not([type=radio], [type=checkbox]):focus-visible) { --btn-bg: var(--btn-color, var(--color-base-200)); color: var(--btn-fg, var(--color-base-content)); --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); --btn-border-style: solid; --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); isolation: isolate } &:focus-visible, &:has(:focus-visible) { isolation: isolate; outline-width: 2px; outline-style: solid } } } .md\:btn-active { @layer daisyui.l1.l2 { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); color: var(--btn-fg, var(--color-base-content)); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); isolation: isolate } } .md\:btn-outline, .md\:btn-dash { @layer daisyui.l1.l2.l3 { --btn-bg: #0000; color: var(--btn-rest-fg, var(--btn-color, var(--color-base-content))); --btn-border: var(--btn-color, var(--color-base-content)); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none } } .md\:btn-dash { @layer daisyui.l1.l2.l3 { --btn-border-style: dashed } } .md\:btn-ghost { @layer daisyui.l1.l2.l3 { --btn-bg: #0000; color: var(--btn-rest-fg, var(--btn-color, var(--color-base-content, currentColor))); --btn-border: #0000; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none } } .md\:btn-soft { @layer daisyui.l1.l2.l3 { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 8%, var(--btn-soft-bg, var(--color-base-100))); color: var(--btn-rest-fg, var(--btn-color, var(--color-base-content))); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 10%, var(--btn-soft-bg, var(--color-base-100))); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none } } .md\:btn-link { @layer daisyui { --btn-bg: #0000; color: var(--btn-color, var(--color-primary)); --btn-border: #0000; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none; text-decoration-line: underline } } .md\:btn-primary { @layer daisyui.l1.l2 { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); --btn-soft-bg: initial } } .md\:btn-secondary { @layer daisyui.l1.l2 { --btn-color: var(--color-secondary); --btn-fg: var(--color-secondary-content); --btn-soft-bg: initial } } .md\:btn-accent { @layer daisyui.l1.l2 { --btn-color: var(--color-accent); --btn-fg: var(--color-accent-content); --btn-soft-bg: initial } } .md\:btn-neutral { @layer daisyui.l1.l2 { --btn-color: var(--color-neutral); --btn-fg: var(--color-neutral-content); --btn-soft-bg: var(--color-neutral-content) 80%; --btn-rest-fg: initial } } .md\:btn-info { @layer daisyui.l1.l2 { --btn-color: var(--color-info); --btn-fg: var(--color-info-content); --btn-soft-bg: initial } } .md\:btn-success { @layer daisyui.l1.l2 { --btn-color: var(--color-success); --btn-fg: var(--color-success-content); --btn-soft-bg: initial } } .md\:btn-warning { @layer daisyui.l1.l2 { --btn-color: var(--color-warning); --btn-fg: var(--color-warning-content); --btn-soft-bg: initial } } .md\:btn-error { @layer daisyui.l1.l2 { --btn-color: var(--color-error); --btn-fg: var(--color-error-content); --btn-soft-bg: initial } } .md\:btn-xs { @layer daisyui.l1.l2 { --fontsize: .6875rem; --btn-p: .5rem; --size: calc(var(--size-field, .25rem) * 6) } } .md\:btn-sm { @layer daisyui.l1.l2 { --fontsize: .75rem; --btn-p: .75rem; --size: calc(var(--size-field, .25rem) * 8) } } .md\:btn-md { @layer daisyui.l1.l2 { --fontsize: .875rem; --btn-p: 1rem; --size: calc(var(--size-field, .25rem) * 10) } } .md\:btn-lg { @layer daisyui.l1.l2 { --fontsize: 1.125rem; --btn-p: 1.25rem; --size: calc(var(--size-field, .25rem) * 12) } } .md\:btn-xl { @layer daisyui.l1.l2 { --fontsize: 1.375rem; --btn-p: 1.5rem; --size: calc(var(--size-field, .25rem) * 14) } } .md\:btn-wide { @layer daisyui.l1.l2 { width: 100%; max-width: 16rem } } .md\:btn-block { @layer daisyui.l1.l2 { width: 100% } } .md\:btn-square { @layer daisyui.l1.l2 { width: var(--size); height: var(--size); padding-inline: 0 } } .md\:btn-circle { @layer daisyui.l1.l2 { width: var(--size); height: var(--size); border-radius: 3.40282e38px; padding-inline: 0 } } .md\:btn-disabled, .md\:btn:is(:disabled, [disabled], [aria-disabled=true]) { @layer daisyui { pointer-events: none; color: color-mix(in oklch, var(--color-base-content) 20%, #0000); --btn-bg: #0000; --btn-border: #0000; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none; &:not(.btn-link, .btn-ghost) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent) } } } } @media (width>=1024px) { :where(.btn) { @layer daisyui.l1.l2.l3 { width: unset } } .lg\:prose :where(a.btn:not(.btn-link)):not(:where([class~=not-prose], [class~=not-prose] *)) { text-decoration-line: none } .lg\:btn { @layer daisyui.l1.l2.l3 { --size: calc(var(--size-field, .25rem) * 10); --btn-p: 1rem; --btn-fg: var(--color-base-content); cursor: pointer; text-align: center; vertical-align: middle; outline-offset: 2px; -webkit-user-select: none; user-select: none; border-width: var(--border); touch-action: manipulation; --btn-bg: var(--btn-color, var(--color-base-200)); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 calc(var(--depth) * 5%)); --btn-soft-bg: initial; --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); height: var(--size); padding-inline: var(--btn-p); font-weight: 600; font-size: var(--fontsize, .875rem); background-color: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-border); border-style: var(--btn-border-style, solid); outline-color: var(--btn-color, var(--color-base-content)); --tw-prose-links: var(--btn-fg); background-image: none, var(--fx-noise); background-size: auto, calc(var(--noise, 0) * 100%); text-shadow: 0 .5px oklch(100% 0 0 / calc(var(--depth) * .15)); box-shadow: var(--btn-inset) inset, var(--btn-shadow); border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-wrap: nowrap; flex-shrink: 0; justify-content: center; align-items: center; gap: .375rem; transition-property: color, background-color, border-color, box-shadow, transform; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); display: inline-flex; &:is([type=checkbox], [type=radio]) { appearance: none; &[aria-label]:after { --tw-content: attr(aria-label); content: var(--tw-content) } } } @layer daisyui.l1 { &:where(:checked:not(.filter [type=radio].btn)) { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content) } @media (hover:hover) { &:hover { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); color: var(--btn-fg); --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); --btn-border-style: solid; --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000) } } &:active:not(.btn-active) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); color: var(--btn-fg, var(--color-base-content)); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); translate: 0 .5px } &:where(:checked:not(.filter [type=radio].btn), :not([type=radio], [type=checkbox]):focus-visible) { --btn-bg: var(--btn-color, var(--color-base-200)); color: var(--btn-fg, var(--color-base-content)); --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); --btn-border-style: solid; --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); isolation: isolate } &:focus-visible, &:has(:focus-visible) { isolation: isolate; outline-width: 2px; outline-style: solid } } } .lg\:btn-active { @layer daisyui.l1.l2 { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); color: var(--btn-fg, var(--color-base-content)); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); isolation: isolate } } .lg\:btn-outline, .lg\:btn-dash { @layer daisyui.l1.l2.l3 { --btn-bg: #0000; color: var(--btn-rest-fg, var(--btn-color, var(--color-base-content))); --btn-border: var(--btn-color, var(--color-base-content)); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none } } .lg\:btn-dash { @layer daisyui.l1.l2.l3 { --btn-border-style: dashed } } .lg\:btn-ghost { @layer daisyui.l1.l2.l3 { --btn-bg: #0000; color: var(--btn-rest-fg, var(--btn-color, var(--color-base-content, currentColor))); --btn-border: #0000; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none } } .lg\:btn-soft { @layer daisyui.l1.l2.l3 { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 8%, var(--btn-soft-bg, var(--color-base-100))); color: var(--btn-rest-fg, var(--btn-color, var(--color-base-content))); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 10%, var(--btn-soft-bg, var(--color-base-100))); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none } } .lg\:btn-link { @layer daisyui { --btn-bg: #0000; color: var(--btn-color, var(--color-primary)); --btn-border: #0000; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none; text-decoration-line: underline } } .lg\:btn-primary { @layer daisyui.l1.l2 { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); --btn-soft-bg: initial } } .lg\:btn-secondary { @layer daisyui.l1.l2 { --btn-color: var(--color-secondary); --btn-fg: var(--color-secondary-content); --btn-soft-bg: initial } } .lg\:btn-accent { @layer daisyui.l1.l2 { --btn-color: var(--color-accent); --btn-fg: var(--color-accent-content); --btn-soft-bg: initial } } .lg\:btn-neutral { @layer daisyui.l1.l2 { --btn-color: var(--color-neutral); --btn-fg: var(--color-neutral-content); --btn-soft-bg: var(--color-neutral-content) 80%; --btn-rest-fg: initial } } .lg\:btn-info { @layer daisyui.l1.l2 { --btn-color: var(--color-info); --btn-fg: var(--color-info-content); --btn-soft-bg: initial } } .lg\:btn-success { @layer daisyui.l1.l2 { --btn-color: var(--color-success); --btn-fg: var(--color-success-content); --btn-soft-bg: initial } } .lg\:btn-warning { @layer daisyui.l1.l2 { --btn-color: var(--color-warning); --btn-fg: var(--color-warning-content); --btn-soft-bg: initial } } .lg\:btn-error { @layer daisyui.l1.l2 { --btn-color: var(--color-error); --btn-fg: var(--color-error-content); --btn-soft-bg: initial } } .lg\:btn-xs { @layer daisyui.l1.l2 { --fontsize: .6875rem; --btn-p: .5rem; --size: calc(var(--size-field, .25rem) * 6) } } .lg\:btn-sm { @layer daisyui.l1.l2 { --fontsize: .75rem; --btn-p: .75rem; --size: calc(var(--size-field, .25rem) * 8) } } .lg\:btn-md { @layer daisyui.l1.l2 { --fontsize: .875rem; --btn-p: 1rem; --size: calc(var(--size-field, .25rem) * 10) } } .lg\:btn-lg { @layer daisyui.l1.l2 { --fontsize: 1.125rem; --btn-p: 1.25rem; --size: calc(var(--size-field, .25rem) * 12) } } .lg\:btn-xl { @layer daisyui.l1.l2 { --fontsize: 1.375rem; --btn-p: 1.5rem; --size: calc(var(--size-field, .25rem) * 14) } } .lg\:btn-wide { @layer daisyui.l1.l2 { width: 100%; max-width: 16rem } } .lg\:btn-block { @layer daisyui.l1.l2 { width: 100% } } .lg\:btn-square { @layer daisyui.l1.l2 { width: var(--size); height: var(--size); padding-inline: 0 } } .lg\:btn-circle { @layer daisyui.l1.l2 { width: var(--size); height: var(--size); border-radius: 3.40282e38px; padding-inline: 0 } } .lg\:btn-disabled, .lg\:btn:is(:disabled, [disabled], [aria-disabled=true]) { @layer daisyui { pointer-events: none; color: color-mix(in oklch, var(--color-base-content) 20%, #0000); --btn-bg: #0000; --btn-border: #0000; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none; &:not(.btn-link, .btn-ghost) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent) } } } } @media (width>=1280px) { :where(.btn) { @layer daisyui.l1.l2.l3 { width: unset } } .xl\:prose :where(a.btn:not(.btn-link)):not(:where([class~=not-prose], [class~=not-prose] *)) { text-decoration-line: none } .xl\:btn { @layer daisyui.l1.l2.l3 { --size: calc(var(--size-field, .25rem) * 10); --btn-p: 1rem; --btn-fg: var(--color-base-content); cursor: pointer; text-align: center; vertical-align: middle; outline-offset: 2px; -webkit-user-select: none; user-select: none; border-width: var(--border); touch-action: manipulation; --btn-bg: var(--btn-color, var(--color-base-200)); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 calc(var(--depth) * 5%)); --btn-soft-bg: initial; --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); height: var(--size); padding-inline: var(--btn-p); font-weight: 600; font-size: var(--fontsize, .875rem); background-color: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-border); border-style: var(--btn-border-style, solid); outline-color: var(--btn-color, var(--color-base-content)); --tw-prose-links: var(--btn-fg); background-image: none, var(--fx-noise); background-size: auto, calc(var(--noise, 0) * 100%); text-shadow: 0 .5px oklch(100% 0 0 / calc(var(--depth) * .15)); box-shadow: var(--btn-inset) inset, var(--btn-shadow); border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-wrap: nowrap; flex-shrink: 0; justify-content: center; align-items: center; gap: .375rem; transition-property: color, background-color, border-color, box-shadow, transform; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); display: inline-flex; &:is([type=checkbox], [type=radio]) { appearance: none; &[aria-label]:after { --tw-content: attr(aria-label); content: var(--tw-content) } } } @layer daisyui.l1 { &:where(:checked:not(.filter [type=radio].btn)) { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content) } @media (hover:hover) { &:hover { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); color: var(--btn-fg); --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); --btn-border-style: solid; --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000) } } &:active:not(.btn-active) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); color: var(--btn-fg, var(--color-base-content)); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); translate: 0 .5px } &:where(:checked:not(.filter [type=radio].btn), :not([type=radio], [type=checkbox]):focus-visible) { --btn-bg: var(--btn-color, var(--color-base-200)); color: var(--btn-fg, var(--color-base-content)); --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); --btn-border-style: solid; --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); isolation: isolate } &:focus-visible, &:has(:focus-visible) { isolation: isolate; outline-width: 2px; outline-style: solid } } } .xl\:btn-active { @layer daisyui.l1.l2 { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); color: var(--btn-fg, var(--color-base-content)); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); isolation: isolate } } .xl\:btn-outline, .xl\:btn-dash { @layer daisyui.l1.l2.l3 { --btn-bg: #0000; color: var(--btn-rest-fg, var(--btn-color, var(--color-base-content))); --btn-border: var(--btn-color, var(--color-base-content)); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none } } .xl\:btn-dash { @layer daisyui.l1.l2.l3 { --btn-border-style: dashed } } .xl\:btn-ghost { @layer daisyui.l1.l2.l3 { --btn-bg: #0000; color: var(--btn-rest-fg, var(--btn-color, var(--color-base-content, currentColor))); --btn-border: #0000; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none } } .xl\:btn-soft { @layer daisyui.l1.l2.l3 { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 8%, var(--btn-soft-bg, var(--color-base-100))); color: var(--btn-rest-fg, var(--btn-color, var(--color-base-content))); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 10%, var(--btn-soft-bg, var(--color-base-100))); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none } } .xl\:btn-link { @layer daisyui { --btn-bg: #0000; color: var(--btn-color, var(--color-primary)); --btn-border: #0000; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none; text-decoration-line: underline } } .xl\:btn-primary { @layer daisyui.l1.l2 { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); --btn-soft-bg: initial } } .xl\:btn-secondary { @layer daisyui.l1.l2 { --btn-color: var(--color-secondary); --btn-fg: var(--color-secondary-content); --btn-soft-bg: initial } } .xl\:btn-accent { @layer daisyui.l1.l2 { --btn-color: var(--color-accent); --btn-fg: var(--color-accent-content); --btn-soft-bg: initial } } .xl\:btn-neutral { @layer daisyui.l1.l2 { --btn-color: var(--color-neutral); --btn-fg: var(--color-neutral-content); --btn-soft-bg: var(--color-neutral-content) 80%; --btn-rest-fg: initial } } .xl\:btn-info { @layer daisyui.l1.l2 { --btn-color: var(--color-info); --btn-fg: var(--color-info-content); --btn-soft-bg: initial } } .xl\:btn-success { @layer daisyui.l1.l2 { --btn-color: var(--color-success); --btn-fg: var(--color-success-content); --btn-soft-bg: initial } } .xl\:btn-warning { @layer daisyui.l1.l2 { --btn-color: var(--color-warning); --btn-fg: var(--color-warning-content); --btn-soft-bg: initial } } .xl\:btn-error { @layer daisyui.l1.l2 { --btn-color: var(--color-error); --btn-fg: var(--color-error-content); --btn-soft-bg: initial } } .xl\:btn-xs { @layer daisyui.l1.l2 { --fontsize: .6875rem; --btn-p: .5rem; --size: calc(var(--size-field, .25rem) * 6) } } .xl\:btn-sm { @layer daisyui.l1.l2 { --fontsize: .75rem; --btn-p: .75rem; --size: calc(var(--size-field, .25rem) * 8) } } .xl\:btn-md { @layer daisyui.l1.l2 { --fontsize: .875rem; --btn-p: 1rem; --size: calc(var(--size-field, .25rem) * 10) } } .xl\:btn-lg { @layer daisyui.l1.l2 { --fontsize: 1.125rem; --btn-p: 1.25rem; --size: calc(var(--size-field, .25rem) * 12) } } .xl\:btn-xl { @layer daisyui.l1.l2 { --fontsize: 1.375rem; --btn-p: 1.5rem; --size: calc(var(--size-field, .25rem) * 14) } } .xl\:btn-wide { @layer daisyui.l1.l2 { width: 100%; max-width: 16rem } } .xl\:btn-block { @layer daisyui.l1.l2 { width: 100% } } .xl\:btn-square { @layer daisyui.l1.l2 { width: var(--size); height: var(--size); padding-inline: 0 } } .xl\:btn-circle { @layer daisyui.l1.l2 { width: var(--size); height: var(--size); border-radius: 3.40282e38px; padding-inline: 0 } } .xl\:btn-disabled, .xl\:btn:is(:disabled, [disabled], [aria-disabled=true]) { @layer daisyui { pointer-events: none; color: color-mix(in oklch, var(--color-base-content) 20%, #0000); --btn-bg: #0000; --btn-border: #0000; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none; &:not(.btn-link, .btn-ghost) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent) } } } } @media (width>=1536px) { :where(.btn) { @layer daisyui.l1.l2.l3 { width: unset } } .\32 xl\:prose :where(a.btn:not(.btn-link)):not(:where([class~=not-prose], [class~=not-prose] *)) { text-decoration-line: none } .\32 xl\:btn { @layer daisyui.l1.l2.l3 { --size: calc(var(--size-field, .25rem) * 10); --btn-p: 1rem; --btn-fg: var(--color-base-content); cursor: pointer; text-align: center; vertical-align: middle; outline-offset: 2px; -webkit-user-select: none; user-select: none; border-width: var(--border); touch-action: manipulation; --btn-bg: var(--btn-color, var(--color-base-200)); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 calc(var(--depth) * 5%)); --btn-soft-bg: initial; --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); height: var(--size); padding-inline: var(--btn-p); font-weight: 600; font-size: var(--fontsize, .875rem); background-color: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-border); border-style: var(--btn-border-style, solid); outline-color: var(--btn-color, var(--color-base-content)); --tw-prose-links: var(--btn-fg); background-image: none, var(--fx-noise); background-size: auto, calc(var(--noise, 0) * 100%); text-shadow: 0 .5px oklch(100% 0 0 / calc(var(--depth) * .15)); box-shadow: var(--btn-inset) inset, var(--btn-shadow); border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-wrap: nowrap; flex-shrink: 0; justify-content: center; align-items: center; gap: .375rem; transition-property: color, background-color, border-color, box-shadow, transform; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); display: inline-flex; &:is([type=checkbox], [type=radio]) { appearance: none; &[aria-label]:after { --tw-content: attr(aria-label); content: var(--tw-content) } } } @layer daisyui.l1 { &:where(:checked:not(.filter [type=radio].btn)) { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content) } @media (hover:hover) { &:hover { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); color: var(--btn-fg); --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); --btn-border-style: solid; --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000) } } &:active:not(.btn-active) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); color: var(--btn-fg, var(--color-base-content)); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); translate: 0 .5px } &:where(:checked:not(.filter [type=radio].btn), :not([type=radio], [type=checkbox]):focus-visible) { --btn-bg: var(--btn-color, var(--color-base-200)); color: var(--btn-fg, var(--color-base-content)); --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); --btn-border-style: solid; --btn-inset: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)); --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); isolation: isolate } &:focus-visible, &:has(:focus-visible) { isolation: isolate; outline-width: 2px; outline-style: solid } } } .\32 xl\:btn-active { @layer daisyui.l1.l2 { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); color: var(--btn-fg, var(--color-base-content)); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); isolation: isolate } } .\32 xl\:btn-outline, .\32 xl\:btn-dash { @layer daisyui.l1.l2.l3 { --btn-bg: #0000; color: var(--btn-rest-fg, var(--btn-color, var(--color-base-content))); --btn-border: var(--btn-color, var(--color-base-content)); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none } } .\32 xl\:btn-dash { @layer daisyui.l1.l2.l3 { --btn-border-style: dashed } } .\32 xl\:btn-ghost { @layer daisyui.l1.l2.l3 { --btn-bg: #0000; color: var(--btn-rest-fg, var(--btn-color, var(--color-base-content, currentColor))); --btn-border: #0000; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none } } .\32 xl\:btn-soft { @layer daisyui.l1.l2.l3 { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 8%, var(--btn-soft-bg, var(--color-base-100))); color: var(--btn-rest-fg, var(--btn-color, var(--color-base-content))); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 10%, var(--btn-soft-bg, var(--color-base-100))); --btn-border-style: solid; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none } } .\32 xl\:btn-link { @layer daisyui { --btn-bg: #0000; color: var(--btn-color, var(--color-primary)); --btn-border: #0000; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none; text-decoration-line: underline } } .\32 xl\:btn-primary { @layer daisyui.l1.l2 { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); --btn-soft-bg: initial } } .\32 xl\:btn-secondary { @layer daisyui.l1.l2 { --btn-color: var(--color-secondary); --btn-fg: var(--color-secondary-content); --btn-soft-bg: initial } } .\32 xl\:btn-accent { @layer daisyui.l1.l2 { --btn-color: var(--color-accent); --btn-fg: var(--color-accent-content); --btn-soft-bg: initial } } .\32 xl\:btn-neutral { @layer daisyui.l1.l2 { --btn-color: var(--color-neutral); --btn-fg: var(--color-neutral-content); --btn-soft-bg: var(--color-neutral-content) 80%; --btn-rest-fg: initial } } .\32 xl\:btn-info { @layer daisyui.l1.l2 { --btn-color: var(--color-info); --btn-fg: var(--color-info-content); --btn-soft-bg: initial } } .\32 xl\:btn-success { @layer daisyui.l1.l2 { --btn-color: var(--color-success); --btn-fg: var(--color-success-content); --btn-soft-bg: initial } } .\32 xl\:btn-warning { @layer daisyui.l1.l2 { --btn-color: var(--color-warning); --btn-fg: var(--color-warning-content); --btn-soft-bg: initial } } .\32 xl\:btn-error { @layer daisyui.l1.l2 { --btn-color: var(--color-error); --btn-fg: var(--color-error-content); --btn-soft-bg: initial } } .\32 xl\:btn-xs { @layer daisyui.l1.l2 { --fontsize: .6875rem; --btn-p: .5rem; --size: calc(var(--size-field, .25rem) * 6) } } .\32 xl\:btn-sm { @layer daisyui.l1.l2 { --fontsize: .75rem; --btn-p: .75rem; --size: calc(var(--size-field, .25rem) * 8) } } .\32 xl\:btn-md { @layer daisyui.l1.l2 { --fontsize: .875rem; --btn-p: 1rem; --size: calc(var(--size-field, .25rem) * 10) } } .\32 xl\:btn-lg { @layer daisyui.l1.l2 { --fontsize: 1.125rem; --btn-p: 1.25rem; --size: calc(var(--size-field, .25rem) * 12) } } .\32 xl\:btn-xl { @layer daisyui.l1.l2 { --fontsize: 1.375rem; --btn-p: 1.5rem; --size: calc(var(--size-field, .25rem) * 14) } } .\32 xl\:btn-wide { @layer daisyui.l1.l2 { width: 100%; max-width: 16rem } } .\32 xl\:btn-block { @layer daisyui.l1.l2 { width: 100% } } .\32 xl\:btn-square { @layer daisyui.l1.l2 { width: var(--size); height: var(--size); padding-inline: 0 } } .\32 xl\:btn-circle { @layer daisyui.l1.l2 { width: var(--size); height: var(--size); border-radius: 3.40282e38px; padding-inline: 0 } } .\32 xl\:btn-disabled, .\32 xl\:btn:is(:disabled, [disabled], [aria-disabled=true]) { @layer daisyui { pointer-events: none; color: color-mix(in oklch, var(--color-base-content) 20%, #0000); --btn-bg: #0000; --btn-border: #0000; --btn-inset: 0 0 0 0 oklch(0% 0 0/0); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); background-image: none; &:not(.btn-link, .btn-ghost) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent) } } } } .kbd { box-shadow: none; @layer daisyui.l1.l2.l3 { border-radius: var(--radius-field); background-color: var(--color-base-200); vertical-align: middle; color: var(--color-base-content); border: var(--border) solid color-mix(in srgb, var(--color-base-content) 20%, #0000); border-bottom: calc(var(--border) + 1px) solid color-mix(in srgb, var(--color-base-content) 20%, #0000); --size: calc(var(--size-selector, .25rem) * 6); height: var(--size); min-width: var(--size); justify-content: center; align-items: center; padding-inline: .5em; font-size: .875rem; display: inline-flex } } .kbd-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 4); font-size: .625rem } } .kbd-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 5); font-size: .75rem } } .kbd-md { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 6); font-size: .875rem } } .kbd-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 7); font-size: 1rem } } .kbd-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 8); font-size: 1.125rem } } @media (width>=640px) { .sm\:kbd { box-shadow: none; @layer daisyui.l1.l2.l3 { border-radius: var(--radius-field); background-color: var(--color-base-200); vertical-align: middle; color: var(--color-base-content); border: var(--border) solid color-mix(in srgb, var(--color-base-content) 20%, #0000); border-bottom: calc(var(--border) + 1px) solid color-mix(in srgb, var(--color-base-content) 20%, #0000); --size: calc(var(--size-selector, .25rem) * 6); height: var(--size); min-width: var(--size); justify-content: center; align-items: center; padding-inline: .5em; font-size: .875rem; display: inline-flex } } .sm\:kbd-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 4); font-size: .625rem } } .sm\:kbd-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 5); font-size: .75rem } } .sm\:kbd-md { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 6); font-size: .875rem } } .sm\:kbd-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 7); font-size: 1rem } } .sm\:kbd-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 8); font-size: 1.125rem } } } @media (width>=768px) { .md\:kbd { box-shadow: none; @layer daisyui.l1.l2.l3 { border-radius: var(--radius-field); background-color: var(--color-base-200); vertical-align: middle; color: var(--color-base-content); border: var(--border) solid color-mix(in srgb, var(--color-base-content) 20%, #0000); border-bottom: calc(var(--border) + 1px) solid color-mix(in srgb, var(--color-base-content) 20%, #0000); --size: calc(var(--size-selector, .25rem) * 6); height: var(--size); min-width: var(--size); justify-content: center; align-items: center; padding-inline: .5em; font-size: .875rem; display: inline-flex } } .md\:kbd-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 4); font-size: .625rem } } .md\:kbd-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 5); font-size: .75rem } } .md\:kbd-md { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 6); font-size: .875rem } } .md\:kbd-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 7); font-size: 1rem } } .md\:kbd-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 8); font-size: 1.125rem } } } @media (width>=1024px) { .lg\:kbd { box-shadow: none; @layer daisyui.l1.l2.l3 { border-radius: var(--radius-field); background-color: var(--color-base-200); vertical-align: middle; color: var(--color-base-content); border: var(--border) solid color-mix(in srgb, var(--color-base-content) 20%, #0000); border-bottom: calc(var(--border) + 1px) solid color-mix(in srgb, var(--color-base-content) 20%, #0000); --size: calc(var(--size-selector, .25rem) * 6); height: var(--size); min-width: var(--size); justify-content: center; align-items: center; padding-inline: .5em; font-size: .875rem; display: inline-flex } } .lg\:kbd-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 4); font-size: .625rem } } .lg\:kbd-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 5); font-size: .75rem } } .lg\:kbd-md { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 6); font-size: .875rem } } .lg\:kbd-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 7); font-size: 1rem } } .lg\:kbd-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 8); font-size: 1.125rem } } } @media (width>=1280px) { .xl\:kbd { box-shadow: none; @layer daisyui.l1.l2.l3 { border-radius: var(--radius-field); background-color: var(--color-base-200); vertical-align: middle; color: var(--color-base-content); border: var(--border) solid color-mix(in srgb, var(--color-base-content) 20%, #0000); border-bottom: calc(var(--border) + 1px) solid color-mix(in srgb, var(--color-base-content) 20%, #0000); --size: calc(var(--size-selector, .25rem) * 6); height: var(--size); min-width: var(--size); justify-content: center; align-items: center; padding-inline: .5em; font-size: .875rem; display: inline-flex } } .xl\:kbd-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 4); font-size: .625rem } } .xl\:kbd-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 5); font-size: .75rem } } .xl\:kbd-md { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 6); font-size: .875rem } } .xl\:kbd-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 7); font-size: 1rem } } .xl\:kbd-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 8); font-size: 1.125rem } } } @media (width>=1536px) { .\32 xl\:kbd { box-shadow: none; @layer daisyui.l1.l2.l3 { border-radius: var(--radius-field); background-color: var(--color-base-200); vertical-align: middle; color: var(--color-base-content); border: var(--border) solid color-mix(in srgb, var(--color-base-content) 20%, #0000); border-bottom: calc(var(--border) + 1px) solid color-mix(in srgb, var(--color-base-content) 20%, #0000); --size: calc(var(--size-selector, .25rem) * 6); height: var(--size); min-width: var(--size); justify-content: center; align-items: center; padding-inline: .5em; font-size: .875rem; display: inline-flex } } .\32 xl\:kbd-xs { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 4); font-size: .625rem } } .\32 xl\:kbd-sm { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 5); font-size: .75rem } } .\32 xl\:kbd-md { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 6); font-size: .875rem } } .\32 xl\:kbd-lg { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 7); font-size: 1rem } } .\32 xl\:kbd-xl { @layer daisyui.l1.l2 { --size: calc(var(--size-selector, .25rem) * 8); font-size: 1.125rem } } } .navbar { @layer daisyui.l1.l2.l3 { align-items: center; width: 100%; min-height: 4rem; padding: .5rem; display: flex } } :where(.navbar) { @layer daisyui.l1.l2 { position: relative } } .navbar-start { @layer daisyui.l1.l2.l3 { justify-content: flex-start; align-items: center; width: 50%; display: inline-flex } } .navbar-center { @layer daisyui.l1.l2.l3 { flex-shrink: 0; align-items: center; display: inline-flex } } .navbar-end { @layer daisyui.l1.l2.l3 { justify-content: flex-end; align-items: center; width: 50%; display: inline-flex } } @media (width>=640px) { .sm\:navbar { @layer daisyui.l1.l2.l3 { align-items: center; width: 100%; min-height: 4rem; padding: .5rem; display: flex } } :where(.navbar) { @layer daisyui.l1.l2 { position: relative } } .sm\:navbar-start { @layer daisyui.l1.l2.l3 { justify-content: flex-start; align-items: center; width: 50%; display: inline-flex } } .sm\:navbar-center { @layer daisyui.l1.l2.l3 { flex-shrink: 0; align-items: center; display: inline-flex } } .sm\:navbar-end { @layer daisyui.l1.l2.l3 { justify-content: flex-end; align-items: center; width: 50%; display: inline-flex } } } @media (width>=768px) { .md\:navbar { @layer daisyui.l1.l2.l3 { align-items: center; width: 100%; min-height: 4rem; padding: .5rem; display: flex } } :where(.navbar) { @layer daisyui.l1.l2 { position: relative } } .md\:navbar-start { @layer daisyui.l1.l2.l3 { justify-content: flex-start; align-items: center; width: 50%; display: inline-flex } } .md\:navbar-center { @layer daisyui.l1.l2.l3 { flex-shrink: 0; align-items: center; display: inline-flex } } .md\:navbar-end { @layer daisyui.l1.l2.l3 { justify-content: flex-end; align-items: center; width: 50%; display: inline-flex } } } @media (width>=1024px) { .lg\:navbar { @layer daisyui.l1.l2.l3 { align-items: center; width: 100%; min-height: 4rem; padding: .5rem; display: flex } } :where(.navbar) { @layer daisyui.l1.l2 { position: relative } } .lg\:navbar-start { @layer daisyui.l1.l2.l3 { justify-content: flex-start; align-items: center; width: 50%; display: inline-flex } } .lg\:navbar-center { @layer daisyui.l1.l2.l3 { flex-shrink: 0; align-items: center; display: inline-flex } } .lg\:navbar-end { @layer daisyui.l1.l2.l3 { justify-content: flex-end; align-items: center; width: 50%; display: inline-flex } } } @media (width>=1280px) { .xl\:navbar { @layer daisyui.l1.l2.l3 { align-items: center; width: 100%; min-height: 4rem; padding: .5rem; display: flex } } :where(.navbar) { @layer daisyui.l1.l2 { position: relative } } .xl\:navbar-start { @layer daisyui.l1.l2.l3 { justify-content: flex-start; align-items: center; width: 50%; display: inline-flex } } .xl\:navbar-center { @layer daisyui.l1.l2.l3 { flex-shrink: 0; align-items: center; display: inline-flex } } .xl\:navbar-end { @layer daisyui.l1.l2.l3 { justify-content: flex-end; align-items: center; width: 50%; display: inline-flex } } } @media (width>=1536px) { .\32 xl\:navbar { @layer daisyui.l1.l2.l3 { align-items: center; width: 100%; min-height: 4rem; padding: .5rem; display: flex } } :where(.navbar) { @layer daisyui.l1.l2 { position: relative } } .\32 xl\:navbar-start { @layer daisyui.l1.l2.l3 { justify-content: flex-start; align-items: center; width: 50%; display: inline-flex } } .\32 xl\:navbar-center { @layer daisyui.l1.l2.l3 { flex-shrink: 0; align-items: center; display: inline-flex } } .\32 xl\:navbar-end { @layer daisyui.l1.l2.l3 { justify-content: flex-end; align-items: center; width: 50%; display: inline-flex } } } .divider { @layer daisyui.l1.l2.l3 { white-space: nowrap; height: 1rem; margin: var(--divider-m, 1rem 0); --divider-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); flex-direction: row; align-self: stretch; align-items: center; display: flex; &:before, &:after { content: ""; background-color: var(--divider-color); flex-grow: 1; width: 100%; height: .125rem } @media print { &:before, &:after { border: .5px solid } } &:not(:empty) { gap: 1rem } } } .divider-horizontal { @layer daisyui.l1.l2 { --divider-m: 0 1rem; &.divider { flex-direction: column; width: 1rem; height: auto; &:before, &:after { width: .125rem; height: 100% } } } } .divider-vertical { @layer daisyui.l1.l2 { --divider-m: 1rem 0; &.divider { flex-direction: row; width: auto; height: 1rem; &:before, &:after { width: 100%; height: .125rem } } } } .divider-neutral { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-neutral) } } } .divider-primary { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-primary) } } } .divider-secondary { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-secondary) } } } .divider-accent { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-accent) } } } .divider-success { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-success) } } } .divider-warning { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-warning) } } } .divider-info { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-info) } } } .divider-error { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-error) } } } .divider-start:before { @layer daisyui.l1.l2 { display: none } } .divider-end:after { @layer daisyui.l1.l2 { display: none } } @media (width>=640px) { .sm\:divider { @layer daisyui.l1.l2.l3 { white-space: nowrap; height: 1rem; margin: var(--divider-m, 1rem 0); --divider-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); flex-direction: row; align-self: stretch; align-items: center; display: flex; &:before, &:after { content: ""; background-color: var(--divider-color); flex-grow: 1; width: 100%; height: .125rem } @media print { &:before, &:after { border: .5px solid } } &:not(:empty) { gap: 1rem } } } .sm\:divider-horizontal { @layer daisyui.l1.l2 { --divider-m: 0 1rem; &.divider { flex-direction: column; width: 1rem; height: auto; &:before, &:after { width: .125rem; height: 100% } } } } .sm\:divider-vertical { @layer daisyui.l1.l2 { --divider-m: 1rem 0; &.divider { flex-direction: row; width: auto; height: 1rem; &:before, &:after { width: 100%; height: .125rem } } } } .sm\:divider-neutral { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-neutral) } } } .sm\:divider-primary { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-primary) } } } .sm\:divider-secondary { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-secondary) } } } .sm\:divider-accent { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-accent) } } } .sm\:divider-success { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-success) } } } .sm\:divider-warning { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-warning) } } } .sm\:divider-info { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-info) } } } .sm\:divider-error { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-error) } } } .sm\:divider-start:before { @layer daisyui.l1.l2 { display: none } } .sm\:divider-end:after { @layer daisyui.l1.l2 { display: none } } } @media (width>=768px) { .md\:divider { @layer daisyui.l1.l2.l3 { white-space: nowrap; height: 1rem; margin: var(--divider-m, 1rem 0); --divider-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); flex-direction: row; align-self: stretch; align-items: center; display: flex; &:before, &:after { content: ""; background-color: var(--divider-color); flex-grow: 1; width: 100%; height: .125rem } @media print { &:before, &:after { border: .5px solid } } &:not(:empty) { gap: 1rem } } } .md\:divider-horizontal { @layer daisyui.l1.l2 { --divider-m: 0 1rem; &.divider { flex-direction: column; width: 1rem; height: auto; &:before, &:after { width: .125rem; height: 100% } } } } .md\:divider-vertical { @layer daisyui.l1.l2 { --divider-m: 1rem 0; &.divider { flex-direction: row; width: auto; height: 1rem; &:before, &:after { width: 100%; height: .125rem } } } } .md\:divider-neutral { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-neutral) } } } .md\:divider-primary { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-primary) } } } .md\:divider-secondary { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-secondary) } } } .md\:divider-accent { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-accent) } } } .md\:divider-success { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-success) } } } .md\:divider-warning { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-warning) } } } .md\:divider-info { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-info) } } } .md\:divider-error { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-error) } } } .md\:divider-start:before { @layer daisyui.l1.l2 { display: none } } .md\:divider-end:after { @layer daisyui.l1.l2 { display: none } } } @media (width>=1024px) { .lg\:divider { @layer daisyui.l1.l2.l3 { white-space: nowrap; height: 1rem; margin: var(--divider-m, 1rem 0); --divider-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); flex-direction: row; align-self: stretch; align-items: center; display: flex; &:before, &:after { content: ""; background-color: var(--divider-color); flex-grow: 1; width: 100%; height: .125rem } @media print { &:before, &:after { border: .5px solid } } &:not(:empty) { gap: 1rem } } } .lg\:divider-horizontal { @layer daisyui.l1.l2 { --divider-m: 0 1rem; &.divider { flex-direction: column; width: 1rem; height: auto; &:before, &:after { width: .125rem; height: 100% } } } } .lg\:divider-vertical { @layer daisyui.l1.l2 { --divider-m: 1rem 0; &.divider { flex-direction: row; width: auto; height: 1rem; &:before, &:after { width: 100%; height: .125rem } } } } .lg\:divider-neutral { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-neutral) } } } .lg\:divider-primary { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-primary) } } } .lg\:divider-secondary { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-secondary) } } } .lg\:divider-accent { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-accent) } } } .lg\:divider-success { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-success) } } } .lg\:divider-warning { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-warning) } } } .lg\:divider-info { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-info) } } } .lg\:divider-error { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-error) } } } .lg\:divider-start:before { @layer daisyui.l1.l2 { display: none } } .lg\:divider-end:after { @layer daisyui.l1.l2 { display: none } } } @media (width>=1280px) { .xl\:divider { @layer daisyui.l1.l2.l3 { white-space: nowrap; height: 1rem; margin: var(--divider-m, 1rem 0); --divider-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); flex-direction: row; align-self: stretch; align-items: center; display: flex; &:before, &:after { content: ""; background-color: var(--divider-color); flex-grow: 1; width: 100%; height: .125rem } @media print { &:before, &:after { border: .5px solid } } &:not(:empty) { gap: 1rem } } } .xl\:divider-horizontal { @layer daisyui.l1.l2 { --divider-m: 0 1rem; &.divider { flex-direction: column; width: 1rem; height: auto; &:before, &:after { width: .125rem; height: 100% } } } } .xl\:divider-vertical { @layer daisyui.l1.l2 { --divider-m: 1rem 0; &.divider { flex-direction: row; width: auto; height: 1rem; &:before, &:after { width: 100%; height: .125rem } } } } .xl\:divider-neutral { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-neutral) } } } .xl\:divider-primary { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-primary) } } } .xl\:divider-secondary { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-secondary) } } } .xl\:divider-accent { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-accent) } } } .xl\:divider-success { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-success) } } } .xl\:divider-warning { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-warning) } } } .xl\:divider-info { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-info) } } } .xl\:divider-error { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-error) } } } .xl\:divider-start:before { @layer daisyui.l1.l2 { display: none } } .xl\:divider-end:after { @layer daisyui.l1.l2 { display: none } } } @media (width>=1536px) { .\32 xl\:divider { @layer daisyui.l1.l2.l3 { white-space: nowrap; height: 1rem; margin: var(--divider-m, 1rem 0); --divider-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); flex-direction: row; align-self: stretch; align-items: center; display: flex; &:before, &:after { content: ""; background-color: var(--divider-color); flex-grow: 1; width: 100%; height: .125rem } @media print { &:before, &:after { border: .5px solid } } &:not(:empty) { gap: 1rem } } } .\32 xl\:divider-horizontal { @layer daisyui.l1.l2 { --divider-m: 0 1rem; &.divider { flex-direction: column; width: 1rem; height: auto; &:before, &:after { width: .125rem; height: 100% } } } } .\32 xl\:divider-vertical { @layer daisyui.l1.l2 { --divider-m: 1rem 0; &.divider { flex-direction: row; width: auto; height: 1rem; &:before, &:after { width: 100%; height: .125rem } } } } .\32 xl\:divider-neutral { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-neutral) } } } .\32 xl\:divider-primary { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-primary) } } } .\32 xl\:divider-secondary { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-secondary) } } } .\32 xl\:divider-accent { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-accent) } } } .\32 xl\:divider-success { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-success) } } } .\32 xl\:divider-warning { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-warning) } } } .\32 xl\:divider-info { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-info) } } } .\32 xl\:divider-error { @layer daisyui.l1.l2 { &:before, &:after { background-color: var(--color-error) } } } .\32 xl\:divider-start:before { @layer daisyui.l1.l2 { display: none } } .\32 xl\:divider-end:after { @layer daisyui.l1.l2 { display: none } } } .loading { @layer daisyui.l1.l2.l3 { pointer-events: none; aspect-ratio: 1; vertical-align: middle; width: calc(var(--size-selector, .25rem) * 6); background-color: currentColor; display: inline-block; mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='8s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='6s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='6s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); mask-position: 50%; mask-size: 100%; mask-repeat: no-repeat; @media (prefers-reduced-motion:no-preference) { mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E") } } } .loading-spinner { @layer daisyui.l1.l2 { mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='8s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='6s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='6s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); @media (prefers-reduced-motion:no-preference) { mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E") } } } .loading-dots { @layer daisyui.l1.l2 { mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='3s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='3s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.1s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='3s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.2s'/%3E%3C/circle%3E%3C/svg%3E"); @media (prefers-reduced-motion:no-preference) { mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.1s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.2s'/%3E%3C/circle%3E%3C/svg%3E") } } } .loading-ring { @layer daisyui.l1.l2 { mask-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='white'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='5.4s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='5.4s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='5.4s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='5.4s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); @media (prefers-reduced-motion:no-preference) { mask-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='white'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E") } } } .loading-ball { @layer daisyui.l1.l2 { mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='5' rx='4' ry='4'%3E%3Canimate attributeName='cy' values='5;20;20.5;20;5' keyTimes='0;0.469;0.5;0.531;1' dur='2s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3Canimate attributeName='rx' values='4;4;4.8;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='ry' values='4;4;3;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='2s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/svg%3E"); @media (prefers-reduced-motion:no-preference) { mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='5' rx='4' ry='4'%3E%3Canimate attributeName='cy' values='5;20;20.5;20;5' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3Canimate attributeName='rx' values='4;4;4.8;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='ry' values='4;4;3;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/svg%3E") } } } .loading-bars { @layer daisyui.l1.l2 { mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='2.4s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='2.4s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='2.4s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='2.4s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='2.4s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='2.4s' repeatCount='indefinite' begin='-0.65s'/%3E%3C/rect%3E%3Crect x='17' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='2.4s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='2.4s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='2.4s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/rect%3E%3C/svg%3E"); @media (prefers-reduced-motion:no-preference) { mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3C/rect%3E%3Crect x='17' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/rect%3E%3C/svg%3E") } } } .loading-infinity { @layer daisyui.l1.l2 { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering:auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='black' stroke-width='10' stroke-dasharray='205.271 51.318' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='6s' keyTimes='0;1' values='0;256.589'/%3E%3C/path%3E%3C/svg%3E"); @media (prefers-reduced-motion:no-preference) { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering:auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='black' stroke-width='10' stroke-dasharray='205.271 51.318' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.589'/%3E%3C/path%3E%3C/svg%3E") } } } .loading-xs { @layer daisyui.l1.l2 { width: calc(var(--size-selector, .25rem) * 4) } } .loading-sm { @layer daisyui.l1.l2 { width: calc(var(--size-selector, .25rem) * 5) } } .loading-md { @layer daisyui.l1.l2 { width: calc(var(--size-selector, .25rem) * 6) } } .loading-lg { @layer daisyui.l1.l2 { width: calc(var(--size-selector, .25rem) * 7) } } .loading-xl { @layer daisyui.l1.l2 { width: calc(var(--size-selector, .25rem) * 8) } } .textarea { @layer daisyui.l1.l2.l3 { appearance: none; border-radius: var(--radius-field); background-color: var(--color-base-100); vertical-align: middle; --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); width: clamp(3rem, 20rem, 100%); min-height: 5rem; font-size: max(var(--font-size, 0rem), var(--font-size-min)); touch-action: manipulation; border: var(--border) solid var(--input-color, #0000); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; flex-shrink: 1; padding-block: .5rem; padding-inline: .75rem; & textarea { appearance: none; background-color: #0000; border: none; &::placeholder { color: var(--color-base-content); opacity: .5 } &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } } &:focus, &:focus-within { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate } @media (pointer:coarse) { @supports (-webkit-touch-callout:none) { &:focus, &:focus-within { --font-size: 1rem } } } &:has(>textarea[disabled]), &:is(:disabled, [disabled]) { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); color: color-mix(in oklab, var(--color-base-content) 40%, transparent); box-shadow: none; &::placeholder, & ::placeholder { color: var(--color-base-content); opacity: .2 } } &:has(>textarea[disabled])>textarea[disabled] { cursor: not-allowed } } } .textarea-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; &:focus, &:focus-within { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } } } .textarea-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .textarea-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .textarea-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .textarea-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .textarea-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .textarea-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .textarea-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .textarea-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-error) } } } .textarea-xs { @layer daisyui.l1.l2 { --font-size-min: .6875rem; .floating-label:has(&) { --top-mul: 3; --font-size: .6875rem } } } .textarea-sm { @layer daisyui.l1.l2 { --font-size-min: .75rem; .floating-label:has(&) { --top-mul: 4; --font-size: .75rem } } } .textarea, .textarea-md { @layer daisyui.l1.l2 { --font-size-min: .875rem; .floating-label:has(&) { --top-mul: 5; --font-size: .875rem } } } .textarea-lg { @layer daisyui.l1.l2 { --font-size-min: 1.125rem; .floating-label:has(&) { --top-mul: 6; --font-size: 1.125rem } } } .textarea-xl { @layer daisyui.l1.l2 { --font-size-min: 1.375rem; .floating-label:has(&) { --top-mul: 7; --font-size: 1.375rem } } } @media (width>=640px) { .sm\:textarea { @layer daisyui.l1.l2.l3 { appearance: none; border-radius: var(--radius-field); background-color: var(--color-base-100); vertical-align: middle; --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); width: clamp(3rem, 20rem, 100%); min-height: 5rem; font-size: max(var(--font-size, 0rem), var(--font-size-min)); touch-action: manipulation; border: var(--border) solid var(--input-color, #0000); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; flex-shrink: 1; padding-block: .5rem; padding-inline: .75rem; & textarea { appearance: none; background-color: #0000; border: none; &::placeholder { color: var(--color-base-content); opacity: .5 } &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } } &:focus, &:focus-within { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate } @media (pointer:coarse) { @supports (-webkit-touch-callout:none) { &:focus, &:focus-within { --font-size: 1rem } } } &:has(>textarea[disabled]), &:is(:disabled, [disabled]) { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); color: color-mix(in oklab, var(--color-base-content) 40%, transparent); box-shadow: none; &::placeholder, & ::placeholder { color: var(--color-base-content); opacity: .2 } } &:has(>textarea[disabled])>textarea[disabled] { cursor: not-allowed } } } .sm\:textarea-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; &:focus, &:focus-within { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } } } .sm\:textarea-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .sm\:textarea-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .sm\:textarea-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .sm\:textarea-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .sm\:textarea-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .sm\:textarea-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .sm\:textarea-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .sm\:textarea-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-error) } } } .sm\:textarea-xs { @layer daisyui.l1.l2 { --font-size-min: .6875rem; .floating-label:has(&) { --top-mul: 3; --font-size: .6875rem } } } .sm\:textarea-sm { @layer daisyui.l1.l2 { --font-size-min: .75rem; .floating-label:has(&) { --top-mul: 4; --font-size: .75rem } } } .sm\:textarea, .sm\:textarea-md { @layer daisyui.l1.l2 { --font-size-min: .875rem; .floating-label:has(&) { --top-mul: 5; --font-size: .875rem } } } .sm\:textarea-lg { @layer daisyui.l1.l2 { --font-size-min: 1.125rem; .floating-label:has(&) { --top-mul: 6; --font-size: 1.125rem } } } .sm\:textarea-xl { @layer daisyui.l1.l2 { --font-size-min: 1.375rem; .floating-label:has(&) { --top-mul: 7; --font-size: 1.375rem } } } } @media (width>=768px) { .md\:textarea { @layer daisyui.l1.l2.l3 { appearance: none; border-radius: var(--radius-field); background-color: var(--color-base-100); vertical-align: middle; --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); width: clamp(3rem, 20rem, 100%); min-height: 5rem; font-size: max(var(--font-size, 0rem), var(--font-size-min)); touch-action: manipulation; border: var(--border) solid var(--input-color, #0000); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; flex-shrink: 1; padding-block: .5rem; padding-inline: .75rem; & textarea { appearance: none; background-color: #0000; border: none; &::placeholder { color: var(--color-base-content); opacity: .5 } &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } } &:focus, &:focus-within { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate } @media (pointer:coarse) { @supports (-webkit-touch-callout:none) { &:focus, &:focus-within { --font-size: 1rem } } } &:has(>textarea[disabled]), &:is(:disabled, [disabled]) { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); color: color-mix(in oklab, var(--color-base-content) 40%, transparent); box-shadow: none; &::placeholder, & ::placeholder { color: var(--color-base-content); opacity: .2 } } &:has(>textarea[disabled])>textarea[disabled] { cursor: not-allowed } } } .md\:textarea-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; &:focus, &:focus-within { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } } } .md\:textarea-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .md\:textarea-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .md\:textarea-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .md\:textarea-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .md\:textarea-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .md\:textarea-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .md\:textarea-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .md\:textarea-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-error) } } } .md\:textarea-xs { @layer daisyui.l1.l2 { --font-size-min: .6875rem; .floating-label:has(&) { --top-mul: 3; --font-size: .6875rem } } } .md\:textarea-sm { @layer daisyui.l1.l2 { --font-size-min: .75rem; .floating-label:has(&) { --top-mul: 4; --font-size: .75rem } } } .md\:textarea, .md\:textarea-md { @layer daisyui.l1.l2 { --font-size-min: .875rem; .floating-label:has(&) { --top-mul: 5; --font-size: .875rem } } } .md\:textarea-lg { @layer daisyui.l1.l2 { --font-size-min: 1.125rem; .floating-label:has(&) { --top-mul: 6; --font-size: 1.125rem } } } .md\:textarea-xl { @layer daisyui.l1.l2 { --font-size-min: 1.375rem; .floating-label:has(&) { --top-mul: 7; --font-size: 1.375rem } } } } @media (width>=1024px) { .lg\:textarea { @layer daisyui.l1.l2.l3 { appearance: none; border-radius: var(--radius-field); background-color: var(--color-base-100); vertical-align: middle; --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); width: clamp(3rem, 20rem, 100%); min-height: 5rem; font-size: max(var(--font-size, 0rem), var(--font-size-min)); touch-action: manipulation; border: var(--border) solid var(--input-color, #0000); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; flex-shrink: 1; padding-block: .5rem; padding-inline: .75rem; & textarea { appearance: none; background-color: #0000; border: none; &::placeholder { color: var(--color-base-content); opacity: .5 } &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } } &:focus, &:focus-within { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate } @media (pointer:coarse) { @supports (-webkit-touch-callout:none) { &:focus, &:focus-within { --font-size: 1rem } } } &:has(>textarea[disabled]), &:is(:disabled, [disabled]) { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); color: color-mix(in oklab, var(--color-base-content) 40%, transparent); box-shadow: none; &::placeholder, & ::placeholder { color: var(--color-base-content); opacity: .2 } } &:has(>textarea[disabled])>textarea[disabled] { cursor: not-allowed } } } .lg\:textarea-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; &:focus, &:focus-within { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } } } .lg\:textarea-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .lg\:textarea-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .lg\:textarea-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .lg\:textarea-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .lg\:textarea-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .lg\:textarea-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .lg\:textarea-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .lg\:textarea-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-error) } } } .lg\:textarea-xs { @layer daisyui.l1.l2 { --font-size-min: .6875rem; .floating-label:has(&) { --top-mul: 3; --font-size: .6875rem } } } .lg\:textarea-sm { @layer daisyui.l1.l2 { --font-size-min: .75rem; .floating-label:has(&) { --top-mul: 4; --font-size: .75rem } } } .lg\:textarea, .lg\:textarea-md { @layer daisyui.l1.l2 { --font-size-min: .875rem; .floating-label:has(&) { --top-mul: 5; --font-size: .875rem } } } .lg\:textarea-lg { @layer daisyui.l1.l2 { --font-size-min: 1.125rem; .floating-label:has(&) { --top-mul: 6; --font-size: 1.125rem } } } .lg\:textarea-xl { @layer daisyui.l1.l2 { --font-size-min: 1.375rem; .floating-label:has(&) { --top-mul: 7; --font-size: 1.375rem } } } } @media (width>=1280px) { .xl\:textarea { @layer daisyui.l1.l2.l3 { appearance: none; border-radius: var(--radius-field); background-color: var(--color-base-100); vertical-align: middle; --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); width: clamp(3rem, 20rem, 100%); min-height: 5rem; font-size: max(var(--font-size, 0rem), var(--font-size-min)); touch-action: manipulation; border: var(--border) solid var(--input-color, #0000); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; flex-shrink: 1; padding-block: .5rem; padding-inline: .75rem; & textarea { appearance: none; background-color: #0000; border: none; &::placeholder { color: var(--color-base-content); opacity: .5 } &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } } &:focus, &:focus-within { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate } @media (pointer:coarse) { @supports (-webkit-touch-callout:none) { &:focus, &:focus-within { --font-size: 1rem } } } &:has(>textarea[disabled]), &:is(:disabled, [disabled]) { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); color: color-mix(in oklab, var(--color-base-content) 40%, transparent); box-shadow: none; &::placeholder, & ::placeholder { color: var(--color-base-content); opacity: .2 } } &:has(>textarea[disabled])>textarea[disabled] { cursor: not-allowed } } } .xl\:textarea-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; &:focus, &:focus-within { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } } } .xl\:textarea-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .xl\:textarea-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .xl\:textarea-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .xl\:textarea-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .xl\:textarea-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .xl\:textarea-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .xl\:textarea-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .xl\:textarea-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-error) } } } .xl\:textarea-xs { @layer daisyui.l1.l2 { --font-size-min: .6875rem; .floating-label:has(&) { --top-mul: 3; --font-size: .6875rem } } } .xl\:textarea-sm { @layer daisyui.l1.l2 { --font-size-min: .75rem; .floating-label:has(&) { --top-mul: 4; --font-size: .75rem } } } .xl\:textarea, .xl\:textarea-md { @layer daisyui.l1.l2 { --font-size-min: .875rem; .floating-label:has(&) { --top-mul: 5; --font-size: .875rem } } } .xl\:textarea-lg { @layer daisyui.l1.l2 { --font-size-min: 1.125rem; .floating-label:has(&) { --top-mul: 6; --font-size: 1.125rem } } } .xl\:textarea-xl { @layer daisyui.l1.l2 { --font-size-min: 1.375rem; .floating-label:has(&) { --top-mul: 7; --font-size: 1.375rem } } } } @media (width>=1536px) { .\32 xl\:textarea { @layer daisyui.l1.l2.l3 { appearance: none; border-radius: var(--radius-field); background-color: var(--color-base-100); vertical-align: middle; --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); width: clamp(3rem, 20rem, 100%); min-height: 5rem; font-size: max(var(--font-size, 0rem), var(--font-size-min)); touch-action: manipulation; border: var(--border) solid var(--input-color, #0000); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; flex-shrink: 1; padding-block: .5rem; padding-inline: .75rem; & textarea { appearance: none; background-color: #0000; border: none; &::placeholder { color: var(--color-base-content); opacity: .5 } &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } } &:focus, &:focus-within { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate } @media (pointer:coarse) { @supports (-webkit-touch-callout:none) { &:focus, &:focus-within { --font-size: 1rem } } } &:has(>textarea[disabled]), &:is(:disabled, [disabled]) { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); color: color-mix(in oklab, var(--color-base-content) 40%, transparent); box-shadow: none; &::placeholder, & ::placeholder { color: var(--color-base-content); opacity: .2 } } &:has(>textarea[disabled])>textarea[disabled] { cursor: not-allowed } } } .\32 xl\:textarea-ghost { @layer daisyui.l1.l2 { box-shadow: none; background-color: #0000; border-color: #0000; &:focus, &:focus-within { background-color: var(--color-base-100); color: var(--color-base-content); box-shadow: none; border-color: #0000 } } } .\32 xl\:textarea-neutral { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-neutral) } } } .\32 xl\:textarea-primary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-primary) } } } .\32 xl\:textarea-secondary { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-secondary) } } } .\32 xl\:textarea-accent { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-accent) } } } .\32 xl\:textarea-info { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-info) } } } .\32 xl\:textarea-success { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-success) } } } .\32 xl\:textarea-warning { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-warning) } } } .\32 xl\:textarea-error { @layer daisyui.l1.l2 { &, &:focus, &:focus-within { --input-color: var(--color-error) } } } .\32 xl\:textarea-xs { @layer daisyui.l1.l2 { --font-size-min: .6875rem; .floating-label:has(&) { --top-mul: 3; --font-size: .6875rem } } } .\32 xl\:textarea-sm { @layer daisyui.l1.l2 { --font-size-min: .75rem; .floating-label:has(&) { --top-mul: 4; --font-size: .75rem } } } .\32 xl\:textarea, .\32 xl\:textarea-md { @layer daisyui.l1.l2 { --font-size-min: .875rem; .floating-label:has(&) { --top-mul: 5; --font-size: .875rem } } } .\32 xl\:textarea-lg { @layer daisyui.l1.l2 { --font-size-min: 1.125rem; .floating-label:has(&) { --top-mul: 6; --font-size: 1.125rem } } } .\32 xl\:textarea-xl { @layer daisyui.l1.l2 { --font-size-min: 1.375rem; .floating-label:has(&) { --top-mul: 7; --font-size: 1.375rem } } } } .chat { @layer daisyui.l1.l2.l3 { --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e"); grid-auto-rows: min-content; column-gap: .75rem; padding-block: .25rem; display: grid } } .chat-bubble { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-field); background-color: var(--color-base-300); width: fit-content; color: var(--color-base-content); grid-row-end: 3; min-width: 2.5rem; max-width: 90%; min-height: 2rem; padding-block: .5rem; padding-inline: 1rem; display: block; position: relative; &:before { background-color: inherit; content: ""; width: .75rem; height: .75rem; mask-repeat: no-repeat; mask-image: var(--mask-chat); position: absolute; bottom: 0; mask-position: 0 -1px; mask-size: .8125rem } } } .chat-bubble-primary { @layer daisyui.l1.l2 { background-color: var(--color-primary); color: var(--color-primary-content) } } .chat-bubble-secondary { @layer daisyui.l1.l2 { background-color: var(--color-secondary); color: var(--color-secondary-content) } } .chat-bubble-accent { @layer daisyui.l1.l2 { background-color: var(--color-accent); color: var(--color-accent-content) } } .chat-bubble-neutral { @layer daisyui.l1.l2 { background-color: var(--color-neutral); color: var(--color-neutral-content) } } .chat-bubble-info { @layer daisyui.l1.l2 { background-color: var(--color-info); color: var(--color-info-content) } } .chat-bubble-success { @layer daisyui.l1.l2 { background-color: var(--color-success); color: var(--color-success-content) } } .chat-bubble-warning { @layer daisyui.l1.l2 { background-color: var(--color-warning); color: var(--color-warning-content) } } .chat-bubble-error { @layer daisyui.l1.l2 { background-color: var(--color-error); color: var(--color-error-content) } } .chat-image { @layer daisyui.l1.l2.l3 { grid-row: span 2/span 2; align-self: flex-end } } .chat-header { @layer daisyui.l1.l2.l3 { grid-row-start: 1; gap: .25rem; font-size: .6875rem; display: flex } } .chat-footer { @layer daisyui.l1.l2.l3 { grid-row-start: 3; gap: .25rem; font-size: .6875rem; display: flex } } .chat-start { @layer daisyui.l1.l2 { grid-template-columns: auto 1fr; place-items: start; & .chat-header, & .chat-footer { grid-column-start: 2 } & .chat-image { grid-column-start: 1 } & .chat-bubble { border-end-start-radius: 0; grid-column-start: 2; &:before { inset-inline-start: -.75rem; transform: rotateY(0) } [dir=rtl] &:before { transform: rotateY(180deg) } } } } .chat-end { @layer daisyui.l1.l2 { grid-template-columns: 1fr auto; place-items: end; & .chat-header, & .chat-footer { grid-column-start: 1 } & .chat-image { grid-column-start: 2 } & .chat-bubble { border-end-end-radius: 0; grid-column-start: 1; &:before { inset-inline-start: 100%; transform: rotateY(180deg) } [dir=rtl] &:before { transform: rotateY(0) } } } } @media (width>=640px) { .sm\:chat { @layer daisyui.l1.l2.l3 { --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e"); grid-auto-rows: min-content; column-gap: .75rem; padding-block: .25rem; display: grid } } .sm\:chat-bubble { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-field); background-color: var(--color-base-300); width: fit-content; color: var(--color-base-content); grid-row-end: 3; min-width: 2.5rem; max-width: 90%; min-height: 2rem; padding-block: .5rem; padding-inline: 1rem; display: block; position: relative; &:before { background-color: inherit; content: ""; width: .75rem; height: .75rem; mask-repeat: no-repeat; mask-image: var(--mask-chat); position: absolute; bottom: 0; mask-position: 0 -1px; mask-size: .8125rem } } } .sm\:chat-bubble-primary { @layer daisyui.l1.l2 { background-color: var(--color-primary); color: var(--color-primary-content) } } .sm\:chat-bubble-secondary { @layer daisyui.l1.l2 { background-color: var(--color-secondary); color: var(--color-secondary-content) } } .sm\:chat-bubble-accent { @layer daisyui.l1.l2 { background-color: var(--color-accent); color: var(--color-accent-content) } } .sm\:chat-bubble-neutral { @layer daisyui.l1.l2 { background-color: var(--color-neutral); color: var(--color-neutral-content) } } .sm\:chat-bubble-info { @layer daisyui.l1.l2 { background-color: var(--color-info); color: var(--color-info-content) } } .sm\:chat-bubble-success { @layer daisyui.l1.l2 { background-color: var(--color-success); color: var(--color-success-content) } } .sm\:chat-bubble-warning { @layer daisyui.l1.l2 { background-color: var(--color-warning); color: var(--color-warning-content) } } .sm\:chat-bubble-error { @layer daisyui.l1.l2 { background-color: var(--color-error); color: var(--color-error-content) } } .sm\:chat-image { @layer daisyui.l1.l2.l3 { grid-row: span 2/span 2; align-self: flex-end } } .sm\:chat-header { @layer daisyui.l1.l2.l3 { grid-row-start: 1; gap: .25rem; font-size: .6875rem; display: flex } } .sm\:chat-footer { @layer daisyui.l1.l2.l3 { grid-row-start: 3; gap: .25rem; font-size: .6875rem; display: flex } } .sm\:chat-start { @layer daisyui.l1.l2 { grid-template-columns: auto 1fr; place-items: start; & .chat-header, & .chat-footer { grid-column-start: 2 } & .chat-image { grid-column-start: 1 } & .chat-bubble { border-end-start-radius: 0; grid-column-start: 2; &:before { inset-inline-start: -.75rem; transform: rotateY(0) } [dir=rtl] &:before { transform: rotateY(180deg) } } } } .sm\:chat-end { @layer daisyui.l1.l2 { grid-template-columns: 1fr auto; place-items: end; & .chat-header, & .chat-footer { grid-column-start: 1 } & .chat-image { grid-column-start: 2 } & .chat-bubble { border-end-end-radius: 0; grid-column-start: 1; &:before { inset-inline-start: 100%; transform: rotateY(180deg) } [dir=rtl] &:before { transform: rotateY(0) } } } } } @media (width>=768px) { .md\:chat { @layer daisyui.l1.l2.l3 { --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e"); grid-auto-rows: min-content; column-gap: .75rem; padding-block: .25rem; display: grid } } .md\:chat-bubble { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-field); background-color: var(--color-base-300); width: fit-content; color: var(--color-base-content); grid-row-end: 3; min-width: 2.5rem; max-width: 90%; min-height: 2rem; padding-block: .5rem; padding-inline: 1rem; display: block; position: relative; &:before { background-color: inherit; content: ""; width: .75rem; height: .75rem; mask-repeat: no-repeat; mask-image: var(--mask-chat); position: absolute; bottom: 0; mask-position: 0 -1px; mask-size: .8125rem } } } .md\:chat-bubble-primary { @layer daisyui.l1.l2 { background-color: var(--color-primary); color: var(--color-primary-content) } } .md\:chat-bubble-secondary { @layer daisyui.l1.l2 { background-color: var(--color-secondary); color: var(--color-secondary-content) } } .md\:chat-bubble-accent { @layer daisyui.l1.l2 { background-color: var(--color-accent); color: var(--color-accent-content) } } .md\:chat-bubble-neutral { @layer daisyui.l1.l2 { background-color: var(--color-neutral); color: var(--color-neutral-content) } } .md\:chat-bubble-info { @layer daisyui.l1.l2 { background-color: var(--color-info); color: var(--color-info-content) } } .md\:chat-bubble-success { @layer daisyui.l1.l2 { background-color: var(--color-success); color: var(--color-success-content) } } .md\:chat-bubble-warning { @layer daisyui.l1.l2 { background-color: var(--color-warning); color: var(--color-warning-content) } } .md\:chat-bubble-error { @layer daisyui.l1.l2 { background-color: var(--color-error); color: var(--color-error-content) } } .md\:chat-image { @layer daisyui.l1.l2.l3 { grid-row: span 2/span 2; align-self: flex-end } } .md\:chat-header { @layer daisyui.l1.l2.l3 { grid-row-start: 1; gap: .25rem; font-size: .6875rem; display: flex } } .md\:chat-footer { @layer daisyui.l1.l2.l3 { grid-row-start: 3; gap: .25rem; font-size: .6875rem; display: flex } } .md\:chat-start { @layer daisyui.l1.l2 { grid-template-columns: auto 1fr; place-items: start; & .chat-header, & .chat-footer { grid-column-start: 2 } & .chat-image { grid-column-start: 1 } & .chat-bubble { border-end-start-radius: 0; grid-column-start: 2; &:before { inset-inline-start: -.75rem; transform: rotateY(0) } [dir=rtl] &:before { transform: rotateY(180deg) } } } } .md\:chat-end { @layer daisyui.l1.l2 { grid-template-columns: 1fr auto; place-items: end; & .chat-header, & .chat-footer { grid-column-start: 1 } & .chat-image { grid-column-start: 2 } & .chat-bubble { border-end-end-radius: 0; grid-column-start: 1; &:before { inset-inline-start: 100%; transform: rotateY(180deg) } [dir=rtl] &:before { transform: rotateY(0) } } } } } @media (width>=1024px) { .lg\:chat { @layer daisyui.l1.l2.l3 { --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e"); grid-auto-rows: min-content; column-gap: .75rem; padding-block: .25rem; display: grid } } .lg\:chat-bubble { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-field); background-color: var(--color-base-300); width: fit-content; color: var(--color-base-content); grid-row-end: 3; min-width: 2.5rem; max-width: 90%; min-height: 2rem; padding-block: .5rem; padding-inline: 1rem; display: block; position: relative; &:before { background-color: inherit; content: ""; width: .75rem; height: .75rem; mask-repeat: no-repeat; mask-image: var(--mask-chat); position: absolute; bottom: 0; mask-position: 0 -1px; mask-size: .8125rem } } } .lg\:chat-bubble-primary { @layer daisyui.l1.l2 { background-color: var(--color-primary); color: var(--color-primary-content) } } .lg\:chat-bubble-secondary { @layer daisyui.l1.l2 { background-color: var(--color-secondary); color: var(--color-secondary-content) } } .lg\:chat-bubble-accent { @layer daisyui.l1.l2 { background-color: var(--color-accent); color: var(--color-accent-content) } } .lg\:chat-bubble-neutral { @layer daisyui.l1.l2 { background-color: var(--color-neutral); color: var(--color-neutral-content) } } .lg\:chat-bubble-info { @layer daisyui.l1.l2 { background-color: var(--color-info); color: var(--color-info-content) } } .lg\:chat-bubble-success { @layer daisyui.l1.l2 { background-color: var(--color-success); color: var(--color-success-content) } } .lg\:chat-bubble-warning { @layer daisyui.l1.l2 { background-color: var(--color-warning); color: var(--color-warning-content) } } .lg\:chat-bubble-error { @layer daisyui.l1.l2 { background-color: var(--color-error); color: var(--color-error-content) } } .lg\:chat-image { @layer daisyui.l1.l2.l3 { grid-row: span 2/span 2; align-self: flex-end } } .lg\:chat-header { @layer daisyui.l1.l2.l3 { grid-row-start: 1; gap: .25rem; font-size: .6875rem; display: flex } } .lg\:chat-footer { @layer daisyui.l1.l2.l3 { grid-row-start: 3; gap: .25rem; font-size: .6875rem; display: flex } } .lg\:chat-start { @layer daisyui.l1.l2 { grid-template-columns: auto 1fr; place-items: start; & .chat-header, & .chat-footer { grid-column-start: 2 } & .chat-image { grid-column-start: 1 } & .chat-bubble { border-end-start-radius: 0; grid-column-start: 2; &:before { inset-inline-start: -.75rem; transform: rotateY(0) } [dir=rtl] &:before { transform: rotateY(180deg) } } } } .lg\:chat-end { @layer daisyui.l1.l2 { grid-template-columns: 1fr auto; place-items: end; & .chat-header, & .chat-footer { grid-column-start: 1 } & .chat-image { grid-column-start: 2 } & .chat-bubble { border-end-end-radius: 0; grid-column-start: 1; &:before { inset-inline-start: 100%; transform: rotateY(180deg) } [dir=rtl] &:before { transform: rotateY(0) } } } } } @media (width>=1280px) { .xl\:chat { @layer daisyui.l1.l2.l3 { --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e"); grid-auto-rows: min-content; column-gap: .75rem; padding-block: .25rem; display: grid } } .xl\:chat-bubble { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-field); background-color: var(--color-base-300); width: fit-content; color: var(--color-base-content); grid-row-end: 3; min-width: 2.5rem; max-width: 90%; min-height: 2rem; padding-block: .5rem; padding-inline: 1rem; display: block; position: relative; &:before { background-color: inherit; content: ""; width: .75rem; height: .75rem; mask-repeat: no-repeat; mask-image: var(--mask-chat); position: absolute; bottom: 0; mask-position: 0 -1px; mask-size: .8125rem } } } .xl\:chat-bubble-primary { @layer daisyui.l1.l2 { background-color: var(--color-primary); color: var(--color-primary-content) } } .xl\:chat-bubble-secondary { @layer daisyui.l1.l2 { background-color: var(--color-secondary); color: var(--color-secondary-content) } } .xl\:chat-bubble-accent { @layer daisyui.l1.l2 { background-color: var(--color-accent); color: var(--color-accent-content) } } .xl\:chat-bubble-neutral { @layer daisyui.l1.l2 { background-color: var(--color-neutral); color: var(--color-neutral-content) } } .xl\:chat-bubble-info { @layer daisyui.l1.l2 { background-color: var(--color-info); color: var(--color-info-content) } } .xl\:chat-bubble-success { @layer daisyui.l1.l2 { background-color: var(--color-success); color: var(--color-success-content) } } .xl\:chat-bubble-warning { @layer daisyui.l1.l2 { background-color: var(--color-warning); color: var(--color-warning-content) } } .xl\:chat-bubble-error { @layer daisyui.l1.l2 { background-color: var(--color-error); color: var(--color-error-content) } } .xl\:chat-image { @layer daisyui.l1.l2.l3 { grid-row: span 2/span 2; align-self: flex-end } } .xl\:chat-header { @layer daisyui.l1.l2.l3 { grid-row-start: 1; gap: .25rem; font-size: .6875rem; display: flex } } .xl\:chat-footer { @layer daisyui.l1.l2.l3 { grid-row-start: 3; gap: .25rem; font-size: .6875rem; display: flex } } .xl\:chat-start { @layer daisyui.l1.l2 { grid-template-columns: auto 1fr; place-items: start; & .chat-header, & .chat-footer { grid-column-start: 2 } & .chat-image { grid-column-start: 1 } & .chat-bubble { border-end-start-radius: 0; grid-column-start: 2; &:before { inset-inline-start: -.75rem; transform: rotateY(0) } [dir=rtl] &:before { transform: rotateY(180deg) } } } } .xl\:chat-end { @layer daisyui.l1.l2 { grid-template-columns: 1fr auto; place-items: end; & .chat-header, & .chat-footer { grid-column-start: 1 } & .chat-image { grid-column-start: 2 } & .chat-bubble { border-end-end-radius: 0; grid-column-start: 1; &:before { inset-inline-start: 100%; transform: rotateY(180deg) } [dir=rtl] &:before { transform: rotateY(0) } } } } } @media (width>=1536px) { .\32 xl\:chat { @layer daisyui.l1.l2.l3 { --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e"); grid-auto-rows: min-content; column-gap: .75rem; padding-block: .25rem; display: grid } } .\32 xl\:chat-bubble { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-field); background-color: var(--color-base-300); width: fit-content; color: var(--color-base-content); grid-row-end: 3; min-width: 2.5rem; max-width: 90%; min-height: 2rem; padding-block: .5rem; padding-inline: 1rem; display: block; position: relative; &:before { background-color: inherit; content: ""; width: .75rem; height: .75rem; mask-repeat: no-repeat; mask-image: var(--mask-chat); position: absolute; bottom: 0; mask-position: 0 -1px; mask-size: .8125rem } } } .\32 xl\:chat-bubble-primary { @layer daisyui.l1.l2 { background-color: var(--color-primary); color: var(--color-primary-content) } } .\32 xl\:chat-bubble-secondary { @layer daisyui.l1.l2 { background-color: var(--color-secondary); color: var(--color-secondary-content) } } .\32 xl\:chat-bubble-accent { @layer daisyui.l1.l2 { background-color: var(--color-accent); color: var(--color-accent-content) } } .\32 xl\:chat-bubble-neutral { @layer daisyui.l1.l2 { background-color: var(--color-neutral); color: var(--color-neutral-content) } } .\32 xl\:chat-bubble-info { @layer daisyui.l1.l2 { background-color: var(--color-info); color: var(--color-info-content) } } .\32 xl\:chat-bubble-success { @layer daisyui.l1.l2 { background-color: var(--color-success); color: var(--color-success-content) } } .\32 xl\:chat-bubble-warning { @layer daisyui.l1.l2 { background-color: var(--color-warning); color: var(--color-warning-content) } } .\32 xl\:chat-bubble-error { @layer daisyui.l1.l2 { background-color: var(--color-error); color: var(--color-error-content) } } .\32 xl\:chat-image { @layer daisyui.l1.l2.l3 { grid-row: span 2/span 2; align-self: flex-end } } .\32 xl\:chat-header { @layer daisyui.l1.l2.l3 { grid-row-start: 1; gap: .25rem; font-size: .6875rem; display: flex } } .\32 xl\:chat-footer { @layer daisyui.l1.l2.l3 { grid-row-start: 3; gap: .25rem; font-size: .6875rem; display: flex } } .\32 xl\:chat-start { @layer daisyui.l1.l2 { grid-template-columns: auto 1fr; place-items: start; & .chat-header, & .chat-footer { grid-column-start: 2 } & .chat-image { grid-column-start: 1 } & .chat-bubble { border-end-start-radius: 0; grid-column-start: 2; &:before { inset-inline-start: -.75rem; transform: rotateY(0) } [dir=rtl] &:before { transform: rotateY(180deg) } } } } .\32 xl\:chat-end { @layer daisyui.l1.l2 { grid-template-columns: 1fr auto; place-items: end; & .chat-header, & .chat-footer { grid-column-start: 1 } & .chat-image { grid-column-start: 2 } & .chat-bubble { border-end-end-radius: 0; grid-column-start: 1; &:before { inset-inline-start: 100%; transform: rotateY(180deg) } [dir=rtl] &:before { transform: rotateY(0) } } } } } .megamenu { @layer daisyui.l1.l2.l3 { width: unset; border-radius: calc(var(--radius-field) + var(--border)); --mm-anchor: --mm1; --size: calc(var(--size-field, .25rem) * 10); background-color: #0000; align-items: center; display: flex; position: relative; overflow: visible; & [popovertarget] { isolation: isolate; cursor: pointer; padding-inline: var(--mm-p, 1rem); height: var(--size); font-size: var(--fontsize, .875rem); border: var(--border) solid transparent; anchor-name: var(--mm-anchor); align-items: center; gap: .75rem; transition: background-color .2s ease-out, color .2s ease-out; display: flex; position: relative; &:focus-visible { outline: 2px solid var(--color-base-content); outline-offset: 2px } &:after { --tw-content: ""; content: var(--tw-content); pointer-events: none; opacity: .25; width: .375rem; height: .375rem; transition: opacity .2s ease-out, rotate .2s ease-out; display: block; inset-inline-end: 1.4rem; rotate: -135deg; box-shadow: inset 2px 2px } &:first-of-type { --mm-anchor: --mm1 } &:nth-of-type(2) { --mm-anchor: --mm2 } &:nth-of-type(3) { --mm-anchor: --mm3 } &:nth-of-type(4) { --mm-anchor: --mm4 } &:nth-of-type(5) { --mm-anchor: --mm5 } &:nth-of-type(6) { --mm-anchor: --mm6 } &:nth-of-type(7) { --mm-anchor: --mm7 } &:nth-of-type(8) { --mm-anchor: --mm8 } &:nth-of-type(9) { --mm-anchor: --mm9 } &:nth-of-type(10) { --mm-anchor: --mm10 } } &:not(:has([popovertarget]:hover, [popover]:popover-open)) .megamenu-active { background-color: #0000 } &:has([popovertarget]:hover):not(:has([popover]:popover-open)) .megamenu-active, &:has([popover]:popover-open) .megamenu-active { inset: anchor(var(--mm-anchor) top) anchor(var(--mm-anchor) end) anchor(var(--mm-anchor) bottom) anchor(var(--mm-anchor) start) } &:has([popovertarget]:first-of-type:hover):not(:has([popover]:popover-open)), &:has([popover]:first-of-type:popover-open) { --mm-anchor: --mm1 } &:has([popovertarget]:nth-of-type(2):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(2):popover-open) { --mm-anchor: --mm2 } &:has([popovertarget]:nth-of-type(3):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(3):popover-open) { --mm-anchor: --mm3 } &:has([popovertarget]:nth-of-type(4):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(4):popover-open) { --mm-anchor: --mm4 } &:has([popovertarget]:nth-of-type(5):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(5):popover-open) { --mm-anchor: --mm5 } &:has([popovertarget]:nth-of-type(6):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(6):popover-open) { --mm-anchor: --mm6 } &:has([popovertarget]:nth-of-type(7):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(7):popover-open) { --mm-anchor: --mm7 } &:has([popovertarget]:nth-of-type(8):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(8):popover-open) { --mm-anchor: --mm8 } &:has([popovertarget]:nth-of-type(9):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(9):popover-open) { --mm-anchor: --mm9 } &:has([popovertarget]:nth-of-type(10):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(10):popover-open) { --mm-anchor: --mm10 } & [popovertarget]:has(+[popover]:popover-open):after { opacity: 1; rotate: 45deg } & [popover] { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-300); opacity: 0; border-radius: var(--radius-box); background-color: var(--color-base-100); position-area: block-end span-inline-end; max-height: 100dvh; max-block-size: calc(100% - .25rem); transition: opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete; margin-top: .25rem; translate: 0 -.5rem; scale: .98; &:popover-open { opacity: 1; @starting-style { opacity: 0 } } } &:has([popover]:popover-open) { & [popover] { translate: 0; scale: 1 } } } @layer daisyui.l1 { &:popover-open { opacity: 1; background-color: var(--color-base-100); width: 100%; margin-top: var(--mm-mt, 4rem); border-radius: 0; flex-direction: column; align-items: flex-start; padding-top: 1rem; position: fixed; overflow-y: scroll; & [popovertarget], &>[popover]:not(:first-of-type) { display: var(--mm-display, none) } &::backdrop { background-color: var(--mm-backdrop, oklch(0% 0 0/.4)) } position-area:block-end; top:0; max-block-size:80svh; transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete; border-inline-width:0; inset-inline-start:0; translate:0; scale:1; @starting-style { opacity: 0 } & [popovertarget] { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 40%, transparent); font-size: .875rem; font-weight: 600; &:after { content: none } } & [popover] { opacity: 1; background-color: #0000; border: none; max-height: none; display: block; position: relative; overflow: visible } } } } .megamenu-active { @layer daisyui.l1.l2.l3 { pointer-events: none; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); border-radius: var(--radius-field); transition: inset .3s linear(0, .5 10%, .9 30%, 1.05 50%, 1.1 75%, 1), background-color .2s ease-out; position: absolute } } .megamenu-wide { @layer daisyui.l1.l2 { anchor-name: --megamenu; &:popover-open { inset-inline: 0 } & [popover] { position-area: block-end; position-anchor: --megamenu; width: anchor-size(inline) } } } .megamenu-full { @layer daisyui.l1.l2 { anchor-name: --megamenu; &:popover-open { inset-inline: 0 } & [popover] { position-area: block-end; position-anchor: --megamenu; border-inline-width: 0; border-radius: 0; width: 100% } } } .megamenu-vertical { @layer daisyui.l1.l2 { opacity: 0; background-color: var(--color-base-100); position-area: block-end; width: 100%; --mm-backdrop: transparent; max-block-size: calc(100% - .25rem); transition: opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete; border-inline-width: 0; border-radius: 0; flex-direction: column; align-items: flex-start; position: relative; translate: 0 -.5rem; scale: .98; &:not([popover]:popover-open) { position: revert; display: none } &:popover-open { --mm-mt: 0; --mm-display: block } & [popovertarget] { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 40%, transparent); font-size: .875rem; font-weight: 600; &:after { content: none } } & [popover] { opacity: 1; background-color: #0000; border: none; display: block; position: relative; overflow: visible } } } .megamenu-xs { @layer daisyui.l1.l2 { --fontsize: .6875rem; --mm-p: .5rem; --size: calc(var(--size-field, .25rem) * 6) } } .megamenu-sm { @layer daisyui.l1.l2 { --fontsize: .75rem; --mm-p: .75rem; --size: calc(var(--size-field, .25rem) * 8) } } .megamenu-md { @layer daisyui.l1.l2 { --fontsize: .875rem; --mm-p: 1rem; --size: calc(var(--size-field, .25rem) * 10) } } .megamenu-lg { @layer daisyui.l1.l2 { --fontsize: 1.125rem; --mm-p: 1.25rem; --size: calc(var(--size-field, .25rem) * 12) } } .megamenu-xl { @layer daisyui.l1.l2 { --fontsize: 1.375rem; --mm-p: 1.5rem; --size: calc(var(--size-field, .25rem) * 14) } } @media (width>=640px) { .sm\:megamenu { @layer daisyui.l1.l2.l3 { width: unset; border-radius: calc(var(--radius-field) + var(--border)); --mm-anchor: --mm1; --size: calc(var(--size-field, .25rem) * 10); background-color: #0000; align-items: center; display: flex; position: relative; overflow: visible; & [popovertarget] { isolation: isolate; cursor: pointer; padding-inline: var(--mm-p, 1rem); height: var(--size); font-size: var(--fontsize, .875rem); border: var(--border) solid transparent; anchor-name: var(--mm-anchor); align-items: center; gap: .75rem; transition: background-color .2s ease-out, color .2s ease-out; display: flex; position: relative; &:focus-visible { outline: 2px solid var(--color-base-content); outline-offset: 2px } &:after { --tw-content: ""; content: var(--tw-content); pointer-events: none; opacity: .25; width: .375rem; height: .375rem; transition: opacity .2s ease-out, rotate .2s ease-out; display: block; inset-inline-end: 1.4rem; rotate: -135deg; box-shadow: inset 2px 2px } &:first-of-type { --mm-anchor: --mm1 } &:nth-of-type(2) { --mm-anchor: --mm2 } &:nth-of-type(3) { --mm-anchor: --mm3 } &:nth-of-type(4) { --mm-anchor: --mm4 } &:nth-of-type(5) { --mm-anchor: --mm5 } &:nth-of-type(6) { --mm-anchor: --mm6 } &:nth-of-type(7) { --mm-anchor: --mm7 } &:nth-of-type(8) { --mm-anchor: --mm8 } &:nth-of-type(9) { --mm-anchor: --mm9 } &:nth-of-type(10) { --mm-anchor: --mm10 } } &:not(:has([popovertarget]:hover, [popover]:popover-open)) .megamenu-active { background-color: #0000 } &:has([popovertarget]:hover):not(:has([popover]:popover-open)) .megamenu-active, &:has([popover]:popover-open) .megamenu-active { inset: anchor(var(--mm-anchor) top) anchor(var(--mm-anchor) end) anchor(var(--mm-anchor) bottom) anchor(var(--mm-anchor) start) } &:has([popovertarget]:first-of-type:hover):not(:has([popover]:popover-open)), &:has([popover]:first-of-type:popover-open) { --mm-anchor: --mm1 } &:has([popovertarget]:nth-of-type(2):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(2):popover-open) { --mm-anchor: --mm2 } &:has([popovertarget]:nth-of-type(3):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(3):popover-open) { --mm-anchor: --mm3 } &:has([popovertarget]:nth-of-type(4):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(4):popover-open) { --mm-anchor: --mm4 } &:has([popovertarget]:nth-of-type(5):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(5):popover-open) { --mm-anchor: --mm5 } &:has([popovertarget]:nth-of-type(6):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(6):popover-open) { --mm-anchor: --mm6 } &:has([popovertarget]:nth-of-type(7):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(7):popover-open) { --mm-anchor: --mm7 } &:has([popovertarget]:nth-of-type(8):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(8):popover-open) { --mm-anchor: --mm8 } &:has([popovertarget]:nth-of-type(9):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(9):popover-open) { --mm-anchor: --mm9 } &:has([popovertarget]:nth-of-type(10):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(10):popover-open) { --mm-anchor: --mm10 } & [popovertarget]:has(+[popover]:popover-open):after { opacity: 1; rotate: 45deg } & [popover] { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-300); opacity: 0; border-radius: var(--radius-box); background-color: var(--color-base-100); position-area: block-end span-inline-end; max-height: 100dvh; max-block-size: calc(100% - .25rem); transition: opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete; margin-top: .25rem; translate: 0 -.5rem; scale: .98; &:popover-open { opacity: 1; @starting-style { opacity: 0 } } } &:has([popover]:popover-open) { & [popover] { translate: 0; scale: 1 } } } @layer daisyui.l1 { &:popover-open { opacity: 1; background-color: var(--color-base-100); width: 100%; margin-top: var(--mm-mt, 4rem); border-radius: 0; flex-direction: column; align-items: flex-start; padding-top: 1rem; position: fixed; overflow-y: scroll; & [popovertarget], &>[popover]:not(:first-of-type) { display: var(--mm-display, none) } &::backdrop { background-color: var(--mm-backdrop, oklch(0% 0 0/.4)) } position-area:block-end; top:0; max-block-size:80svh; transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete; border-inline-width:0; inset-inline-start:0; translate:0; scale:1; @starting-style { opacity: 0 } & [popovertarget] { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 40%, transparent); font-size: .875rem; font-weight: 600; &:after { content: none } } & [popover] { opacity: 1; background-color: #0000; border: none; max-height: none; display: block; position: relative; overflow: visible } } } } .sm\:megamenu-active { @layer daisyui.l1.l2.l3 { pointer-events: none; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); border-radius: var(--radius-field); transition: inset .3s linear(0, .5 10%, .9 30%, 1.05 50%, 1.1 75%, 1), background-color .2s ease-out; position: absolute } } .sm\:megamenu-wide { @layer daisyui.l1.l2 { anchor-name: --megamenu; &:popover-open { inset-inline: 0 } & [popover] { position-area: block-end; position-anchor: --megamenu; width: anchor-size(inline) } } } .sm\:megamenu-full { @layer daisyui.l1.l2 { anchor-name: --megamenu; &:popover-open { inset-inline: 0 } & [popover] { position-area: block-end; position-anchor: --megamenu; border-inline-width: 0; border-radius: 0; width: 100% } } } .sm\:megamenu-vertical { @layer daisyui.l1.l2 { opacity: 0; background-color: var(--color-base-100); position-area: block-end; width: 100%; --mm-backdrop: transparent; max-block-size: calc(100% - .25rem); transition: opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete; border-inline-width: 0; border-radius: 0; flex-direction: column; align-items: flex-start; position: relative; translate: 0 -.5rem; scale: .98; &:not([popover]:popover-open) { position: revert; display: none } &:popover-open { --mm-mt: 0; --mm-display: block } & [popovertarget] { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 40%, transparent); font-size: .875rem; font-weight: 600; &:after { content: none } } & [popover] { opacity: 1; background-color: #0000; border: none; display: block; position: relative; overflow: visible } } } .sm\:megamenu-xs { @layer daisyui.l1.l2 { --fontsize: .6875rem; --mm-p: .5rem; --size: calc(var(--size-field, .25rem) * 6) } } .sm\:megamenu-sm { @layer daisyui.l1.l2 { --fontsize: .75rem; --mm-p: .75rem; --size: calc(var(--size-field, .25rem) * 8) } } .sm\:megamenu-md { @layer daisyui.l1.l2 { --fontsize: .875rem; --mm-p: 1rem; --size: calc(var(--size-field, .25rem) * 10) } } .sm\:megamenu-lg { @layer daisyui.l1.l2 { --fontsize: 1.125rem; --mm-p: 1.25rem; --size: calc(var(--size-field, .25rem) * 12) } } .sm\:megamenu-xl { @layer daisyui.l1.l2 { --fontsize: 1.375rem; --mm-p: 1.5rem; --size: calc(var(--size-field, .25rem) * 14) } } } @media (width>=768px) { .md\:megamenu { @layer daisyui.l1.l2.l3 { width: unset; border-radius: calc(var(--radius-field) + var(--border)); --mm-anchor: --mm1; --size: calc(var(--size-field, .25rem) * 10); background-color: #0000; align-items: center; display: flex; position: relative; overflow: visible; & [popovertarget] { isolation: isolate; cursor: pointer; padding-inline: var(--mm-p, 1rem); height: var(--size); font-size: var(--fontsize, .875rem); border: var(--border) solid transparent; anchor-name: var(--mm-anchor); align-items: center; gap: .75rem; transition: background-color .2s ease-out, color .2s ease-out; display: flex; position: relative; &:focus-visible { outline: 2px solid var(--color-base-content); outline-offset: 2px } &:after { --tw-content: ""; content: var(--tw-content); pointer-events: none; opacity: .25; width: .375rem; height: .375rem; transition: opacity .2s ease-out, rotate .2s ease-out; display: block; inset-inline-end: 1.4rem; rotate: -135deg; box-shadow: inset 2px 2px } &:first-of-type { --mm-anchor: --mm1 } &:nth-of-type(2) { --mm-anchor: --mm2 } &:nth-of-type(3) { --mm-anchor: --mm3 } &:nth-of-type(4) { --mm-anchor: --mm4 } &:nth-of-type(5) { --mm-anchor: --mm5 } &:nth-of-type(6) { --mm-anchor: --mm6 } &:nth-of-type(7) { --mm-anchor: --mm7 } &:nth-of-type(8) { --mm-anchor: --mm8 } &:nth-of-type(9) { --mm-anchor: --mm9 } &:nth-of-type(10) { --mm-anchor: --mm10 } } &:not(:has([popovertarget]:hover, [popover]:popover-open)) .megamenu-active { background-color: #0000 } &:has([popovertarget]:hover):not(:has([popover]:popover-open)) .megamenu-active, &:has([popover]:popover-open) .megamenu-active { inset: anchor(var(--mm-anchor) top) anchor(var(--mm-anchor) end) anchor(var(--mm-anchor) bottom) anchor(var(--mm-anchor) start) } &:has([popovertarget]:first-of-type:hover):not(:has([popover]:popover-open)), &:has([popover]:first-of-type:popover-open) { --mm-anchor: --mm1 } &:has([popovertarget]:nth-of-type(2):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(2):popover-open) { --mm-anchor: --mm2 } &:has([popovertarget]:nth-of-type(3):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(3):popover-open) { --mm-anchor: --mm3 } &:has([popovertarget]:nth-of-type(4):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(4):popover-open) { --mm-anchor: --mm4 } &:has([popovertarget]:nth-of-type(5):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(5):popover-open) { --mm-anchor: --mm5 } &:has([popovertarget]:nth-of-type(6):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(6):popover-open) { --mm-anchor: --mm6 } &:has([popovertarget]:nth-of-type(7):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(7):popover-open) { --mm-anchor: --mm7 } &:has([popovertarget]:nth-of-type(8):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(8):popover-open) { --mm-anchor: --mm8 } &:has([popovertarget]:nth-of-type(9):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(9):popover-open) { --mm-anchor: --mm9 } &:has([popovertarget]:nth-of-type(10):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(10):popover-open) { --mm-anchor: --mm10 } & [popovertarget]:has(+[popover]:popover-open):after { opacity: 1; rotate: 45deg } & [popover] { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-300); opacity: 0; border-radius: var(--radius-box); background-color: var(--color-base-100); position-area: block-end span-inline-end; max-height: 100dvh; max-block-size: calc(100% - .25rem); transition: opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete; margin-top: .25rem; translate: 0 -.5rem; scale: .98; &:popover-open { opacity: 1; @starting-style { opacity: 0 } } } &:has([popover]:popover-open) { & [popover] { translate: 0; scale: 1 } } } @layer daisyui.l1 { &:popover-open { opacity: 1; background-color: var(--color-base-100); width: 100%; margin-top: var(--mm-mt, 4rem); border-radius: 0; flex-direction: column; align-items: flex-start; padding-top: 1rem; position: fixed; overflow-y: scroll; & [popovertarget], &>[popover]:not(:first-of-type) { display: var(--mm-display, none) } &::backdrop { background-color: var(--mm-backdrop, oklch(0% 0 0/.4)) } position-area:block-end; top:0; max-block-size:80svh; transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete; border-inline-width:0; inset-inline-start:0; translate:0; scale:1; @starting-style { opacity: 0 } & [popovertarget] { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 40%, transparent); font-size: .875rem; font-weight: 600; &:after { content: none } } & [popover] { opacity: 1; background-color: #0000; border: none; max-height: none; display: block; position: relative; overflow: visible } } } } .md\:megamenu-active { @layer daisyui.l1.l2.l3 { pointer-events: none; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); border-radius: var(--radius-field); transition: inset .3s linear(0, .5 10%, .9 30%, 1.05 50%, 1.1 75%, 1), background-color .2s ease-out; position: absolute } } .md\:megamenu-wide { @layer daisyui.l1.l2 { anchor-name: --megamenu; &:popover-open { inset-inline: 0 } & [popover] { position-area: block-end; position-anchor: --megamenu; width: anchor-size(inline) } } } .md\:megamenu-full { @layer daisyui.l1.l2 { anchor-name: --megamenu; &:popover-open { inset-inline: 0 } & [popover] { position-area: block-end; position-anchor: --megamenu; border-inline-width: 0; border-radius: 0; width: 100% } } } .md\:megamenu-vertical { @layer daisyui.l1.l2 { opacity: 0; background-color: var(--color-base-100); position-area: block-end; width: 100%; --mm-backdrop: transparent; max-block-size: calc(100% - .25rem); transition: opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete; border-inline-width: 0; border-radius: 0; flex-direction: column; align-items: flex-start; position: relative; translate: 0 -.5rem; scale: .98; &:not([popover]:popover-open) { position: revert; display: none } &:popover-open { --mm-mt: 0; --mm-display: block } & [popovertarget] { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 40%, transparent); font-size: .875rem; font-weight: 600; &:after { content: none } } & [popover] { opacity: 1; background-color: #0000; border: none; display: block; position: relative; overflow: visible } } } .md\:megamenu-xs { @layer daisyui.l1.l2 { --fontsize: .6875rem; --mm-p: .5rem; --size: calc(var(--size-field, .25rem) * 6) } } .md\:megamenu-sm { @layer daisyui.l1.l2 { --fontsize: .75rem; --mm-p: .75rem; --size: calc(var(--size-field, .25rem) * 8) } } .md\:megamenu-md { @layer daisyui.l1.l2 { --fontsize: .875rem; --mm-p: 1rem; --size: calc(var(--size-field, .25rem) * 10) } } .md\:megamenu-lg { @layer daisyui.l1.l2 { --fontsize: 1.125rem; --mm-p: 1.25rem; --size: calc(var(--size-field, .25rem) * 12) } } .md\:megamenu-xl { @layer daisyui.l1.l2 { --fontsize: 1.375rem; --mm-p: 1.5rem; --size: calc(var(--size-field, .25rem) * 14) } } } @media (width>=1024px) { .lg\:megamenu { @layer daisyui.l1.l2.l3 { width: unset; border-radius: calc(var(--radius-field) + var(--border)); --mm-anchor: --mm1; --size: calc(var(--size-field, .25rem) * 10); background-color: #0000; align-items: center; display: flex; position: relative; overflow: visible; & [popovertarget] { isolation: isolate; cursor: pointer; padding-inline: var(--mm-p, 1rem); height: var(--size); font-size: var(--fontsize, .875rem); border: var(--border) solid transparent; anchor-name: var(--mm-anchor); align-items: center; gap: .75rem; transition: background-color .2s ease-out, color .2s ease-out; display: flex; position: relative; &:focus-visible { outline: 2px solid var(--color-base-content); outline-offset: 2px } &:after { --tw-content: ""; content: var(--tw-content); pointer-events: none; opacity: .25; width: .375rem; height: .375rem; transition: opacity .2s ease-out, rotate .2s ease-out; display: block; inset-inline-end: 1.4rem; rotate: -135deg; box-shadow: inset 2px 2px } &:first-of-type { --mm-anchor: --mm1 } &:nth-of-type(2) { --mm-anchor: --mm2 } &:nth-of-type(3) { --mm-anchor: --mm3 } &:nth-of-type(4) { --mm-anchor: --mm4 } &:nth-of-type(5) { --mm-anchor: --mm5 } &:nth-of-type(6) { --mm-anchor: --mm6 } &:nth-of-type(7) { --mm-anchor: --mm7 } &:nth-of-type(8) { --mm-anchor: --mm8 } &:nth-of-type(9) { --mm-anchor: --mm9 } &:nth-of-type(10) { --mm-anchor: --mm10 } } &:not(:has([popovertarget]:hover, [popover]:popover-open)) .megamenu-active { background-color: #0000 } &:has([popovertarget]:hover):not(:has([popover]:popover-open)) .megamenu-active, &:has([popover]:popover-open) .megamenu-active { inset: anchor(var(--mm-anchor) top) anchor(var(--mm-anchor) end) anchor(var(--mm-anchor) bottom) anchor(var(--mm-anchor) start) } &:has([popovertarget]:first-of-type:hover):not(:has([popover]:popover-open)), &:has([popover]:first-of-type:popover-open) { --mm-anchor: --mm1 } &:has([popovertarget]:nth-of-type(2):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(2):popover-open) { --mm-anchor: --mm2 } &:has([popovertarget]:nth-of-type(3):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(3):popover-open) { --mm-anchor: --mm3 } &:has([popovertarget]:nth-of-type(4):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(4):popover-open) { --mm-anchor: --mm4 } &:has([popovertarget]:nth-of-type(5):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(5):popover-open) { --mm-anchor: --mm5 } &:has([popovertarget]:nth-of-type(6):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(6):popover-open) { --mm-anchor: --mm6 } &:has([popovertarget]:nth-of-type(7):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(7):popover-open) { --mm-anchor: --mm7 } &:has([popovertarget]:nth-of-type(8):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(8):popover-open) { --mm-anchor: --mm8 } &:has([popovertarget]:nth-of-type(9):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(9):popover-open) { --mm-anchor: --mm9 } &:has([popovertarget]:nth-of-type(10):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(10):popover-open) { --mm-anchor: --mm10 } & [popovertarget]:has(+[popover]:popover-open):after { opacity: 1; rotate: 45deg } & [popover] { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-300); opacity: 0; border-radius: var(--radius-box); background-color: var(--color-base-100); position-area: block-end span-inline-end; max-height: 100dvh; max-block-size: calc(100% - .25rem); transition: opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete; margin-top: .25rem; translate: 0 -.5rem; scale: .98; &:popover-open { opacity: 1; @starting-style { opacity: 0 } } } &:has([popover]:popover-open) { & [popover] { translate: 0; scale: 1 } } } @layer daisyui.l1 { &:popover-open { opacity: 1; background-color: var(--color-base-100); width: 100%; margin-top: var(--mm-mt, 4rem); border-radius: 0; flex-direction: column; align-items: flex-start; padding-top: 1rem; position: fixed; overflow-y: scroll; & [popovertarget], &>[popover]:not(:first-of-type) { display: var(--mm-display, none) } &::backdrop { background-color: var(--mm-backdrop, oklch(0% 0 0/.4)) } position-area:block-end; top:0; max-block-size:80svh; transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete; border-inline-width:0; inset-inline-start:0; translate:0; scale:1; @starting-style { opacity: 0 } & [popovertarget] { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 40%, transparent); font-size: .875rem; font-weight: 600; &:after { content: none } } & [popover] { opacity: 1; background-color: #0000; border: none; max-height: none; display: block; position: relative; overflow: visible } } } } .lg\:megamenu-active { @layer daisyui.l1.l2.l3 { pointer-events: none; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); border-radius: var(--radius-field); transition: inset .3s linear(0, .5 10%, .9 30%, 1.05 50%, 1.1 75%, 1), background-color .2s ease-out; position: absolute } } .lg\:megamenu-wide { @layer daisyui.l1.l2 { anchor-name: --megamenu; &:popover-open { inset-inline: 0 } & [popover] { position-area: block-end; position-anchor: --megamenu; width: anchor-size(inline) } } } .lg\:megamenu-full { @layer daisyui.l1.l2 { anchor-name: --megamenu; &:popover-open { inset-inline: 0 } & [popover] { position-area: block-end; position-anchor: --megamenu; border-inline-width: 0; border-radius: 0; width: 100% } } } .lg\:megamenu-vertical { @layer daisyui.l1.l2 { opacity: 0; background-color: var(--color-base-100); position-area: block-end; width: 100%; --mm-backdrop: transparent; max-block-size: calc(100% - .25rem); transition: opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete; border-inline-width: 0; border-radius: 0; flex-direction: column; align-items: flex-start; position: relative; translate: 0 -.5rem; scale: .98; &:not([popover]:popover-open) { position: revert; display: none } &:popover-open { --mm-mt: 0; --mm-display: block } & [popovertarget] { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 40%, transparent); font-size: .875rem; font-weight: 600; &:after { content: none } } & [popover] { opacity: 1; background-color: #0000; border: none; display: block; position: relative; overflow: visible } } } .lg\:megamenu-xs { @layer daisyui.l1.l2 { --fontsize: .6875rem; --mm-p: .5rem; --size: calc(var(--size-field, .25rem) * 6) } } .lg\:megamenu-sm { @layer daisyui.l1.l2 { --fontsize: .75rem; --mm-p: .75rem; --size: calc(var(--size-field, .25rem) * 8) } } .lg\:megamenu-md { @layer daisyui.l1.l2 { --fontsize: .875rem; --mm-p: 1rem; --size: calc(var(--size-field, .25rem) * 10) } } .lg\:megamenu-lg { @layer daisyui.l1.l2 { --fontsize: 1.125rem; --mm-p: 1.25rem; --size: calc(var(--size-field, .25rem) * 12) } } .lg\:megamenu-xl { @layer daisyui.l1.l2 { --fontsize: 1.375rem; --mm-p: 1.5rem; --size: calc(var(--size-field, .25rem) * 14) } } } @media (width>=1280px) { .xl\:megamenu { @layer daisyui.l1.l2.l3 { width: unset; border-radius: calc(var(--radius-field) + var(--border)); --mm-anchor: --mm1; --size: calc(var(--size-field, .25rem) * 10); background-color: #0000; align-items: center; display: flex; position: relative; overflow: visible; & [popovertarget] { isolation: isolate; cursor: pointer; padding-inline: var(--mm-p, 1rem); height: var(--size); font-size: var(--fontsize, .875rem); border: var(--border) solid transparent; anchor-name: var(--mm-anchor); align-items: center; gap: .75rem; transition: background-color .2s ease-out, color .2s ease-out; display: flex; position: relative; &:focus-visible { outline: 2px solid var(--color-base-content); outline-offset: 2px } &:after { --tw-content: ""; content: var(--tw-content); pointer-events: none; opacity: .25; width: .375rem; height: .375rem; transition: opacity .2s ease-out, rotate .2s ease-out; display: block; inset-inline-end: 1.4rem; rotate: -135deg; box-shadow: inset 2px 2px } &:first-of-type { --mm-anchor: --mm1 } &:nth-of-type(2) { --mm-anchor: --mm2 } &:nth-of-type(3) { --mm-anchor: --mm3 } &:nth-of-type(4) { --mm-anchor: --mm4 } &:nth-of-type(5) { --mm-anchor: --mm5 } &:nth-of-type(6) { --mm-anchor: --mm6 } &:nth-of-type(7) { --mm-anchor: --mm7 } &:nth-of-type(8) { --mm-anchor: --mm8 } &:nth-of-type(9) { --mm-anchor: --mm9 } &:nth-of-type(10) { --mm-anchor: --mm10 } } &:not(:has([popovertarget]:hover, [popover]:popover-open)) .megamenu-active { background-color: #0000 } &:has([popovertarget]:hover):not(:has([popover]:popover-open)) .megamenu-active, &:has([popover]:popover-open) .megamenu-active { inset: anchor(var(--mm-anchor) top) anchor(var(--mm-anchor) end) anchor(var(--mm-anchor) bottom) anchor(var(--mm-anchor) start) } &:has([popovertarget]:first-of-type:hover):not(:has([popover]:popover-open)), &:has([popover]:first-of-type:popover-open) { --mm-anchor: --mm1 } &:has([popovertarget]:nth-of-type(2):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(2):popover-open) { --mm-anchor: --mm2 } &:has([popovertarget]:nth-of-type(3):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(3):popover-open) { --mm-anchor: --mm3 } &:has([popovertarget]:nth-of-type(4):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(4):popover-open) { --mm-anchor: --mm4 } &:has([popovertarget]:nth-of-type(5):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(5):popover-open) { --mm-anchor: --mm5 } &:has([popovertarget]:nth-of-type(6):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(6):popover-open) { --mm-anchor: --mm6 } &:has([popovertarget]:nth-of-type(7):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(7):popover-open) { --mm-anchor: --mm7 } &:has([popovertarget]:nth-of-type(8):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(8):popover-open) { --mm-anchor: --mm8 } &:has([popovertarget]:nth-of-type(9):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(9):popover-open) { --mm-anchor: --mm9 } &:has([popovertarget]:nth-of-type(10):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(10):popover-open) { --mm-anchor: --mm10 } & [popovertarget]:has(+[popover]:popover-open):after { opacity: 1; rotate: 45deg } & [popover] { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-300); opacity: 0; border-radius: var(--radius-box); background-color: var(--color-base-100); position-area: block-end span-inline-end; max-height: 100dvh; max-block-size: calc(100% - .25rem); transition: opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete; margin-top: .25rem; translate: 0 -.5rem; scale: .98; &:popover-open { opacity: 1; @starting-style { opacity: 0 } } } &:has([popover]:popover-open) { & [popover] { translate: 0; scale: 1 } } } @layer daisyui.l1 { &:popover-open { opacity: 1; background-color: var(--color-base-100); width: 100%; margin-top: var(--mm-mt, 4rem); border-radius: 0; flex-direction: column; align-items: flex-start; padding-top: 1rem; position: fixed; overflow-y: scroll; & [popovertarget], &>[popover]:not(:first-of-type) { display: var(--mm-display, none) } &::backdrop { background-color: var(--mm-backdrop, oklch(0% 0 0/.4)) } position-area:block-end; top:0; max-block-size:80svh; transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete; border-inline-width:0; inset-inline-start:0; translate:0; scale:1; @starting-style { opacity: 0 } & [popovertarget] { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 40%, transparent); font-size: .875rem; font-weight: 600; &:after { content: none } } & [popover] { opacity: 1; background-color: #0000; border: none; max-height: none; display: block; position: relative; overflow: visible } } } } .xl\:megamenu-active { @layer daisyui.l1.l2.l3 { pointer-events: none; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); border-radius: var(--radius-field); transition: inset .3s linear(0, .5 10%, .9 30%, 1.05 50%, 1.1 75%, 1), background-color .2s ease-out; position: absolute } } .xl\:megamenu-wide { @layer daisyui.l1.l2 { anchor-name: --megamenu; &:popover-open { inset-inline: 0 } & [popover] { position-area: block-end; position-anchor: --megamenu; width: anchor-size(inline) } } } .xl\:megamenu-full { @layer daisyui.l1.l2 { anchor-name: --megamenu; &:popover-open { inset-inline: 0 } & [popover] { position-area: block-end; position-anchor: --megamenu; border-inline-width: 0; border-radius: 0; width: 100% } } } .xl\:megamenu-vertical { @layer daisyui.l1.l2 { opacity: 0; background-color: var(--color-base-100); position-area: block-end; width: 100%; --mm-backdrop: transparent; max-block-size: calc(100% - .25rem); transition: opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete; border-inline-width: 0; border-radius: 0; flex-direction: column; align-items: flex-start; position: relative; translate: 0 -.5rem; scale: .98; &:not([popover]:popover-open) { position: revert; display: none } &:popover-open { --mm-mt: 0; --mm-display: block } & [popovertarget] { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 40%, transparent); font-size: .875rem; font-weight: 600; &:after { content: none } } & [popover] { opacity: 1; background-color: #0000; border: none; display: block; position: relative; overflow: visible } } } .xl\:megamenu-xs { @layer daisyui.l1.l2 { --fontsize: .6875rem; --mm-p: .5rem; --size: calc(var(--size-field, .25rem) * 6) } } .xl\:megamenu-sm { @layer daisyui.l1.l2 { --fontsize: .75rem; --mm-p: .75rem; --size: calc(var(--size-field, .25rem) * 8) } } .xl\:megamenu-md { @layer daisyui.l1.l2 { --fontsize: .875rem; --mm-p: 1rem; --size: calc(var(--size-field, .25rem) * 10) } } .xl\:megamenu-lg { @layer daisyui.l1.l2 { --fontsize: 1.125rem; --mm-p: 1.25rem; --size: calc(var(--size-field, .25rem) * 12) } } .xl\:megamenu-xl { @layer daisyui.l1.l2 { --fontsize: 1.375rem; --mm-p: 1.5rem; --size: calc(var(--size-field, .25rem) * 14) } } } @media (width>=1536px) { .\32 xl\:megamenu { @layer daisyui.l1.l2.l3 { width: unset; border-radius: calc(var(--radius-field) + var(--border)); --mm-anchor: --mm1; --size: calc(var(--size-field, .25rem) * 10); background-color: #0000; align-items: center; display: flex; position: relative; overflow: visible; & [popovertarget] { isolation: isolate; cursor: pointer; padding-inline: var(--mm-p, 1rem); height: var(--size); font-size: var(--fontsize, .875rem); border: var(--border) solid transparent; anchor-name: var(--mm-anchor); align-items: center; gap: .75rem; transition: background-color .2s ease-out, color .2s ease-out; display: flex; position: relative; &:focus-visible { outline: 2px solid var(--color-base-content); outline-offset: 2px } &:after { --tw-content: ""; content: var(--tw-content); pointer-events: none; opacity: .25; width: .375rem; height: .375rem; transition: opacity .2s ease-out, rotate .2s ease-out; display: block; inset-inline-end: 1.4rem; rotate: -135deg; box-shadow: inset 2px 2px } &:first-of-type { --mm-anchor: --mm1 } &:nth-of-type(2) { --mm-anchor: --mm2 } &:nth-of-type(3) { --mm-anchor: --mm3 } &:nth-of-type(4) { --mm-anchor: --mm4 } &:nth-of-type(5) { --mm-anchor: --mm5 } &:nth-of-type(6) { --mm-anchor: --mm6 } &:nth-of-type(7) { --mm-anchor: --mm7 } &:nth-of-type(8) { --mm-anchor: --mm8 } &:nth-of-type(9) { --mm-anchor: --mm9 } &:nth-of-type(10) { --mm-anchor: --mm10 } } &:not(:has([popovertarget]:hover, [popover]:popover-open)) .megamenu-active { background-color: #0000 } &:has([popovertarget]:hover):not(:has([popover]:popover-open)) .megamenu-active, &:has([popover]:popover-open) .megamenu-active { inset: anchor(var(--mm-anchor) top) anchor(var(--mm-anchor) end) anchor(var(--mm-anchor) bottom) anchor(var(--mm-anchor) start) } &:has([popovertarget]:first-of-type:hover):not(:has([popover]:popover-open)), &:has([popover]:first-of-type:popover-open) { --mm-anchor: --mm1 } &:has([popovertarget]:nth-of-type(2):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(2):popover-open) { --mm-anchor: --mm2 } &:has([popovertarget]:nth-of-type(3):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(3):popover-open) { --mm-anchor: --mm3 } &:has([popovertarget]:nth-of-type(4):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(4):popover-open) { --mm-anchor: --mm4 } &:has([popovertarget]:nth-of-type(5):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(5):popover-open) { --mm-anchor: --mm5 } &:has([popovertarget]:nth-of-type(6):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(6):popover-open) { --mm-anchor: --mm6 } &:has([popovertarget]:nth-of-type(7):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(7):popover-open) { --mm-anchor: --mm7 } &:has([popovertarget]:nth-of-type(8):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(8):popover-open) { --mm-anchor: --mm8 } &:has([popovertarget]:nth-of-type(9):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(9):popover-open) { --mm-anchor: --mm9 } &:has([popovertarget]:nth-of-type(10):hover):not(:has([popover]:popover-open)), &:has([popover]:nth-of-type(10):popover-open) { --mm-anchor: --mm10 } & [popovertarget]:has(+[popover]:popover-open):after { opacity: 1; rotate: 45deg } & [popover] { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-300); opacity: 0; border-radius: var(--radius-box); background-color: var(--color-base-100); position-area: block-end span-inline-end; max-height: 100dvh; max-block-size: calc(100% - .25rem); transition: opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete; margin-top: .25rem; translate: 0 -.5rem; scale: .98; &:popover-open { opacity: 1; @starting-style { opacity: 0 } } } &:has([popover]:popover-open) { & [popover] { translate: 0; scale: 1 } } } @layer daisyui.l1 { &:popover-open { opacity: 1; background-color: var(--color-base-100); width: 100%; margin-top: var(--mm-mt, 4rem); border-radius: 0; flex-direction: column; align-items: flex-start; padding-top: 1rem; position: fixed; overflow-y: scroll; & [popovertarget], &>[popover]:not(:first-of-type) { display: var(--mm-display, none) } &::backdrop { background-color: var(--mm-backdrop, oklch(0% 0 0/.4)) } position-area:block-end; top:0; max-block-size:80svh; transition:opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete; border-inline-width:0; inset-inline-start:0; translate:0; scale:1; @starting-style { opacity: 0 } & [popovertarget] { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 40%, transparent); font-size: .875rem; font-weight: 600; &:after { content: none } } & [popover] { opacity: 1; background-color: #0000; border: none; max-height: none; display: block; position: relative; overflow: visible } } } } .\32 xl\:megamenu-active { @layer daisyui.l1.l2.l3 { pointer-events: none; background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); border-radius: var(--radius-field); transition: inset .3s linear(0, .5 10%, .9 30%, 1.05 50%, 1.1 75%, 1), background-color .2s ease-out; position: absolute } } .\32 xl\:megamenu-wide { @layer daisyui.l1.l2 { anchor-name: --megamenu; &:popover-open { inset-inline: 0 } & [popover] { position-area: block-end; position-anchor: --megamenu; width: anchor-size(inline) } } } .\32 xl\:megamenu-full { @layer daisyui.l1.l2 { anchor-name: --megamenu; &:popover-open { inset-inline: 0 } & [popover] { position-area: block-end; position-anchor: --megamenu; border-inline-width: 0; border-radius: 0; width: 100% } } } .\32 xl\:megamenu-vertical { @layer daisyui.l1.l2 { opacity: 0; background-color: var(--color-base-100); position-area: block-end; width: 100%; --mm-backdrop: transparent; max-block-size: calc(100% - .25rem); transition: opacity .2s ease-out, translate .2s ease-out, scale .2s ease-out, display .2s ease-out allow-discrete, overlay .2s ease-out allow-discrete; border-inline-width: 0; border-radius: 0; flex-direction: column; align-items: flex-start; position: relative; translate: 0 -.5rem; scale: .98; &:not([popover]:popover-open) { position: revert; display: none } &:popover-open { --mm-mt: 0; --mm-display: block } & [popovertarget] { pointer-events: none; color: color-mix(in oklab, var(--color-base-content) 40%, transparent); font-size: .875rem; font-weight: 600; &:after { content: none } } & [popover] { opacity: 1; background-color: #0000; border: none; display: block; position: relative; overflow: visible } } } .\32 xl\:megamenu-xs { @layer daisyui.l1.l2 { --fontsize: .6875rem; --mm-p: .5rem; --size: calc(var(--size-field, .25rem) * 6) } } .\32 xl\:megamenu-sm { @layer daisyui.l1.l2 { --fontsize: .75rem; --mm-p: .75rem; --size: calc(var(--size-field, .25rem) * 8) } } .\32 xl\:megamenu-md { @layer daisyui.l1.l2 { --fontsize: .875rem; --mm-p: 1rem; --size: calc(var(--size-field, .25rem) * 10) } } .\32 xl\:megamenu-lg { @layer daisyui.l1.l2 { --fontsize: 1.125rem; --mm-p: 1.25rem; --size: calc(var(--size-field, .25rem) * 12) } } .\32 xl\:megamenu-xl { @layer daisyui.l1.l2 { --fontsize: 1.375rem; --mm-p: 1.5rem; --size: calc(var(--size-field, .25rem) * 14) } } } .mockup-code { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box); background-color: var(--color-neutral); color: var(--color-neutral-content); direction: ltr; padding-block: 1.25rem; font-size: .875rem; position: relative; overflow: auto hidden; &:before { content: ""; opacity: .3; border-radius: 3.40282e38px; width: .75rem; height: .75rem; margin-bottom: 1rem; display: block; box-shadow: 1.4em 0, 2.8em 0, 4.2em 0 } & pre { width: max-content; min-width: 100%; padding-right: 1.25rem; &:before { content: ""; margin-right: 2ch } &[data-prefix] { &:before { --tw-content: attr(data-prefix); content: var(--tw-content); text-align: right; opacity: .5; width: 2rem; display: inline-block } } } } } .mockup-window { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box); flex-direction: column; padding-top: 1.25rem; display: flex; position: relative; overflow: auto hidden; &:before { content: ""; aspect-ratio: 1; opacity: .3; border-radius: 3.40282e38px; flex-shrink: 0; align-self: flex-start; height: .75rem; margin-bottom: 1rem; display: block; box-shadow: 1.4em 0, 2.8em 0, 4.2em 0 } [dir=rtl] &:before { align-self: flex-end } & pre[data-prefix] { &:before { --tw-content: attr(data-prefix); content: var(--tw-content); text-align: right; display: inline-block } } } } .mockup-browser { @layer daisyui.l1.l2.l3 { border-radius: var(--radius-box); position: relative; overflow: auto hidden; & pre[data-prefix] { &:before { --tw-content: attr(data-prefix); content: var(--tw-content); text-align: right; display: inline-block } } & .mockup-browser-toolbar { align-items: center; width: 100%; margin-block: .75rem; padding-right: 1.4em; display: inline-flex; &:where(:dir(rtl), [dir=rtl], [dir=rtl] *) { flex-direction: row-reverse } &:before { content: ""; aspect-ratio: 1; opacity: .3; border-radius: 3.40282e38px; height: .75rem; margin-right: 4.8rem; display: inline-block; box-shadow: 1.4em 0, 2.8em 0, 4.2em 0 } & .input { background-color: var(--color-base-200); text-overflow: ellipsis; white-space: nowrap; direction: ltr; align-items: center; gap: .5rem; height: 100%; margin-inline: auto; font-size: .75rem; display: flex; overflow: hidden; &:before { content: ""; opacity: .5; background-color: currentColor; width: 1rem; height: 1rem; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z' clip-rule='evenodd' /%3E%3C/svg%3E") 50%/contain no-repeat } } } } } .mockup-phone { @layer daisyui.l1.l2.l3 { aspect-ratio: 462/978; background-color: #000; border: 5px solid #6b6b6b; border-radius: 65px; justify-items: center; width: 100%; max-width: 462px; padding: 6px; display: inline-grid; overflow: hidden; @supports (corner-shape:superellipse(1.45)) { corner-shape: superellipse(1.45); border-radius: 90px } } } .mockup-phone-camera { @layer daisyui.l1.l2.l3 { z-index: 1; background: #000; border-radius: 17px; grid-area: 1/1/1/1; width: 28%; height: 3.7%; margin-top: 3% } } .mockup-phone-display { @layer daisyui.l1.l2.l3 { border-radius: 54px; grid-area: 1/1/1/1; width: 100%; height: 100%; overflow: hidden; @supports (corner-shape:superellipse(1.87)) { corner-shape: superellipse(1.87); border-radius: 101px } &>img { object-fit: cover; width: 100%; height: 100% } } } .steps { @layer daisyui.l1.l2.l3 { counter-reset: step; grid-auto-columns: 1fr; grid-auto-flow: column; display: inline-grid; overflow: auto hidden; & .step { text-align: center; --step-bg: var(--color-base-300); --step-fg: var(--color-base-content); grid-template-rows: 40px 1fr; grid-template-columns: auto; place-items: center; min-width: 4rem; display: grid; &:before { width: 100%; height: .5rem; color: var(--step-bg); background-color: var(--step-bg); content: ""; border: 1px solid; grid-row-start: 1; grid-column-start: 1; margin-inline-start: -100%; top: 0 } &>.step-icon, &:not(:has(.step-icon)):after { --tw-content: counter(step); content: var(--tw-content); counter-increment: step; z-index: 1; color: var(--step-fg); background-color: var(--step-bg); border: 1px solid var(--step-bg); border-radius: 3.40282e38px; grid-row-start: 1; grid-column-start: 1; place-self: center; place-items: center; width: 2rem; height: 2rem; display: grid; position: relative } &:first-child:before { --tw-content: none; content: var(--tw-content) } &[data-content]:after { --tw-content: attr(data-content); content: var(--tw-content) } } } @layer daisyui.l1.l2 { & .step-neutral { &+.step-neutral:before, &:after, &>.step-icon { --step-bg: var(--color-neutral); --step-fg: var(--color-neutral-content) } } & .step-primary { &+.step-primary:before, &:after, &>.step-icon { --step-bg: var(--color-primary); --step-fg: var(--color-primary-content) } } & .step-secondary { &+.step-secondary:before, &:after, &>.step-icon { --step-bg: var(--color-secondary); --step-fg: var(--color-secondary-content) } } & .step-accent { &+.step-accent:before, &:after, &>.step-icon { --step-bg: var(--color-accent); --step-fg: var(--color-accent-content) } } & .step-info { &+.step-info:before, &:after, &>.step-icon { --step-bg: var(--color-info); --step-fg: var(--color-info-content) } } & .step-success { &+.step-success:before, &:after, &>.step-icon { --step-bg: var(--color-success); --step-fg: var(--color-success-content) } } & .step-warning { &+.step-warning:before, &:after, &>.step-icon { --step-bg: var(--color-warning); --step-fg: var(--color-warning-content) } } & .step-error { &+.step-error:before, &:after, &>.step-icon { --step-bg: var(--color-error); --step-fg: var(--color-error-content) } } } } .steps-horizontal { @layer daisyui.l1.l2 { grid-auto-columns: 1fr; grid-auto-flow: column; display: inline-grid; overflow: auto hidden; & .step { text-align: center; grid-template-rows: 40px 1fr; grid-template-columns: auto; place-items: center; min-width: 4rem; display: grid; &:before { width: 100%; height: .5rem; margin-inline-start: -100%; translate: 0 } [dir=rtl] &:before { translate: 0 } } } } .steps-vertical { @layer daisyui.l1.l2 { grid-auto-rows: 1fr; grid-auto-flow: row; & .step { grid-template-rows: auto; grid-template-columns: 40px 1fr; justify-items: start; gap: .5rem; min-height: 4rem; display: grid; &:before { width: .5rem; height: 100%; margin-inline-start: 50%; translate: -50% -50% } [dir=rtl] &:before { translate: 50% -50% } } } } @media (width>=640px) { .sm\:steps { @layer daisyui.l1.l2.l3 { counter-reset: step; grid-auto-columns: 1fr; grid-auto-flow: column; display: inline-grid; overflow: auto hidden; & .step { text-align: center; --step-bg: var(--color-base-300); --step-fg: var(--color-base-content); grid-template-rows: 40px 1fr; grid-template-columns: auto; place-items: center; min-width: 4rem; display: grid; &:before { width: 100%; height: .5rem; color: var(--step-bg); background-color: var(--step-bg); content: ""; border: 1px solid; grid-row-start: 1; grid-column-start: 1; margin-inline-start: -100%; top: 0 } &>.step-icon, &:not(:has(.step-icon)):after { --tw-content: counter(step); content: var(--tw-content); counter-increment: step; z-index: 1; color: var(--step-fg); background-color: var(--step-bg); border: 1px solid var(--step-bg); border-radius: 3.40282e38px; grid-row-start: 1; grid-column-start: 1; place-self: center; place-items: center; width: 2rem; height: 2rem; display: grid; position: relative } &:first-child:before { --tw-content: none; content: var(--tw-content) } &[data-content]:after { --tw-content: attr(data-content); content: var(--tw-content) } } } @layer daisyui.l1.l2 { & .step-neutral { &+.step-neutral:before, &:after, &>.step-icon { --step-bg: var(--color-neutral); --step-fg: var(--color-neutral-content) } } & .step-primary { &+.step-primary:before, &:after, &>.step-icon { --step-bg: var(--color-primary); --step-fg: var(--color-primary-content) } } & .step-secondary { &+.step-secondary:before, &:after, &>.step-icon { --step-bg: var(--color-secondary); --step-fg: var(--color-secondary-content) } } & .step-accent { &+.step-accent:before, &:after, &>.step-icon { --step-bg: var(--color-accent); --step-fg: var(--color-accent-content) } } & .step-info { &+.step-info:before, &:after, &>.step-icon { --step-bg: var(--color-info); --step-fg: var(--color-info-content) } } & .step-success { &+.step-success:before, &:after, &>.step-icon { --step-bg: var(--color-success); --step-fg: var(--color-success-content) } } & .step-warning { &+.step-warning:before, &:after, &>.step-icon { --step-bg: var(--color-warning); --step-fg: var(--color-warning-content) } } & .step-error { &+.step-error:before, &:after, &>.step-icon { --step-bg: var(--color-error); --step-fg: var(--color-error-content) } } } } .sm\:steps-horizontal { @layer daisyui.l1.l2 { grid-auto-columns: 1fr; grid-auto-flow: column; display: inline-grid; overflow: auto hidden; & .step { text-align: center; grid-template-rows: 40px 1fr; grid-template-columns: auto; place-items: center; min-width: 4rem; display: grid; &:before { width: 100%; height: .5rem; margin-inline-start: -100%; translate: 0 } [dir=rtl] &:before { translate: 0 } } } } .sm\:steps-vertical { @layer daisyui.l1.l2 { grid-auto-rows: 1fr; grid-auto-flow: row; & .step { grid-template-rows: auto; grid-template-columns: 40px 1fr; justify-items: start; gap: .5rem; min-height: 4rem; display: grid; &:before { width: .5rem; height: 100%; margin-inline-start: 50%; translate: -50% -50% } [dir=rtl] &:before { translate: 50% -50% } } } } } @media (width>=768px) { .md\:steps { @layer daisyui.l1.l2.l3 { counter-reset: step; grid-auto-columns: 1fr; grid-auto-flow: column; display: inline-grid; overflow: auto hidden; & .step { text-align: center; --step-bg: var(--color-base-300); --step-fg: var(--color-base-content); grid-template-rows: 40px 1fr; grid-template-columns: auto; place-items: center; min-width: 4rem; display: grid; &:before { width: 100%; height: .5rem; color: var(--step-bg); background-color: var(--step-bg); content: ""; border: 1px solid; grid-row-start: 1; grid-column-start: 1; margin-inline-start: -100%; top: 0 } &>.step-icon, &:not(:has(.step-icon)):after { --tw-content: counter(step); content: var(--tw-content); counter-increment: step; z-index: 1; color: var(--step-fg); background-color: var(--step-bg); border: 1px solid var(--step-bg); border-radius: 3.40282e38px; grid-row-start: 1; grid-column-start: 1; place-self: center; place-items: center; width: 2rem; height: 2rem; display: grid; position: relative } &:first-child:before { --tw-content: none; content: var(--tw-content) } &[data-content]:after { --tw-content: attr(data-content); content: var(--tw-content) } } } @layer daisyui.l1.l2 { & .step-neutral { &+.step-neutral:before, &:after, &>.step-icon { --step-bg: var(--color-neutral); --step-fg: var(--color-neutral-content) } } & .step-primary { &+.step-primary:before, &:after, &>.step-icon { --step-bg: var(--color-primary); --step-fg: var(--color-primary-content) } } & .step-secondary { &+.step-secondary:before, &:after, &>.step-icon { --step-bg: var(--color-secondary); --step-fg: var(--color-secondary-content) } } & .step-accent { &+.step-accent:before, &:after, &>.step-icon { --step-bg: var(--color-accent); --step-fg: var(--color-accent-content) } } & .step-info { &+.step-info:before, &:after, &>.step-icon { --step-bg: var(--color-info); --step-fg: var(--color-info-content) } } & .step-success { &+.step-success:before, &:after, &>.step-icon { --step-bg: var(--color-success); --step-fg: var(--color-success-content) } } & .step-warning { &+.step-warning:before, &:after, &>.step-icon { --step-bg: var(--color-warning); --step-fg: var(--color-warning-content) } } & .step-error { &+.step-error:before, &:after, &>.step-icon { --step-bg: var(--color-error); --step-fg: var(--color-error-content) } } } } .md\:steps-horizontal { @layer daisyui.l1.l2 { grid-auto-columns: 1fr; grid-auto-flow: column; display: inline-grid; overflow: auto hidden; & .step { text-align: center; grid-template-rows: 40px 1fr; grid-template-columns: auto; place-items: center; min-width: 4rem; display: grid; &:before { width: 100%; height: .5rem; margin-inline-start: -100%; translate: 0 } [dir=rtl] &:before { translate: 0 } } } } .md\:steps-vertical { @layer daisyui.l1.l2 { grid-auto-rows: 1fr; grid-auto-flow: row; & .step { grid-template-rows: auto; grid-template-columns: 40px 1fr; justify-items: start; gap: .5rem; min-height: 4rem; display: grid; &:before { width: .5rem; height: 100%; margin-inline-start: 50%; translate: -50% -50% } [dir=rtl] &:before { translate: 50% -50% } } } } } @media (width>=1024px) { .lg\:steps { @layer daisyui.l1.l2.l3 { counter-reset: step; grid-auto-columns: 1fr; grid-auto-flow: column; display: inline-grid; overflow: auto hidden; & .step { text-align: center; --step-bg: var(--color-base-300); --step-fg: var(--color-base-content); grid-template-rows: 40px 1fr; grid-template-columns: auto; place-items: center; min-width: 4rem; display: grid; &:before { width: 100%; height: .5rem; color: var(--step-bg); background-color: var(--step-bg); content: ""; border: 1px solid; grid-row-start: 1; grid-column-start: 1; margin-inline-start: -100%; top: 0 } &>.step-icon, &:not(:has(.step-icon)):after { --tw-content: counter(step); content: var(--tw-content); counter-increment: step; z-index: 1; color: var(--step-fg); background-color: var(--step-bg); border: 1px solid var(--step-bg); border-radius: 3.40282e38px; grid-row-start: 1; grid-column-start: 1; place-self: center; place-items: center; width: 2rem; height: 2rem; display: grid; position: relative } &:first-child:before { --tw-content: none; content: var(--tw-content) } &[data-content]:after { --tw-content: attr(data-content); content: var(--tw-content) } } } @layer daisyui.l1.l2 { & .step-neutral { &+.step-neutral:before, &:after, &>.step-icon { --step-bg: var(--color-neutral); --step-fg: var(--color-neutral-content) } } & .step-primary { &+.step-primary:before, &:after, &>.step-icon { --step-bg: var(--color-primary); --step-fg: var(--color-primary-content) } } & .step-secondary { &+.step-secondary:before, &:after, &>.step-icon { --step-bg: var(--color-secondary); --step-fg: var(--color-secondary-content) } } & .step-accent { &+.step-accent:before, &:after, &>.step-icon { --step-bg: var(--color-accent); --step-fg: var(--color-accent-content) } } & .step-info { &+.step-info:before, &:after, &>.step-icon { --step-bg: var(--color-info); --step-fg: var(--color-info-content) } } & .step-success { &+.step-success:before, &:after, &>.step-icon { --step-bg: var(--color-success); --step-fg: var(--color-success-content) } } & .step-warning { &+.step-warning:before, &:after, &>.step-icon { --step-bg: var(--color-warning); --step-fg: var(--color-warning-content) } } & .step-error { &+.step-error:before, &:after, &>.step-icon { --step-bg: var(--color-error); --step-fg: var(--color-error-content) } } } } .lg\:steps-horizontal { @layer daisyui.l1.l2 { grid-auto-columns: 1fr; grid-auto-flow: column; display: inline-grid; overflow: auto hidden; & .step { text-align: center; grid-template-rows: 40px 1fr; grid-template-columns: auto; place-items: center; min-width: 4rem; display: grid; &:before { width: 100%; height: .5rem; margin-inline-start: -100%; translate: 0 } [dir=rtl] &:before { translate: 0 } } } } .lg\:steps-vertical { @layer daisyui.l1.l2 { grid-auto-rows: 1fr; grid-auto-flow: row; & .step { grid-template-rows: auto; grid-template-columns: 40px 1fr; justify-items: start; gap: .5rem; min-height: 4rem; display: grid; &:before { width: .5rem; height: 100%; margin-inline-start: 50%; translate: -50% -50% } [dir=rtl] &:before { translate: 50% -50% } } } } } @media (width>=1280px) { .xl\:steps { @layer daisyui.l1.l2.l3 { counter-reset: step; grid-auto-columns: 1fr; grid-auto-flow: column; display: inline-grid; overflow: auto hidden; & .step { text-align: center; --step-bg: var(--color-base-300); --step-fg: var(--color-base-content); grid-template-rows: 40px 1fr; grid-template-columns: auto; place-items: center; min-width: 4rem; display: grid; &:before { width: 100%; height: .5rem; color: var(--step-bg); background-color: var(--step-bg); content: ""; border: 1px solid; grid-row-start: 1; grid-column-start: 1; margin-inline-start: -100%; top: 0 } &>.step-icon, &:not(:has(.step-icon)):after { --tw-content: counter(step); content: var(--tw-content); counter-increment: step; z-index: 1; color: var(--step-fg); background-color: var(--step-bg); border: 1px solid var(--step-bg); border-radius: 3.40282e38px; grid-row-start: 1; grid-column-start: 1; place-self: center; place-items: center; width: 2rem; height: 2rem; display: grid; position: relative } &:first-child:before { --tw-content: none; content: var(--tw-content) } &[data-content]:after { --tw-content: attr(data-content); content: var(--tw-content) } } } @layer daisyui.l1.l2 { & .step-neutral { &+.step-neutral:before, &:after, &>.step-icon { --step-bg: var(--color-neutral); --step-fg: var(--color-neutral-content) } } & .step-primary { &+.step-primary:before, &:after, &>.step-icon { --step-bg: var(--color-primary); --step-fg: var(--color-primary-content) } } & .step-secondary { &+.step-secondary:before, &:after, &>.step-icon { --step-bg: var(--color-secondary); --step-fg: var(--color-secondary-content) } } & .step-accent { &+.step-accent:before, &:after, &>.step-icon { --step-bg: var(--color-accent); --step-fg: var(--color-accent-content) } } & .step-info { &+.step-info:before, &:after, &>.step-icon { --step-bg: var(--color-info); --step-fg: var(--color-info-content) } } & .step-success { &+.step-success:before, &:after, &>.step-icon { --step-bg: var(--color-success); --step-fg: var(--color-success-content) } } & .step-warning { &+.step-warning:before, &:after, &>.step-icon { --step-bg: var(--color-warning); --step-fg: var(--color-warning-content) } } & .step-error { &+.step-error:before, &:after, &>.step-icon { --step-bg: var(--color-error); --step-fg: var(--color-error-content) } } } } .xl\:steps-horizontal { @layer daisyui.l1.l2 { grid-auto-columns: 1fr; grid-auto-flow: column; display: inline-grid; overflow: auto hidden; & .step { text-align: center; grid-template-rows: 40px 1fr; grid-template-columns: auto; place-items: center; min-width: 4rem; display: grid; &:before { width: 100%; height: .5rem; margin-inline-start: -100%; translate: 0 } [dir=rtl] &:before { translate: 0 } } } } .xl\:steps-vertical { @layer daisyui.l1.l2 { grid-auto-rows: 1fr; grid-auto-flow: row; & .step { grid-template-rows: auto; grid-template-columns: 40px 1fr; justify-items: start; gap: .5rem; min-height: 4rem; display: grid; &:before { width: .5rem; height: 100%; margin-inline-start: 50%; translate: -50% -50% } [dir=rtl] &:before { translate: 50% -50% } } } } } @media (width>=1536px) { .\32 xl\:steps { @layer daisyui.l1.l2.l3 { counter-reset: step; grid-auto-columns: 1fr; grid-auto-flow: column; display: inline-grid; overflow: auto hidden; & .step { text-align: center; --step-bg: var(--color-base-300); --step-fg: var(--color-base-content); grid-template-rows: 40px 1fr; grid-template-columns: auto; place-items: center; min-width: 4rem; display: grid; &:before { width: 100%; height: .5rem; color: var(--step-bg); background-color: var(--step-bg); content: ""; border: 1px solid; grid-row-start: 1; grid-column-start: 1; margin-inline-start: -100%; top: 0 } &>.step-icon, &:not(:has(.step-icon)):after { --tw-content: counter(step); content: var(--tw-content); counter-increment: step; z-index: 1; color: var(--step-fg); background-color: var(--step-bg); border: 1px solid var(--step-bg); border-radius: 3.40282e38px; grid-row-start: 1; grid-column-start: 1; place-self: center; place-items: center; width: 2rem; height: 2rem; display: grid; position: relative } &:first-child:before { --tw-content: none; content: var(--tw-content) } &[data-content]:after { --tw-content: attr(data-content); content: var(--tw-content) } } } @layer daisyui.l1.l2 { & .step-neutral { &+.step-neutral:before, &:after, &>.step-icon { --step-bg: var(--color-neutral); --step-fg: var(--color-neutral-content) } } & .step-primary { &+.step-primary:before, &:after, &>.step-icon { --step-bg: var(--color-primary); --step-fg: var(--color-primary-content) } } & .step-secondary { &+.step-secondary:before, &:after, &>.step-icon { --step-bg: var(--color-secondary); --step-fg: var(--color-secondary-content) } } & .step-accent { &+.step-accent:before, &:after, &>.step-icon { --step-bg: var(--color-accent); --step-fg: var(--color-accent-content) } } & .step-info { &+.step-info:before, &:after, &>.step-icon { --step-bg: var(--color-info); --step-fg: var(--color-info-content) } } & .step-success { &+.step-success:before, &:after, &>.step-icon { --step-bg: var(--color-success); --step-fg: var(--color-success-content) } } & .step-warning { &+.step-warning:before, &:after, &>.step-icon { --step-bg: var(--color-warning); --step-fg: var(--color-warning-content) } } & .step-error { &+.step-error:before, &:after, &>.step-icon { --step-bg: var(--color-error); --step-fg: var(--color-error-content) } } } } .\32 xl\:steps-horizontal { @layer daisyui.l1.l2 { grid-auto-columns: 1fr; grid-auto-flow: column; display: inline-grid; overflow: auto hidden; & .step { text-align: center; grid-template-rows: 40px 1fr; grid-template-columns: auto; place-items: center; min-width: 4rem; display: grid; &:before { width: 100%; height: .5rem; margin-inline-start: -100%; translate: 0 } [dir=rtl] &:before { translate: 0 } } } } .\32 xl\:steps-vertical { @layer daisyui.l1.l2 { grid-auto-rows: 1fr; grid-auto-flow: row; & .step { grid-template-rows: auto; grid-template-columns: 40px 1fr; justify-items: start; gap: .5rem; min-height: 4rem; display: grid; &:before { width: .5rem; height: 100%; margin-inline-start: 50%; translate: -50% -50% } [dir=rtl] &:before { translate: 50% -50% } } } } } .filter { @layer daisyui.l1.l2.l3 { flex-wrap: wrap; display: flex; & [type=radio] { width: auto } & input { opacity: 1; transition: visibility .1s allow-discrete, margin .1s, opacity .3s, padding .3s, border-width .1s; overflow: hidden; scale: 1; &.filter-reset { aspect-ratio: 1; &:after { --tw-content: "×"; content: var(--tw-content) } } } &>input:not(:last-child), &>:not(:last-child) input { margin-inline-end: .25rem } } @layer daisyui.l1 { &:not(:has(:checked:not(.filter-reset))) :is(.filter-reset, [type=reset]):not(:focus-visible) { visibility: hidden } &:not(:has(:checked:not(.filter-reset))) :is(.filter-reset, [type=reset]):not(:focus-visible), &:not(:has(:focus-visible)):has(:checked:not(.filter-reset, [type=checkbox])) :is(input, button):not(:checked, .filter-reset, [type=reset]) { opacity: 0; border-width: 0; width: 0; margin-inline: 0; padding-inline: 0; scale: 0 } } } .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) } } } @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) } } } } @keyframes radio { 0% { padding: 5px } 50% { padding: 3px } } .footer { @layer daisyui.l1.l2.l3 { grid-auto-flow: row; place-items: start; gap: 2.5rem 1rem; width: 100%; font-size: .875rem; line-height: 1.25rem; display: grid; &>:not(script, style, template) { place-items: start; gap: .5rem; display: grid } } } .footer-center { @layer daisyui.l1.l2 { text-align: center; grid-auto-flow: column dense; place-items: center; &>:not(script, style, template) { place-items: center } } } .footer-title { @layer daisyui.l1.l2.l3 { text-transform: uppercase; opacity: .6; margin-bottom: .5rem; font-weight: 600 } } .footer-horizontal { @layer daisyui.l1.l2 { grid-auto-flow: column; &.footer-center { grid-auto-flow: dense } } } .footer-vertical { @layer daisyui.l1.l2 { grid-auto-flow: row; &.footer-center { grid-auto-flow: column dense } } } @media (width>=640px) { .sm\:footer { @layer daisyui.l1.l2.l3 { grid-auto-flow: row; place-items: start; gap: 2.5rem 1rem; width: 100%; font-size: .875rem; line-height: 1.25rem; display: grid; &>:not(script, style, template) { place-items: start; gap: .5rem; display: grid } } } .sm\:footer-center { @layer daisyui.l1.l2 { text-align: center; grid-auto-flow: column dense; place-items: center; &>:not(script, style, template) { place-items: center } } } .sm\:footer-title { @layer daisyui.l1.l2.l3 { text-transform: uppercase; opacity: .6; margin-bottom: .5rem; font-weight: 600 } } .sm\:footer-horizontal { @layer daisyui.l1.l2 { grid-auto-flow: column; &.footer-center { grid-auto-flow: dense } } } .sm\:footer-vertical { @layer daisyui.l1.l2 { grid-auto-flow: row; &.footer-center { grid-auto-flow: column dense } } } } @media (width>=768px) { .md\:footer { @layer daisyui.l1.l2.l3 { grid-auto-flow: row; place-items: start; gap: 2.5rem 1rem; width: 100%; font-size: .875rem; line-height: 1.25rem; display: grid; &>:not(script, style, template) { place-items: start; gap: .5rem; display: grid } } } .md\:footer-center { @layer daisyui.l1.l2 { text-align: center; grid-auto-flow: column dense; place-items: center; &>:not(script, style, template) { place-items: center } } } .md\:footer-title { @layer daisyui.l1.l2.l3 { text-transform: uppercase; opacity: .6; margin-bottom: .5rem; font-weight: 600 } } .md\:footer-horizontal { @layer daisyui.l1.l2 { grid-auto-flow: column; &.footer-center { grid-auto-flow: dense } } } .md\:footer-vertical { @layer daisyui.l1.l2 { grid-auto-flow: row; &.footer-center { grid-auto-flow: column dense } } } } @media (width>=1024px) { .lg\:footer { @layer daisyui.l1.l2.l3 { grid-auto-flow: row; place-items: start; gap: 2.5rem 1rem; width: 100%; font-size: .875rem; line-height: 1.25rem; display: grid; &>:not(script, style, template) { place-items: start; gap: .5rem; display: grid } } } .lg\:footer-center { @layer daisyui.l1.l2 { text-align: center; grid-auto-flow: column dense; place-items: center; &>:not(script, style, template) { place-items: center } } } .lg\:footer-title { @layer daisyui.l1.l2.l3 { text-transform: uppercase; opacity: .6; margin-bottom: .5rem; font-weight: 600 } } .lg\:footer-horizontal { @layer daisyui.l1.l2 { grid-auto-flow: column; &.footer-center { grid-auto-flow: dense } } } .lg\:footer-vertical { @layer daisyui.l1.l2 { grid-auto-flow: row; &.footer-center { grid-auto-flow: column dense } } } } @media (width>=1280px) { .xl\:footer { @layer daisyui.l1.l2.l3 { grid-auto-flow: row; place-items: start; gap: 2.5rem 1rem; width: 100%; font-size: .875rem; line-height: 1.25rem; display: grid; &>:not(script, style, template) { place-items: start; gap: .5rem; display: grid } } } .xl\:footer-center { @layer daisyui.l1.l2 { text-align: center; grid-auto-flow: column dense; place-items: center; &>:not(script, style, template) { place-items: center } } } .xl\:footer-title { @layer daisyui.l1.l2.l3 { text-transform: uppercase; opacity: .6; margin-bottom: .5rem; font-weight: 600 } } .xl\:footer-horizontal { @layer daisyui.l1.l2 { grid-auto-flow: column; &.footer-center { grid-auto-flow: dense } } } .xl\:footer-vertical { @layer daisyui.l1.l2 { grid-auto-flow: row; &.footer-center { grid-auto-flow: column dense } } } } @media (width>=1536px) { .\32 xl\:footer { @layer daisyui.l1.l2.l3 { grid-auto-flow: row; place-items: start; gap: 2.5rem 1rem; width: 100%; font-size: .875rem; line-height: 1.25rem; display: grid; &>:not(script, style, template) { place-items: start; gap: .5rem; display: grid } } } .\32 xl\:footer-center { @layer daisyui.l1.l2 { text-align: center; grid-auto-flow: column dense; place-items: center; &>:not(script, style, template) { place-items: center } } } .\32 xl\:footer-title { @layer daisyui.l1.l2.l3 { text-transform: uppercase; opacity: .6; margin-bottom: .5rem; font-weight: 600 } } .\32 xl\:footer-horizontal { @layer daisyui.l1.l2 { grid-auto-flow: column; &.footer-center { grid-auto-flow: dense } } } .\32 xl\:footer-vertical { @layer daisyui.l1.l2 { grid-auto-flow: row; &.footer-center { grid-auto-flow: column dense } } } } .modal { @layer daisyui.l1.l2.l3 { pointer-events: none; visibility: hidden; width: 100%; max-width: none; height: 100%; max-height: none; color: inherit; transition: overlay .3s allow-discrete, visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out; overscroll-behavior: contain; z-index: 999; scrollbar-gutter: auto; background-color: #0000; place-items: center; margin: 0; padding: 0; display: grid; position: fixed; inset: 0; overflow: clip; &::backdrop { display: none } &[popover] { color: inherit; background: 0 0; border: 0; max-width: none; max-height: none; margin: 0; padding: 0; inset: 0; &::backdrop { background-color: oklch(0% 0 0/.4); transition: background-color .3s ease-out } } } @layer daisyui.l1.l2 { &.modal-open, &[open], &:popover-open, &:target, .modal-toggle:checked+& { pointer-events: auto; visibility: visible; opacity: 1; transition: visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out; background-color: oklch(0% 0 0/.4); & .modal-box { opacity: 1; translate: 0; scale: 1 } :root:has(&) { --page-scroll-lock: } } @starting-style { &.modal-open, &[open], &:popover-open, &:target, .modal-toggle:checked+& { opacity: 0 } } } } .modal-action { @layer daisyui.l1.l2.l3 { justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; display: flex } } .modal-toggle { @layer daisyui.l1.l2.l3 { appearance: none; opacity: 0; width: 0; height: 0; position: fixed } } .modal-backdrop { @layer daisyui.l1.l2.l3 { color: #0000; z-index: -1; grid-row-start: 1; grid-column-start: 1; place-self: stretch stretch; display: grid; & button { cursor: pointer } } } .modal-box { @layer daisyui.l1.l2.l3 { background-color: var(--color-base-100); border-top-left-radius: var(--modal-tl, var(--radius-box)); border-top-right-radius: var(--modal-tr, var(--radius-box)); border-bottom-left-radius: var(--modal-bl, var(--radius-box)); border-bottom-right-radius: var(--modal-br, var(--radius-box)); opacity: 0; overscroll-behavior: contain; grid-row-start: 1; grid-column-start: 1; width: 91.6667%; max-width: 32rem; max-height: 100vh; padding: 1.5rem; transition: translate .3s ease-out, scale .3s ease-out, opacity .2s ease-out 50ms, box-shadow .3s ease-out; overflow-y: auto; scale: .95; box-shadow: 0 25px 50px -12px oklch(0% 0 0/.25) } } .modal-top { @layer daisyui.l1.l2 { place-items: start; & .modal-box { --modal-tl: 0; --modal-tr: 0; --modal-bl: var(--radius-box); --modal-br: var(--radius-box); width: 100%; max-width: none; height: auto; max-height: calc(100vh - 5em); translate: 0 -100%; scale: 1 } } } .modal-middle { @layer daisyui.l1.l2 { place-items: center; & .modal-box { --modal-tl: var(--radius-box); --modal-tr: var(--radius-box); --modal-bl: var(--radius-box); --modal-br: var(--radius-box); width: 91.6667%; max-width: 32rem; height: auto; max-height: calc(100vh - 5em); translate: 0 2%; scale: .98 } } } .modal-bottom { @layer daisyui.l1.l2 { place-items: end; & .modal-box { --modal-tl: var(--radius-box); --modal-tr: var(--radius-box); --modal-bl: 0; --modal-br: 0; width: 100%; max-width: none; height: auto; max-height: calc(100vh - 5em); translate: 0 100%; scale: 1 } } } .modal-start { @layer daisyui.l1.l2 { place-items: start; & .modal-box { --modal-tl: 0; --modal-tr: var(--radius-box); --modal-bl: 0; --modal-br: var(--radius-box); width: auto; max-width: none; height: 100vh; max-height: none; translate: -100%; scale: 1; [dir=rtl] & { translate: 100% } } } } .modal-end { @layer daisyui.l1.l2 { place-items: end; & .modal-box { --modal-tl: var(--radius-box); --modal-tr: 0; --modal-bl: var(--radius-box); --modal-br: 0; width: auto; max-width: none; height: 100vh; max-height: none; translate: 100%; scale: 1; [dir=rtl] & { translate: -100% } } } } @media (width>=640px) { .sm\:modal { @layer daisyui.l1.l2.l3 { pointer-events: none; visibility: hidden; width: 100%; max-width: none; height: 100%; max-height: none; color: inherit; transition: overlay .3s allow-discrete, visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out; overscroll-behavior: contain; z-index: 999; scrollbar-gutter: auto; background-color: #0000; place-items: center; margin: 0; padding: 0; display: grid; position: fixed; inset: 0; overflow: clip; &::backdrop { display: none } &[popover] { color: inherit; background: 0 0; border: 0; max-width: none; max-height: none; margin: 0; padding: 0; inset: 0; &::backdrop { background-color: oklch(0% 0 0/.4); transition: background-color .3s ease-out } } } @layer daisyui.l1.l2 { &.modal-open, &[open], &:popover-open, &:target, .modal-toggle:checked+& { pointer-events: auto; visibility: visible; opacity: 1; transition: visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out; background-color: oklch(0% 0 0/.4); & .modal-box { opacity: 1; translate: 0; scale: 1 } :root:has(&) { --page-scroll-lock: } } @starting-style { &.modal-open, &[open], &:popover-open, &:target, .modal-toggle:checked+& { opacity: 0 } } } } .sm\:modal-action { @layer daisyui.l1.l2.l3 { justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; display: flex } } .sm\:modal-toggle { @layer daisyui.l1.l2.l3 { appearance: none; opacity: 0; width: 0; height: 0; position: fixed } } .sm\:modal-backdrop { @layer daisyui.l1.l2.l3 { color: #0000; z-index: -1; grid-row-start: 1; grid-column-start: 1; place-self: stretch stretch; display: grid; & button { cursor: pointer } } } .sm\:modal-box { @layer daisyui.l1.l2.l3 { background-color: var(--color-base-100); border-top-left-radius: var(--modal-tl, var(--radius-box)); border-top-right-radius: var(--modal-tr, var(--radius-box)); border-bottom-left-radius: var(--modal-bl, var(--radius-box)); border-bottom-right-radius: var(--modal-br, var(--radius-box)); opacity: 0; overscroll-behavior: contain; grid-row-start: 1; grid-column-start: 1; width: 91.6667%; max-width: 32rem; max-height: 100vh; padding: 1.5rem; transition: translate .3s ease-out, scale .3s ease-out, opacity .2s ease-out 50ms, box-shadow .3s ease-out; overflow-y: auto; scale: .95; box-shadow: 0 25px 50px -12px oklch(0% 0 0/.25) } } .sm\:modal-top { @layer daisyui.l1.l2 { place-items: start; & .modal-box { --modal-tl: 0; --modal-tr: 0; --modal-bl: var(--radius-box); --modal-br: var(--radius-box); width: 100%; max-width: none; height: auto; max-height: calc(100vh - 5em); translate: 0 -100%; scale: 1 } } } .sm\:modal-middle { @layer daisyui.l1.l2 { place-items: center; & .modal-box { --modal-tl: var(--radius-box); --modal-tr: var(--radius-box); --modal-bl: var(--radius-box); --modal-br: var(--radius-box); width: 91.6667%; max-width: 32rem; height: auto; max-height: calc(100vh - 5em); translate: 0 2%; scale: .98 } } } .sm\:modal-bottom { @layer daisyui.l1.l2 { place-items: end; & .modal-box { --modal-tl: var(--radius-box); --modal-tr: var(--radius-box); --modal-bl: 0; --modal-br: 0; width: 100%; max-width: none; height: auto; max-height: calc(100vh - 5em); translate: 0 100%; scale: 1 } } } .sm\:modal-start { @layer daisyui.l1.l2 { place-items: start; & .modal-box { --modal-tl: 0; --modal-tr: var(--radius-box); --modal-bl: 0; --modal-br: var(--radius-box); width: auto; max-width: none; height: 100vh; max-height: none; translate: -100%; scale: 1; [dir=rtl] & { translate: 100% } } } } .sm\:modal-end { @layer daisyui.l1.l2 { place-items: end; & .modal-box { --modal-tl: var(--radius-box); --modal-tr: 0; --modal-bl: var(--radius-box); --modal-br: 0; width: auto; max-width: none; height: 100vh; max-height: none; translate: 100%; scale: 1; [dir=rtl] & { translate: -100% } } } } } @media (width>=768px) { .md\:modal { @layer daisyui.l1.l2.l3 { pointer-events: none; visibility: hidden; width: 100%; max-width: none; height: 100%; max-height: none; color: inherit; transition: overlay .3s allow-discrete, visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out; overscroll-behavior: contain; z-index: 999; scrollbar-gutter: auto; background-color: #0000; place-items: center; margin: 0; padding: 0; display: grid; position: fixed; inset: 0; overflow: clip; &::backdrop { display: none } &[popover] { color: inherit; background: 0 0; border: 0; max-width: none; max-height: none; margin: 0; padding: 0; inset: 0; &::backdrop { background-color: oklch(0% 0 0/.4); transition: background-color .3s ease-out } } } @layer daisyui.l1.l2 { &.modal-open, &[open], &:popover-open, &:target, .modal-toggle:checked+& { pointer-events: auto; visibility: visible; opacity: 1; transition: visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out; background-color: oklch(0% 0 0/.4); & .modal-box { opacity: 1; translate: 0; scale: 1 } :root:has(&) { --page-scroll-lock: } } @starting-style { &.modal-open, &[open], &:popover-open, &:target, .modal-toggle:checked+& { opacity: 0 } } } } .md\:modal-action { @layer daisyui.l1.l2.l3 { justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; display: flex } } .md\:modal-toggle { @layer daisyui.l1.l2.l3 { appearance: none; opacity: 0; width: 0; height: 0; position: fixed } } .md\:modal-backdrop { @layer daisyui.l1.l2.l3 { color: #0000; z-index: -1; grid-row-start: 1; grid-column-start: 1; place-self: stretch stretch; display: grid; & button { cursor: pointer } } } .md\:modal-box { @layer daisyui.l1.l2.l3 { background-color: var(--color-base-100); border-top-left-radius: var(--modal-tl, var(--radius-box)); border-top-right-radius: var(--modal-tr, var(--radius-box)); border-bottom-left-radius: var(--modal-bl, var(--radius-box)); border-bottom-right-radius: var(--modal-br, var(--radius-box)); opacity: 0; overscroll-behavior: contain; grid-row-start: 1; grid-column-start: 1; width: 91.6667%; max-width: 32rem; max-height: 100vh; padding: 1.5rem; transition: translate .3s ease-out, scale .3s ease-out, opacity .2s ease-out 50ms, box-shadow .3s ease-out; overflow-y: auto; scale: .95; box-shadow: 0 25px 50px -12px oklch(0% 0 0/.25) } } .md\:modal-top { @layer daisyui.l1.l2 { place-items: start; & .modal-box { --modal-tl: 0; --modal-tr: 0; --modal-bl: var(--radius-box); --modal-br: var(--radius-box); width: 100%; max-width: none; height: auto; max-height: calc(100vh - 5em); translate: 0 -100%; scale: 1 } } } .md\:modal-middle { @layer daisyui.l1.l2 { place-items: center; & .modal-box { --modal-tl: var(--radius-box); --modal-tr: var(--radius-box); --modal-bl: var(--radius-box); --modal-br: var(--radius-box); width: 91.6667%; max-width: 32rem; height: auto; max-height: calc(100vh - 5em); translate: 0 2%; scale: .98 } } } .md\:modal-bottom { @layer daisyui.l1.l2 { place-items: end; & .modal-box { --modal-tl: var(--radius-box); --modal-tr: var(--radius-box); --modal-bl: 0; --modal-br: 0; width: 100%; max-width: none; height: auto; max-height: calc(100vh - 5em); translate: 0 100%; scale: 1 } } } .md\:modal-start { @layer daisyui.l1.l2 { place-items: start; & .modal-box { --modal-tl: 0; --modal-tr: var(--radius-box); --modal-bl: 0; --modal-br: var(--radius-box); width: auto; max-width: none; height: 100vh; max-height: none; translate: -100%; scale: 1; [dir=rtl] & { translate: 100% } } } } .md\:modal-end { @layer daisyui.l1.l2 { place-items: end; & .modal-box { --modal-tl: var(--radius-box); --modal-tr: 0; --modal-bl: var(--radius-box); --modal-br: 0; width: auto; max-width: none; height: 100vh; max-height: none; translate: 100%; scale: 1; [dir=rtl] & { translate: -100% } } } } } @media (width>=1024px) { .lg\:modal { @layer daisyui.l1.l2.l3 { pointer-events: none; visibility: hidden; width: 100%; max-width: none; height: 100%; max-height: none; color: inherit; transition: overlay .3s allow-discrete, visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out; overscroll-behavior: contain; z-index: 999; scrollbar-gutter: auto; background-color: #0000; place-items: center; margin: 0; padding: 0; display: grid; position: fixed; inset: 0; overflow: clip; &::backdrop { display: none } &[popover] { color: inherit; background: 0 0; border: 0; max-width: none; max-height: none; margin: 0; padding: 0; inset: 0; &::backdrop { background-color: oklch(0% 0 0/.4); transition: background-color .3s ease-out } } } @layer daisyui.l1.l2 { &.modal-open, &[open], &:popover-open, &:target, .modal-toggle:checked+& { pointer-events: auto; visibility: visible; opacity: 1; transition: visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out; background-color: oklch(0% 0 0/.4); & .modal-box { opacity: 1; translate: 0; scale: 1 } :root:has(&) { --page-scroll-lock: } } @starting-style { &.modal-open, &[open], &:popover-open, &:target, .modal-toggle:checked+& { opacity: 0 } } } } .lg\:modal-action { @layer daisyui.l1.l2.l3 { justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; display: flex } } .lg\:modal-toggle { @layer daisyui.l1.l2.l3 { appearance: none; opacity: 0; width: 0; height: 0; position: fixed } } .lg\:modal-backdrop { @layer daisyui.l1.l2.l3 { color: #0000; z-index: -1; grid-row-start: 1; grid-column-start: 1; place-self: stretch stretch; display: grid; & button { cursor: pointer } } } .lg\:modal-box { @layer daisyui.l1.l2.l3 { background-color: var(--color-base-100); border-top-left-radius: var(--modal-tl, var(--radius-box)); border-top-right-radius: var(--modal-tr, var(--radius-box)); border-bottom-left-radius: var(--modal-bl, var(--radius-box)); border-bottom-right-radius: var(--modal-br, var(--radius-box)); opacity: 0; overscroll-behavior: contain; grid-row-start: 1; grid-column-start: 1; width: 91.6667%; max-width: 32rem; max-height: 100vh; padding: 1.5rem; transition: translate .3s ease-out, scale .3s ease-out, opacity .2s ease-out 50ms, box-shadow .3s ease-out; overflow-y: auto; scale: .95; box-shadow: 0 25px 50px -12px oklch(0% 0 0/.25) } } .lg\:modal-top { @layer daisyui.l1.l2 { place-items: start; & .modal-box { --modal-tl: 0; --modal-tr: 0; --modal-bl: var(--radius-box); --modal-br: var(--radius-box); width: 100%; max-width: none; height: auto; max-height: calc(100vh - 5em); translate: 0 -100%; scale: 1 } } } .lg\:modal-middle { @layer daisyui.l1.l2 { place-items: center; & .modal-box { --modal-tl: var(--radius-box); --modal-tr: var(--radius-box); --modal-bl: var(--radius-box); --modal-br: var(--radius-box); width: 91.6667%; max-width: 32rem; height: auto; max-height: calc(100vh - 5em); translate: 0 2%; scale: .98 } } } .lg\:modal-bottom { @layer daisyui.l1.l2 { place-items: end; & .modal-box { --modal-tl: var(--radius-box); --modal-tr: var(--radius-box); --modal-bl: 0; --modal-br: 0; width: 100%; max-width: none; height: auto; max-height: calc(100vh - 5em); translate: 0 100%; scale: 1 } } } .lg\:modal-start { @layer daisyui.l1.l2 { place-items: start; & .modal-box { --modal-tl: 0; --modal-tr: var(--radius-box); --modal-bl: 0; --modal-br: var(--radius-box); width: auto; max-width: none; height: 100vh; max-height: none; translate: -100%; scale: 1; [dir=rtl] & { translate: 100% } } } } .lg\:modal-end { @layer daisyui.l1.l2 { place-items: end; & .modal-box { --modal-tl: var(--radius-box); --modal-tr: 0; --modal-bl: var(--radius-box); --modal-br: 0; width: auto; max-width: none; height: 100vh; max-height: none; translate: 100%; scale: 1; [dir=rtl] & { translate: -100% } } } } } @media (width>=1280px) { .xl\:modal { @layer daisyui.l1.l2.l3 { pointer-events: none; visibility: hidden; width: 100%; max-width: none; height: 100%; max-height: none; color: inherit; transition: overlay .3s allow-discrete, visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out; overscroll-behavior: contain; z-index: 999; scrollbar-gutter: auto; background-color: #0000; place-items: center; margin: 0; padding: 0; display: grid; position: fixed; inset: 0; overflow: clip; &::backdrop { display: none } &[popover] { color: inherit; background: 0 0; border: 0; max-width: none; max-height: none; margin: 0; padding: 0; inset: 0; &::backdrop { background-color: oklch(0% 0 0/.4); transition: background-color .3s ease-out } } } @layer daisyui.l1.l2 { &.modal-open, &[open], &:popover-open, &:target, .modal-toggle:checked+& { pointer-events: auto; visibility: visible; opacity: 1; transition: visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out; background-color: oklch(0% 0 0/.4); & .modal-box { opacity: 1; translate: 0; scale: 1 } :root:has(&) { --page-scroll-lock: } } @starting-style { &.modal-open, &[open], &:popover-open, &:target, .modal-toggle:checked+& { opacity: 0 } } } } .xl\:modal-action { @layer daisyui.l1.l2.l3 { justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; display: flex } } .xl\:modal-toggle { @layer daisyui.l1.l2.l3 { appearance: none; opacity: 0; width: 0; height: 0; position: fixed } } .xl\:modal-backdrop { @layer daisyui.l1.l2.l3 { color: #0000; z-index: -1; grid-row-start: 1; grid-column-start: 1; place-self: stretch stretch; display: grid; & button { cursor: pointer } } } .xl\:modal-box { @layer daisyui.l1.l2.l3 { background-color: var(--color-base-100); border-top-left-radius: var(--modal-tl, var(--radius-box)); border-top-right-radius: var(--modal-tr, var(--radius-box)); border-bottom-left-radius: var(--modal-bl, var(--radius-box)); border-bottom-right-radius: var(--modal-br, var(--radius-box)); opacity: 0; overscroll-behavior: contain; grid-row-start: 1; grid-column-start: 1; width: 91.6667%; max-width: 32rem; max-height: 100vh; padding: 1.5rem; transition: translate .3s ease-out, scale .3s ease-out, opacity .2s ease-out 50ms, box-shadow .3s ease-out; overflow-y: auto; scale: .95; box-shadow: 0 25px 50px -12px oklch(0% 0 0/.25) } } .xl\:modal-top { @layer daisyui.l1.l2 { place-items: start; & .modal-box { --modal-tl: 0; --modal-tr: 0; --modal-bl: var(--radius-box); --modal-br: var(--radius-box); width: 100%; max-width: none; height: auto; max-height: calc(100vh - 5em); translate: 0 -100%; scale: 1 } } } .xl\:modal-middle { @layer daisyui.l1.l2 { place-items: center; & .modal-box { --modal-tl: var(--radius-box); --modal-tr: var(--radius-box); --modal-bl: var(--radius-box); --modal-br: var(--radius-box); width: 91.6667%; max-width: 32rem; height: auto; max-height: calc(100vh - 5em); translate: 0 2%; scale: .98 } } } .xl\:modal-bottom { @layer daisyui.l1.l2 { place-items: end; & .modal-box { --modal-tl: var(--radius-box); --modal-tr: var(--radius-box); --modal-bl: 0; --modal-br: 0; width: 100%; max-width: none; height: auto; max-height: calc(100vh - 5em); translate: 0 100%; scale: 1 } } } .xl\:modal-start { @layer daisyui.l1.l2 { place-items: start; & .modal-box { --modal-tl: 0; --modal-tr: var(--radius-box); --modal-bl: 0; --modal-br: var(--radius-box); width: auto; max-width: none; height: 100vh; max-height: none; translate: -100%; scale: 1; [dir=rtl] & { translate: 100% } } } } .xl\:modal-end { @layer daisyui.l1.l2 { place-items: end; & .modal-box { --modal-tl: var(--radius-box); --modal-tr: 0; --modal-bl: var(--radius-box); --modal-br: 0; width: auto; max-width: none; height: 100vh; max-height: none; translate: 100%; scale: 1; [dir=rtl] & { translate: -100% } } } } } @media (width>=1536px) { .\32 xl\:modal { @layer daisyui.l1.l2.l3 { pointer-events: none; visibility: hidden; width: 100%; max-width: none; height: 100%; max-height: none; color: inherit; transition: overlay .3s allow-discrete, visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out; overscroll-behavior: contain; z-index: 999; scrollbar-gutter: auto; background-color: #0000; place-items: center; margin: 0; padding: 0; display: grid; position: fixed; inset: 0; overflow: clip; &::backdrop { display: none } &[popover] { color: inherit; background: 0 0; border: 0; max-width: none; max-height: none; margin: 0; padding: 0; inset: 0; &::backdrop { background-color: oklch(0% 0 0/.4); transition: background-color .3s ease-out } } } @layer daisyui.l1.l2 { &.modal-open, &[open], &:popover-open, &:target, .modal-toggle:checked+& { pointer-events: auto; visibility: visible; opacity: 1; transition: visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out; background-color: oklch(0% 0 0/.4); & .modal-box { opacity: 1; translate: 0; scale: 1 } :root:has(&) { --page-scroll-lock: } } @starting-style { &.modal-open, &[open], &:popover-open, &:target, .modal-toggle:checked+& { opacity: 0 } } } } .\32 xl\:modal-action { @layer daisyui.l1.l2.l3 { justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; display: flex } } .\32 xl\:modal-toggle { @layer daisyui.l1.l2.l3 { appearance: none; opacity: 0; width: 0; height: 0; position: fixed } } .\32 xl\:modal-backdrop { @layer daisyui.l1.l2.l3 { color: #0000; z-index: -1; grid-row-start: 1; grid-column-start: 1; place-self: stretch stretch; display: grid; & button { cursor: pointer } } } .\32 xl\:modal-box { @layer daisyui.l1.l2.l3 { background-color: var(--color-base-100); border-top-left-radius: var(--modal-tl, var(--radius-box)); border-top-right-radius: var(--modal-tr, var(--radius-box)); border-bottom-left-radius: var(--modal-bl, var(--radius-box)); border-bottom-right-radius: var(--modal-br, var(--radius-box)); opacity: 0; overscroll-behavior: contain; grid-row-start: 1; grid-column-start: 1; width: 91.6667%; max-width: 32rem; max-height: 100vh; padding: 1.5rem; transition: translate .3s ease-out, scale .3s ease-out, opacity .2s ease-out 50ms, box-shadow .3s ease-out; overflow-y: auto; scale: .95; box-shadow: 0 25px 50px -12px oklch(0% 0 0/.25) } } .\32 xl\:modal-top { @layer daisyui.l1.l2 { place-items: start; & .modal-box { --modal-tl: 0; --modal-tr: 0; --modal-bl: var(--radius-box); --modal-br: var(--radius-box); width: 100%; max-width: none; height: auto; max-height: calc(100vh - 5em); translate: 0 -100%; scale: 1 } } } .\32 xl\:modal-middle { @layer daisyui.l1.l2 { place-items: center; & .modal-box { --modal-tl: var(--radius-box); --modal-tr: var(--radius-box); --modal-bl: var(--radius-box); --modal-br: var(--radius-box); width: 91.6667%; max-width: 32rem; height: auto; max-height: calc(100vh - 5em); translate: 0 2%; scale: .98 } } } .\32 xl\:modal-bottom { @layer daisyui.l1.l2 { place-items: end; & .modal-box { --modal-tl: var(--radius-box); --modal-tr: var(--radius-box); --modal-bl: 0; --modal-br: 0; width: 100%; max-width: none; height: auto; max-height: calc(100vh - 5em); translate: 0 100%; scale: 1 } } } .\32 xl\:modal-start { @layer daisyui.l1.l2 { place-items: start; & .modal-box { --modal-tl: 0; --modal-tr: var(--radius-box); --modal-bl: 0; --modal-br: var(--radius-box); width: auto; max-width: none; height: 100vh; max-height: none; translate: -100%; scale: 1; [dir=rtl] & { translate: 100% } } } } .\32 xl\:modal-end { @layer daisyui.l1.l2 { place-items: end; & .modal-box { --modal-tl: var(--radius-box); --modal-tr: 0; --modal-bl: var(--radius-box); --modal-br: 0; width: auto; max-width: none; height: 100vh; max-height: none; translate: 100%; scale: 1; [dir=rtl] & { translate: -100% } } } } } .link { @layer daisyui.l1.l2.l3 { cursor: pointer; text-decoration-line: underline; &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:focus-visible { outline-offset: 2px; outline: 2px solid } } } .link-hover { @layer daisyui.l1.l2 { text-decoration-line: none; &:hover { @media (hover:hover) { text-decoration-line: underline } } } } .link-primary { @layer daisyui.l1.l2 { color: var(--color-primary); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-primary) 80%, #000) } } } } .link-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-secondary) 80%, #000) } } } } .link-accent { @layer daisyui.l1.l2 { color: var(--color-accent); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-accent) 80%, #000) } } } } .link-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-neutral) 80%, #000) } } } } .link-success { @layer daisyui.l1.l2 { color: var(--color-success); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-success) 80%, #000) } } } } .link-info { @layer daisyui.l1.l2 { color: var(--color-info); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-info) 80%, #000) } } } } .link-warning { @layer daisyui.l1.l2 { color: var(--color-warning); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-warning) 80%, #000) } } } } .link-error { @layer daisyui.l1.l2 { color: var(--color-error); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-error) 80%, #000) } } } } @media (width>=640px) { .sm\:link { @layer daisyui.l1.l2.l3 { cursor: pointer; text-decoration-line: underline; &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:focus-visible { outline-offset: 2px; outline: 2px solid } } } .sm\:link-hover { @layer daisyui.l1.l2 { text-decoration-line: none; &:hover { @media (hover:hover) { text-decoration-line: underline } } } } .sm\:link-primary { @layer daisyui.l1.l2 { color: var(--color-primary); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-primary) 80%, #000) } } } } .sm\:link-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-secondary) 80%, #000) } } } } .sm\:link-accent { @layer daisyui.l1.l2 { color: var(--color-accent); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-accent) 80%, #000) } } } } .sm\:link-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-neutral) 80%, #000) } } } } .sm\:link-success { @layer daisyui.l1.l2 { color: var(--color-success); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-success) 80%, #000) } } } } .sm\:link-info { @layer daisyui.l1.l2 { color: var(--color-info); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-info) 80%, #000) } } } } .sm\:link-warning { @layer daisyui.l1.l2 { color: var(--color-warning); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-warning) 80%, #000) } } } } .sm\:link-error { @layer daisyui.l1.l2 { color: var(--color-error); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-error) 80%, #000) } } } } } @media (width>=768px) { .md\:link { @layer daisyui.l1.l2.l3 { cursor: pointer; text-decoration-line: underline; &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:focus-visible { outline-offset: 2px; outline: 2px solid } } } .md\:link-hover { @layer daisyui.l1.l2 { text-decoration-line: none; &:hover { @media (hover:hover) { text-decoration-line: underline } } } } .md\:link-primary { @layer daisyui.l1.l2 { color: var(--color-primary); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-primary) 80%, #000) } } } } .md\:link-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-secondary) 80%, #000) } } } } .md\:link-accent { @layer daisyui.l1.l2 { color: var(--color-accent); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-accent) 80%, #000) } } } } .md\:link-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-neutral) 80%, #000) } } } } .md\:link-success { @layer daisyui.l1.l2 { color: var(--color-success); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-success) 80%, #000) } } } } .md\:link-info { @layer daisyui.l1.l2 { color: var(--color-info); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-info) 80%, #000) } } } } .md\:link-warning { @layer daisyui.l1.l2 { color: var(--color-warning); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-warning) 80%, #000) } } } } .md\:link-error { @layer daisyui.l1.l2 { color: var(--color-error); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-error) 80%, #000) } } } } } @media (width>=1024px) { .lg\:link { @layer daisyui.l1.l2.l3 { cursor: pointer; text-decoration-line: underline; &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:focus-visible { outline-offset: 2px; outline: 2px solid } } } .lg\:link-hover { @layer daisyui.l1.l2 { text-decoration-line: none; &:hover { @media (hover:hover) { text-decoration-line: underline } } } } .lg\:link-primary { @layer daisyui.l1.l2 { color: var(--color-primary); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-primary) 80%, #000) } } } } .lg\:link-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-secondary) 80%, #000) } } } } .lg\:link-accent { @layer daisyui.l1.l2 { color: var(--color-accent); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-accent) 80%, #000) } } } } .lg\:link-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-neutral) 80%, #000) } } } } .lg\:link-success { @layer daisyui.l1.l2 { color: var(--color-success); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-success) 80%, #000) } } } } .lg\:link-info { @layer daisyui.l1.l2 { color: var(--color-info); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-info) 80%, #000) } } } } .lg\:link-warning { @layer daisyui.l1.l2 { color: var(--color-warning); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-warning) 80%, #000) } } } } .lg\:link-error { @layer daisyui.l1.l2 { color: var(--color-error); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-error) 80%, #000) } } } } } @media (width>=1280px) { .xl\:link { @layer daisyui.l1.l2.l3 { cursor: pointer; text-decoration-line: underline; &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:focus-visible { outline-offset: 2px; outline: 2px solid } } } .xl\:link-hover { @layer daisyui.l1.l2 { text-decoration-line: none; &:hover { @media (hover:hover) { text-decoration-line: underline } } } } .xl\:link-primary { @layer daisyui.l1.l2 { color: var(--color-primary); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-primary) 80%, #000) } } } } .xl\:link-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-secondary) 80%, #000) } } } } .xl\:link-accent { @layer daisyui.l1.l2 { color: var(--color-accent); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-accent) 80%, #000) } } } } .xl\:link-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-neutral) 80%, #000) } } } } .xl\:link-success { @layer daisyui.l1.l2 { color: var(--color-success); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-success) 80%, #000) } } } } .xl\:link-info { @layer daisyui.l1.l2 { color: var(--color-info); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-info) 80%, #000) } } } } .xl\:link-warning { @layer daisyui.l1.l2 { color: var(--color-warning); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-warning) 80%, #000) } } } } .xl\:link-error { @layer daisyui.l1.l2 { color: var(--color-error); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-error) 80%, #000) } } } } } @media (width>=1536px) { .\32 xl\:link { @layer daisyui.l1.l2.l3 { cursor: pointer; text-decoration-line: underline; &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors:active) { outline-offset: 2px; outline: 2px solid #0000 } } &:focus-visible { outline-offset: 2px; outline: 2px solid } } } .\32 xl\:link-hover { @layer daisyui.l1.l2 { text-decoration-line: none; &:hover { @media (hover:hover) { text-decoration-line: underline } } } } .\32 xl\:link-primary { @layer daisyui.l1.l2 { color: var(--color-primary); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-primary) 80%, #000) } } } } .\32 xl\:link-secondary { @layer daisyui.l1.l2 { color: var(--color-secondary); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-secondary) 80%, #000) } } } } .\32 xl\:link-accent { @layer daisyui.l1.l2 { color: var(--color-accent); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-accent) 80%, #000) } } } } .\32 xl\:link-neutral { @layer daisyui.l1.l2 { color: var(--color-neutral); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-neutral) 80%, #000) } } } } .\32 xl\:link-success { @layer daisyui.l1.l2 { color: var(--color-success); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-success) 80%, #000) } } } } .\32 xl\:link-info { @layer daisyui.l1.l2 { color: var(--color-info); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-info) 80%, #000) } } } } .\32 xl\:link-warning { @layer daisyui.l1.l2 { color: var(--color-warning); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-warning) 80%, #000) } } } } .\32 xl\:link-error { @layer daisyui.l1.l2 { color: var(--color-error); @media (hover:hover) { &:hover { color: color-mix(in oklab, var(--color-error) 80%, #000) } } } } } .swap { @layer daisyui.l1.l2 { cursor: pointer; vertical-align: middle; -webkit-user-select: none; user-select: none; place-content: center; display: inline-grid; position: relative; & input { appearance: none; border: none } &>* { grid-row-start: 1; grid-column-start: 1; @media (prefers-reduced-motion:no-preference) { transition-property: transform, rotate, opacity; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1) } } & .swap-on, & .swap-indeterminate, & input:indeterminate~.swap-on { opacity: 0 } & input:is(:checked, :indeterminate) { &~.swap-off { opacity: 0 } } & input:checked~.swap-on, & input:indeterminate~.swap-indeterminate { opacity: 1; backface-visibility: visible } } } .swap-active { @layer daisyui.l1 { & .swap-off { opacity: 0 } & .swap-on { opacity: 1 } &.swap-rotate { & .swap-on { rotate: 0deg } & .swap-off { rotate: -45deg } } &.swap-flip { & .swap-on { transform: rotateY(0) } & .swap-off { backface-visibility: hidden; opacity: 1; transform: rotateY(-180deg) } } } } .swap-rotate { @layer daisyui.l1 { & .swap-on, & input:indeterminate~.swap-on { rotate: 45deg } & input:is(:checked, :indeterminate)~.swap-on, &.swap-active .swap-on { rotate: 0deg } & input:is(:checked, :indeterminate)~.swap-off, &.swap-active .swap-off { rotate: -45deg } } } .swap-flip { @layer daisyui.l1 { transform-style: preserve-3d; perspective: 20rem; & .swap-on, & .swap-indeterminate, & input:indeterminate~.swap-on { backface-visibility: hidden; transform: rotateY(180deg) } & input:is(:checked, :indeterminate)~.swap-on, &.swap-active .swap-on { transform: rotateY(0) } & input:is(:checked, :indeterminate)~.swap-off, &.swap-active .swap-off { backface-visibility: hidden; opacity: 1; transform: rotateY(-180deg) } } } .fab { @layer daisyui.l1.l2.l3 { pointer-events: none; inset-inline-end: 1rem; z-index: 999; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); white-space: nowrap; -webkit-user-select: none; user-select: none; flex-direction: column-reverse; align-items: flex-end; gap: .5rem; display: flex; position: fixed; bottom: 1rem; &>* { pointer-events: auto; align-items: center; gap: .5rem; display: flex; &:hover, &:has(:focus-visible) { z-index: 1 } } &>[tabindex] { &:first-child { transition-property: opacity, visibility, rotate; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); display: grid; position: relative } } & .fab-close, & .fab-main-action { inset-inline-end: 0; position: absolute; bottom: 0 } &:focus-within { &:has(.fab-close), &:has(.fab-main-action) { &>[tabindex] { opacity: 0; rotate: 90deg } } } &>:nth-child(n+2) { visibility: hidden; --tw-scale-x: 80%; --tw-scale-y: 80%; --tw-scale-z: 80%; scale: var(--tw-scale-x) var(--tw-scale-y); opacity: 0; transition-property: opacity, scale, visibility; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); &.fab-main-action, &.fab-close { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y) } } &>:nth-child(3) { transition-delay: 30ms } &>:nth-child(4) { transition-delay: 60ms } &>:nth-child(5) { transition-delay: 90ms } &>:nth-child(6) { transition-delay: .12s } &:focus-within { &>[tabindex]:first-child { pointer-events: none } &>:nth-child(n+2) { visibility: visible; --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); opacity: 1 } } } } .fab-flower { @layer daisyui.l1.l2.l3 { --position: 0rem; display: grid; &>:first-child, &>.fab-main-action, &>.fab-close { --position: 0rem } &>* { --degree: 180deg; --flip-degree: calc(180deg - var(--degree)); transform: translateX(calc(cos(var(--degree)) * var(--position))) translateY(calc(sin(var(--degree)) * -1 * var(--position))); grid-area: 1/1; [dir=rtl] & { transform: translateX(calc(cos(var(--flip-degree)) * var(--position))) translateY(calc(sin(var(--flip-degree)) * -1 * var(--position))) } } &>:nth-child(n+7) { display: none } &:has(:nth-child(3)) { --position: 140%; &>:nth-child(3) { --degree: 135deg } } &:has(:nth-child(4)) { --position: 140%; &>:nth-child(3) { --degree: 165deg } &>:nth-child(4) { --degree: 105deg } } &:has(:nth-child(5)) { --position: 180%; &>:nth-child(3) { --degree: 180deg } &>:nth-child(4) { --degree: 135deg } &>:nth-child(5) { --degree: 90deg } } &:has(:nth-child(6)) { --position: 220%; &>:nth-child(3) { --degree: 180deg } &>:nth-child(4) { --degree: 150deg } &>:nth-child(5) { --degree: 120deg } &>:nth-child(6) { --degree: 90deg } } &:not(:has(.fab-main-action, .fab-close)) { &>:nth-child(n+6) { display: none } &:has(:nth-child(2)) { --position: 140%; &>:nth-child(2) { --degree: 135deg } } &:has(:nth-child(3)) { --position: 140%; &>:nth-child(2) { --degree: 165deg } &>:nth-child(3) { --degree: 105deg } } &:has(:nth-child(4)) { --position: 180%; &>:nth-child(2) { --degree: 180deg } &>:nth-child(3) { --degree: 135deg } &>:nth-child(4) { --degree: 90deg } } &:has(:nth-child(5)) { --position: 220%; &>:nth-child(2) { --degree: 180deg } &>:nth-child(3) { --degree: 150deg } &>:nth-child(4) { --degree: 120deg } &>:nth-child(5) { --degree: 90deg } } } } } @media (width>=640px) { .sm\:fab { @layer daisyui.l1.l2.l3 { pointer-events: none; inset-inline-end: 1rem; z-index: 999; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); white-space: nowrap; -webkit-user-select: none; user-select: none; flex-direction: column-reverse; align-items: flex-end; gap: .5rem; display: flex; position: fixed; bottom: 1rem; &>* { pointer-events: auto; align-items: center; gap: .5rem; display: flex; &:hover, &:has(:focus-visible) { z-index: 1 } } &>[tabindex] { &:first-child { transition-property: opacity, visibility, rotate; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); display: grid; position: relative } } & .fab-close, & .fab-main-action { inset-inline-end: 0; position: absolute; bottom: 0 } &:focus-within { &:has(.fab-close), &:has(.fab-main-action) { &>[tabindex] { opacity: 0; rotate: 90deg } } } &>:nth-child(n+2) { visibility: hidden; --tw-scale-x: 80%; --tw-scale-y: 80%; --tw-scale-z: 80%; scale: var(--tw-scale-x) var(--tw-scale-y); opacity: 0; transition-property: opacity, scale, visibility; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); &.fab-main-action, &.fab-close { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y) } } &>:nth-child(3) { transition-delay: 30ms } &>:nth-child(4) { transition-delay: 60ms } &>:nth-child(5) { transition-delay: 90ms } &>:nth-child(6) { transition-delay: .12s } &:focus-within { &>[tabindex]:first-child { pointer-events: none } &>:nth-child(n+2) { visibility: visible; --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); opacity: 1 } } } } .sm\:fab-flower { @layer daisyui.l1.l2.l3 { --position: 0rem; display: grid; &>:first-child, &>.fab-main-action, &>.fab-close { --position: 0rem } &>* { --degree: 180deg; --flip-degree: calc(180deg - var(--degree)); transform: translateX(calc(cos(var(--degree)) * var(--position))) translateY(calc(sin(var(--degree)) * -1 * var(--position))); grid-area: 1/1; [dir=rtl] & { transform: translateX(calc(cos(var(--flip-degree)) * var(--position))) translateY(calc(sin(var(--flip-degree)) * -1 * var(--position))) } } &>:nth-child(n+7) { display: none } &:has(:nth-child(3)) { --position: 140%; &>:nth-child(3) { --degree: 135deg } } &:has(:nth-child(4)) { --position: 140%; &>:nth-child(3) { --degree: 165deg } &>:nth-child(4) { --degree: 105deg } } &:has(:nth-child(5)) { --position: 180%; &>:nth-child(3) { --degree: 180deg } &>:nth-child(4) { --degree: 135deg } &>:nth-child(5) { --degree: 90deg } } &:has(:nth-child(6)) { --position: 220%; &>:nth-child(3) { --degree: 180deg } &>:nth-child(4) { --degree: 150deg } &>:nth-child(5) { --degree: 120deg } &>:nth-child(6) { --degree: 90deg } } &:not(:has(.fab-main-action, .fab-close)) { &>:nth-child(n+6) { display: none } &:has(:nth-child(2)) { --position: 140%; &>:nth-child(2) { --degree: 135deg } } &:has(:nth-child(3)) { --position: 140%; &>:nth-child(2) { --degree: 165deg } &>:nth-child(3) { --degree: 105deg } } &:has(:nth-child(4)) { --position: 180%; &>:nth-child(2) { --degree: 180deg } &>:nth-child(3) { --degree: 135deg } &>:nth-child(4) { --degree: 90deg } } &:has(:nth-child(5)) { --position: 220%; &>:nth-child(2) { --degree: 180deg } &>:nth-child(3) { --degree: 150deg } &>:nth-child(4) { --degree: 120deg } &>:nth-child(5) { --degree: 90deg } } } } } } @media (width>=768px) { .md\:fab { @layer daisyui.l1.l2.l3 { pointer-events: none; inset-inline-end: 1rem; z-index: 999; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); white-space: nowrap; -webkit-user-select: none; user-select: none; flex-direction: column-reverse; align-items: flex-end; gap: .5rem; display: flex; position: fixed; bottom: 1rem; &>* { pointer-events: auto; align-items: center; gap: .5rem; display: flex; &:hover, &:has(:focus-visible) { z-index: 1 } } &>[tabindex] { &:first-child { transition-property: opacity, visibility, rotate; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); display: grid; position: relative } } & .fab-close, & .fab-main-action { inset-inline-end: 0; position: absolute; bottom: 0 } &:focus-within { &:has(.fab-close), &:has(.fab-main-action) { &>[tabindex] { opacity: 0; rotate: 90deg } } } &>:nth-child(n+2) { visibility: hidden; --tw-scale-x: 80%; --tw-scale-y: 80%; --tw-scale-z: 80%; scale: var(--tw-scale-x) var(--tw-scale-y); opacity: 0; transition-property: opacity, scale, visibility; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); &.fab-main-action, &.fab-close { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y) } } &>:nth-child(3) { transition-delay: 30ms } &>:nth-child(4) { transition-delay: 60ms } &>:nth-child(5) { transition-delay: 90ms } &>:nth-child(6) { transition-delay: .12s } &:focus-within { &>[tabindex]:first-child { pointer-events: none } &>:nth-child(n+2) { visibility: visible; --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); opacity: 1 } } } } .md\:fab-flower { @layer daisyui.l1.l2.l3 { --position: 0rem; display: grid; &>:first-child, &>.fab-main-action, &>.fab-close { --position: 0rem } &>* { --degree: 180deg; --flip-degree: calc(180deg - var(--degree)); transform: translateX(calc(cos(var(--degree)) * var(--position))) translateY(calc(sin(var(--degree)) * -1 * var(--position))); grid-area: 1/1; [dir=rtl] & { transform: translateX(calc(cos(var(--flip-degree)) * var(--position))) translateY(calc(sin(var(--flip-degree)) * -1 * var(--position))) } } &>:nth-child(n+7) { display: none } &:has(:nth-child(3)) { --position: 140%; &>:nth-child(3) { --degree: 135deg } } &:has(:nth-child(4)) { --position: 140%; &>:nth-child(3) { --degree: 165deg } &>:nth-child(4) { --degree: 105deg } } &:has(:nth-child(5)) { --position: 180%; &>:nth-child(3) { --degree: 180deg } &>:nth-child(4) { --degree: 135deg } &>:nth-child(5) { --degree: 90deg } } &:has(:nth-child(6)) { --position: 220%; &>:nth-child(3) { --degree: 180deg } &>:nth-child(4) { --degree: 150deg } &>:nth-child(5) { --degree: 120deg } &>:nth-child(6) { --degree: 90deg } } &:not(:has(.fab-main-action, .fab-close)) { &>:nth-child(n+6) { display: none } &:has(:nth-child(2)) { --position: 140%; &>:nth-child(2) { --degree: 135deg } } &:has(:nth-child(3)) { --position: 140%; &>:nth-child(2) { --degree: 165deg } &>:nth-child(3) { --degree: 105deg } } &:has(:nth-child(4)) { --position: 180%; &>:nth-child(2) { --degree: 180deg } &>:nth-child(3) { --degree: 135deg } &>:nth-child(4) { --degree: 90deg } } &:has(:nth-child(5)) { --position: 220%; &>:nth-child(2) { --degree: 180deg } &>:nth-child(3) { --degree: 150deg } &>:nth-child(4) { --degree: 120deg } &>:nth-child(5) { --degree: 90deg } } } } } } @media (width>=1024px) { .lg\:fab { @layer daisyui.l1.l2.l3 { pointer-events: none; inset-inline-end: 1rem; z-index: 999; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); white-space: nowrap; -webkit-user-select: none; user-select: none; flex-direction: column-reverse; align-items: flex-end; gap: .5rem; display: flex; position: fixed; bottom: 1rem; &>* { pointer-events: auto; align-items: center; gap: .5rem; display: flex; &:hover, &:has(:focus-visible) { z-index: 1 } } &>[tabindex] { &:first-child { transition-property: opacity, visibility, rotate; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); display: grid; position: relative } } & .fab-close, & .fab-main-action { inset-inline-end: 0; position: absolute; bottom: 0 } &:focus-within { &:has(.fab-close), &:has(.fab-main-action) { &>[tabindex] { opacity: 0; rotate: 90deg } } } &>:nth-child(n+2) { visibility: hidden; --tw-scale-x: 80%; --tw-scale-y: 80%; --tw-scale-z: 80%; scale: var(--tw-scale-x) var(--tw-scale-y); opacity: 0; transition-property: opacity, scale, visibility; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); &.fab-main-action, &.fab-close { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y) } } &>:nth-child(3) { transition-delay: 30ms } &>:nth-child(4) { transition-delay: 60ms } &>:nth-child(5) { transition-delay: 90ms } &>:nth-child(6) { transition-delay: .12s } &:focus-within { &>[tabindex]:first-child { pointer-events: none } &>:nth-child(n+2) { visibility: visible; --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); opacity: 1 } } } } .lg\:fab-flower { @layer daisyui.l1.l2.l3 { --position: 0rem; display: grid; &>:first-child, &>.fab-main-action, &>.fab-close { --position: 0rem } &>* { --degree: 180deg; --flip-degree: calc(180deg - var(--degree)); transform: translateX(calc(cos(var(--degree)) * var(--position))) translateY(calc(sin(var(--degree)) * -1 * var(--position))); grid-area: 1/1; [dir=rtl] & { transform: translateX(calc(cos(var(--flip-degree)) * var(--position))) translateY(calc(sin(var(--flip-degree)) * -1 * var(--position))) } } &>:nth-child(n+7) { display: none } &:has(:nth-child(3)) { --position: 140%; &>:nth-child(3) { --degree: 135deg } } &:has(:nth-child(4)) { --position: 140%; &>:nth-child(3) { --degree: 165deg } &>:nth-child(4) { --degree: 105deg } } &:has(:nth-child(5)) { --position: 180%; &>:nth-child(3) { --degree: 180deg } &>:nth-child(4) { --degree: 135deg } &>:nth-child(5) { --degree: 90deg } } &:has(:nth-child(6)) { --position: 220%; &>:nth-child(3) { --degree: 180deg } &>:nth-child(4) { --degree: 150deg } &>:nth-child(5) { --degree: 120deg } &>:nth-child(6) { --degree: 90deg } } &:not(:has(.fab-main-action, .fab-close)) { &>:nth-child(n+6) { display: none } &:has(:nth-child(2)) { --position: 140%; &>:nth-child(2) { --degree: 135deg } } &:has(:nth-child(3)) { --position: 140%; &>:nth-child(2) { --degree: 165deg } &>:nth-child(3) { --degree: 105deg } } &:has(:nth-child(4)) { --position: 180%; &>:nth-child(2) { --degree: 180deg } &>:nth-child(3) { --degree: 135deg } &>:nth-child(4) { --degree: 90deg } } &:has(:nth-child(5)) { --position: 220%; &>:nth-child(2) { --degree: 180deg } &>:nth-child(3) { --degree: 150deg } &>:nth-child(4) { --degree: 120deg } &>:nth-child(5) { --degree: 90deg } } } } } } @media (width>=1280px) { .xl\:fab { @layer daisyui.l1.l2.l3 { pointer-events: none; inset-inline-end: 1rem; z-index: 999; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); white-space: nowrap; -webkit-user-select: none; user-select: none; flex-direction: column-reverse; align-items: flex-end; gap: .5rem; display: flex; position: fixed; bottom: 1rem; &>* { pointer-events: auto; align-items: center; gap: .5rem; display: flex; &:hover, &:has(:focus-visible) { z-index: 1 } } &>[tabindex] { &:first-child { transition-property: opacity, visibility, rotate; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); display: grid; position: relative } } & .fab-close, & .fab-main-action { inset-inline-end: 0; position: absolute; bottom: 0 } &:focus-within { &:has(.fab-close), &:has(.fab-main-action) { &>[tabindex] { opacity: 0; rotate: 90deg } } } &>:nth-child(n+2) { visibility: hidden; --tw-scale-x: 80%; --tw-scale-y: 80%; --tw-scale-z: 80%; scale: var(--tw-scale-x) var(--tw-scale-y); opacity: 0; transition-property: opacity, scale, visibility; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); &.fab-main-action, &.fab-close { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y) } } &>:nth-child(3) { transition-delay: 30ms } &>:nth-child(4) { transition-delay: 60ms } &>:nth-child(5) { transition-delay: 90ms } &>:nth-child(6) { transition-delay: .12s } &:focus-within { &>[tabindex]:first-child { pointer-events: none } &>:nth-child(n+2) { visibility: visible; --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); opacity: 1 } } } } .xl\:fab-flower { @layer daisyui.l1.l2.l3 { --position: 0rem; display: grid; &>:first-child, &>.fab-main-action, &>.fab-close { --position: 0rem } &>* { --degree: 180deg; --flip-degree: calc(180deg - var(--degree)); transform: translateX(calc(cos(var(--degree)) * var(--position))) translateY(calc(sin(var(--degree)) * -1 * var(--position))); grid-area: 1/1; [dir=rtl] & { transform: translateX(calc(cos(var(--flip-degree)) * var(--position))) translateY(calc(sin(var(--flip-degree)) * -1 * var(--position))) } } &>:nth-child(n+7) { display: none } &:has(:nth-child(3)) { --position: 140%; &>:nth-child(3) { --degree: 135deg } } &:has(:nth-child(4)) { --position: 140%; &>:nth-child(3) { --degree: 165deg } &>:nth-child(4) { --degree: 105deg } } &:has(:nth-child(5)) { --position: 180%; &>:nth-child(3) { --degree: 180deg } &>:nth-child(4) { --degree: 135deg } &>:nth-child(5) { --degree: 90deg } } &:has(:nth-child(6)) { --position: 220%; &>:nth-child(3) { --degree: 180deg } &>:nth-child(4) { --degree: 150deg } &>:nth-child(5) { --degree: 120deg } &>:nth-child(6) { --degree: 90deg } } &:not(:has(.fab-main-action, .fab-close)) { &>:nth-child(n+6) { display: none } &:has(:nth-child(2)) { --position: 140%; &>:nth-child(2) { --degree: 135deg } } &:has(:nth-child(3)) { --position: 140%; &>:nth-child(2) { --degree: 165deg } &>:nth-child(3) { --degree: 105deg } } &:has(:nth-child(4)) { --position: 180%; &>:nth-child(2) { --degree: 180deg } &>:nth-child(3) { --degree: 135deg } &>:nth-child(4) { --degree: 90deg } } &:has(:nth-child(5)) { --position: 220%; &>:nth-child(2) { --degree: 180deg } &>:nth-child(3) { --degree: 150deg } &>:nth-child(4) { --degree: 120deg } &>:nth-child(5) { --degree: 90deg } } } } } } @media (width>=1536px) { .\32 xl\:fab { @layer daisyui.l1.l2.l3 { pointer-events: none; inset-inline-end: 1rem; z-index: 999; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); white-space: nowrap; -webkit-user-select: none; user-select: none; flex-direction: column-reverse; align-items: flex-end; gap: .5rem; display: flex; position: fixed; bottom: 1rem; &>* { pointer-events: auto; align-items: center; gap: .5rem; display: flex; &:hover, &:has(:focus-visible) { z-index: 1 } } &>[tabindex] { &:first-child { transition-property: opacity, visibility, rotate; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); display: grid; position: relative } } & .fab-close, & .fab-main-action { inset-inline-end: 0; position: absolute; bottom: 0 } &:focus-within { &:has(.fab-close), &:has(.fab-main-action) { &>[tabindex] { opacity: 0; rotate: 90deg } } } &>:nth-child(n+2) { visibility: hidden; --tw-scale-x: 80%; --tw-scale-y: 80%; --tw-scale-z: 80%; scale: var(--tw-scale-x) var(--tw-scale-y); opacity: 0; transition-property: opacity, scale, visibility; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); &.fab-main-action, &.fab-close { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y) } } &>:nth-child(3) { transition-delay: 30ms } &>:nth-child(4) { transition-delay: 60ms } &>:nth-child(5) { transition-delay: 90ms } &>:nth-child(6) { transition-delay: .12s } &:focus-within { &>[tabindex]:first-child { pointer-events: none } &>:nth-child(n+2) { visibility: visible; --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); opacity: 1 } } } } .\32 xl\:fab-flower { @layer daisyui.l1.l2.l3 { --position: 0rem; display: grid; &>:first-child, &>.fab-main-action, &>.fab-close { --position: 0rem } &>* { --degree: 180deg; --flip-degree: calc(180deg - var(--degree)); transform: translateX(calc(cos(var(--degree)) * var(--position))) translateY(calc(sin(var(--degree)) * -1 * var(--position))); grid-area: 1/1; [dir=rtl] & { transform: translateX(calc(cos(var(--flip-degree)) * var(--position))) translateY(calc(sin(var(--flip-degree)) * -1 * var(--position))) } } &>:nth-child(n+7) { display: none } &:has(:nth-child(3)) { --position: 140%; &>:nth-child(3) { --degree: 135deg } } &:has(:nth-child(4)) { --position: 140%; &>:nth-child(3) { --degree: 165deg } &>:nth-child(4) { --degree: 105deg } } &:has(:nth-child(5)) { --position: 180%; &>:nth-child(3) { --degree: 180deg } &>:nth-child(4) { --degree: 135deg } &>:nth-child(5) { --degree: 90deg } } &:has(:nth-child(6)) { --position: 220%; &>:nth-child(3) { --degree: 180deg } &>:nth-child(4) { --degree: 150deg } &>:nth-child(5) { --degree: 120deg } &>:nth-child(6) { --degree: 90deg } } &:not(:has(.fab-main-action, .fab-close)) { &>:nth-child(n+6) { display: none } &:has(:nth-child(2)) { --position: 140%; &>:nth-child(2) { --degree: 135deg } } &:has(:nth-child(3)) { --position: 140%; &>:nth-child(2) { --degree: 165deg } &>:nth-child(3) { --degree: 105deg } } &:has(:nth-child(4)) { --position: 180%; &>:nth-child(2) { --degree: 180deg } &>:nth-child(3) { --degree: 135deg } &>:nth-child(4) { --degree: 90deg } } &:has(:nth-child(5)) { --position: 220%; &>:nth-child(2) { --degree: 180deg } &>:nth-child(3) { --degree: 150deg } &>:nth-child(4) { --degree: 120deg } &>:nth-child(5) { --degree: 90deg } } } } } } .mask { @layer daisyui.l1.l2.l3 { vertical-align: middle; display: inline-block; mask-position: 50%; mask-size: contain; mask-repeat: no-repeat } } .mask-half-1 { @layer daisyui.l1.l2 { mask-position: 0; mask-size: 200%; &:where(:dir(rtl), [dir=rtl], [dir=rtl] *) { mask-position: 100% } } } .mask-half-2 { @layer daisyui.l1.l2 { mask-position: 100%; mask-size: 200%; &:where(:dir(rtl), [dir=rtl], [dir=rtl] *) { mask-position: 0 } } } .mask-squircle { @layer daisyui.l1.l2 { mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e") } } .mask-decagon { @layer daisyui.l1.l2 { mask-image: url("data:image/svg+xml,%3csvg width='192' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 58.779 19.098 36.327 50v61.804l-36.327 50L96 200l-58.779-19.098-36.327-50V69.098l36.327-50z' fill-rule='evenodd'/%3e%3c/svg%3e") } } .mask-diamond { @layer daisyui.l1.l2 { mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m100 0 100 100-100 100L0 100z' fill-rule='evenodd'/%3e%3c/svg%3e") } } .mask-heart { @layer daisyui.l1.l2 { mask-image: url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e") } } .mask-hexagon { @layer daisyui.l1.l2 { mask-image: url("data:image/svg+xml,%3csvg width='182' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.3 65.486c0-9.196 6.687-20.063 14.211-25.078l61.86-35.946c8.36-5.016 20.899-5.016 29.258 0l61.86 35.946c8.36 5.015 14.211 15.882 14.211 25.078v71.055c0 9.196-6.687 20.063-14.211 25.079l-61.86 35.945c-8.36 4.18-20.899 4.18-29.258 0L14.51 161.62C6.151 157.44.3 145.737.3 136.54V65.486Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e") } } .mask-hexagon-2 { @layer daisyui.l1.l2 { mask-image: url("data:image/svg+xml,%3csvg width='200' height='182' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M64.786 181.4c-9.196 0-20.063-6.687-25.079-14.21L3.762 105.33c-5.016-8.36-5.016-20.9 0-29.259l35.945-61.86C44.723 5.851 55.59 0 64.786 0h71.055c9.196 0 20.063 6.688 25.079 14.211l35.945 61.86c4.18 8.36 4.18 20.899 0 29.258l-35.945 61.86c-4.18 8.36-15.883 14.211-25.079 14.211H64.786Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e") } } .mask-circle { @layer daisyui.l1.l2 { mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100' fill-rule='evenodd'/%3e%3c/svg%3e") } } .mask-pentagon { @layer daisyui.l1.l2 { mask-image: url("data:image/svg+xml,%3csvg width='192' height='181' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 95.106 69.098-36.327 111.804H37.22L.894 69.098z' fill-rule='evenodd'/%3e%3c/svg%3e") } } .mask-star { @layer daisyui.l1.l2 { mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e") } } .mask-star-2 { @layer daisyui.l1.l2 { mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e") } } .mask-triangle { @layer daisyui.l1.l2 { mask-image: url("data:image/svg+xml,%3csvg width='174' height='149' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 148.476-86.603.185L43.86 74.423 87 0l43.14 74.423 43.463 74.238z' fill-rule='evenodd'/%3e%3c/svg%3e") } } .mask-triangle-2 { @layer daisyui.l1.l2 { mask-image: url("data:image/svg+xml,%3csvg width='174' height='150' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 .738 86.603-.184-43.463 74.238L87 149.214 43.86 74.792.397.554z' fill-rule='evenodd'/%3e%3c/svg%3e") } } .mask-triangle-3 { @layer daisyui.l1.l2 { mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m149.369 87.107.185 86.603-74.239-43.463L.893 87.107l74.422-43.14L149.554.505z' fill-rule='evenodd'/%3e%3c/svg%3e") } } .mask-triangle-4 { @layer daisyui.l1.l2 { mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.631 87.107.446.505l74.239 43.462 74.422 43.14-74.422 43.14L.446 173.71z' fill-rule='evenodd'/%3e%3c/svg%3e") } } .join { --join-ss: 0; --join-se: 0; --join-es: 0; --join-ee: 0; --join-v: 0; --join-h: 1; align-items: stretch; display: inline-flex; @scope(&) { &>:where(:focus, :has(:focus)) { z-index: 1 } @media (hover:hover) { &>:where(.btn:hover, :has(.btn:hover)) { isolation: isolate } } & :where(:scope>:first-child) { --join-ss: var(--radius-field); --join-se: calc(var(--radius-field) * var(--join-v)); --join-es: calc(var(--radius-field) * var(--join-h)); --join-ee: 0 } & :where(:scope>:last-child) { --join-ss: 0; --join-se: calc(var(--radius-field) * var(--join-h)); --join-es: calc(var(--radius-field) * var(--join-v)); --join-ee: var(--radius-field) } & :where(:scope>:only-child) { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field) } } } .join-item { @layer daisyui.l1.l2.l3.l4 { &>* { --join-ss: initial; --join-se: initial; --join-es: initial; --join-ee: initial } } border-style:solid; border-width:var(--border, 1px); border-start-start-radius:var(--join-ss); border-start-end-radius:var(--join-se); border-end-end-radius:var(--join-ee); border-end-start-radius:var(--join-es); &:not(:first-child, :disabled, [disabled], .btn-disabled) { margin-block-start: calc(var(--border, 1px) * -1 * var(--join-v)); margin-inline-start: calc(var(--border, 1px) * -1 * var(--join-h)) } &:is(:disabled, [disabled], .btn-disabled) { border-width: var(--border, 1px); border-inline-end-width: calc(var(--border, 1px) * var(--join-v)); border-block-end-width: calc(var(--border, 1px) * var(--join-h)) } } .join-vertical { --join-v: 1; --join-h: 0; flex-direction: column } .join-horizontal { --join-v: 0; --join-h: 1; flex-direction: row } @media (width>=640px) { .sm\:join { --join-ss: 0; --join-se: 0; --join-es: 0; --join-ee: 0; --join-v: 0; --join-h: 1; align-items: stretch; display: inline-flex; @scope(&) { &>:where(:focus, :has(:focus)) { z-index: 1 } @media (hover:hover) { &>:where(.btn:hover, :has(.btn:hover)) { isolation: isolate } } & :where(:scope>:first-child) { --join-ss: var(--radius-field); --join-se: calc(var(--radius-field) * var(--join-v)); --join-es: calc(var(--radius-field) * var(--join-h)); --join-ee: 0 } & :where(:scope>:last-child) { --join-ss: 0; --join-se: calc(var(--radius-field) * var(--join-h)); --join-es: calc(var(--radius-field) * var(--join-v)); --join-ee: var(--radius-field) } & :where(:scope>:only-child) { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field) } } } .sm\:join-item { @layer daisyui.l1.l2.l3.l4 { &>* { --join-ss: initial; --join-se: initial; --join-es: initial; --join-ee: initial } } border-style:solid; border-width:var(--border, 1px); border-start-start-radius:var(--join-ss); border-start-end-radius:var(--join-se); border-end-end-radius:var(--join-ee); border-end-start-radius:var(--join-es); &:not(:first-child, :disabled, [disabled], .btn-disabled) { margin-block-start: calc(var(--border, 1px) * -1 * var(--join-v)); margin-inline-start: calc(var(--border, 1px) * -1 * var(--join-h)) } &:is(:disabled, [disabled], .btn-disabled) { border-width: var(--border, 1px); border-inline-end-width: calc(var(--border, 1px) * var(--join-v)); border-block-end-width: calc(var(--border, 1px) * var(--join-h)) } } .sm\:join-vertical { --join-v: 1; --join-h: 0; flex-direction: column } .sm\:join-horizontal { --join-v: 0; --join-h: 1; flex-direction: row } } @media (width>=768px) { .md\:join { --join-ss: 0; --join-se: 0; --join-es: 0; --join-ee: 0; --join-v: 0; --join-h: 1; align-items: stretch; display: inline-flex; @scope(&) { &>:where(:focus, :has(:focus)) { z-index: 1 } @media (hover:hover) { &>:where(.btn:hover, :has(.btn:hover)) { isolation: isolate } } & :where(:scope>:first-child) { --join-ss: var(--radius-field); --join-se: calc(var(--radius-field) * var(--join-v)); --join-es: calc(var(--radius-field) * var(--join-h)); --join-ee: 0 } & :where(:scope>:last-child) { --join-ss: 0; --join-se: calc(var(--radius-field) * var(--join-h)); --join-es: calc(var(--radius-field) * var(--join-v)); --join-ee: var(--radius-field) } & :where(:scope>:only-child) { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field) } } } .md\:join-item { @layer daisyui.l1.l2.l3.l4 { &>* { --join-ss: initial; --join-se: initial; --join-es: initial; --join-ee: initial } } border-style:solid; border-width:var(--border, 1px); border-start-start-radius:var(--join-ss); border-start-end-radius:var(--join-se); border-end-end-radius:var(--join-ee); border-end-start-radius:var(--join-es); &:not(:first-child, :disabled, [disabled], .btn-disabled) { margin-block-start: calc(var(--border, 1px) * -1 * var(--join-v)); margin-inline-start: calc(var(--border, 1px) * -1 * var(--join-h)) } &:is(:disabled, [disabled], .btn-disabled) { border-width: var(--border, 1px); border-inline-end-width: calc(var(--border, 1px) * var(--join-v)); border-block-end-width: calc(var(--border, 1px) * var(--join-h)) } } .md\:join-vertical { --join-v: 1; --join-h: 0; flex-direction: column } .md\:join-horizontal { --join-v: 0; --join-h: 1; flex-direction: row } } @media (width>=1024px) { .lg\:join { --join-ss: 0; --join-se: 0; --join-es: 0; --join-ee: 0; --join-v: 0; --join-h: 1; align-items: stretch; display: inline-flex; @scope(&) { &>:where(:focus, :has(:focus)) { z-index: 1 } @media (hover:hover) { &>:where(.btn:hover, :has(.btn:hover)) { isolation: isolate } } & :where(:scope>:first-child) { --join-ss: var(--radius-field); --join-se: calc(var(--radius-field) * var(--join-v)); --join-es: calc(var(--radius-field) * var(--join-h)); --join-ee: 0 } & :where(:scope>:last-child) { --join-ss: 0; --join-se: calc(var(--radius-field) * var(--join-h)); --join-es: calc(var(--radius-field) * var(--join-v)); --join-ee: var(--radius-field) } & :where(:scope>:only-child) { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field) } } } .lg\:join-item { @layer daisyui.l1.l2.l3.l4 { &>* { --join-ss: initial; --join-se: initial; --join-es: initial; --join-ee: initial } } border-style:solid; border-width:var(--border, 1px); border-start-start-radius:var(--join-ss); border-start-end-radius:var(--join-se); border-end-end-radius:var(--join-ee); border-end-start-radius:var(--join-es); &:not(:first-child, :disabled, [disabled], .btn-disabled) { margin-block-start: calc(var(--border, 1px) * -1 * var(--join-v)); margin-inline-start: calc(var(--border, 1px) * -1 * var(--join-h)) } &:is(:disabled, [disabled], .btn-disabled) { border-width: var(--border, 1px); border-inline-end-width: calc(var(--border, 1px) * var(--join-v)); border-block-end-width: calc(var(--border, 1px) * var(--join-h)) } } .lg\:join-vertical { --join-v: 1; --join-h: 0; flex-direction: column } .lg\:join-horizontal { --join-v: 0; --join-h: 1; flex-direction: row } } @media (width>=1280px) { .xl\:join { --join-ss: 0; --join-se: 0; --join-es: 0; --join-ee: 0; --join-v: 0; --join-h: 1; align-items: stretch; display: inline-flex; @scope(&) { &>:where(:focus, :has(:focus)) { z-index: 1 } @media (hover:hover) { &>:where(.btn:hover, :has(.btn:hover)) { isolation: isolate } } & :where(:scope>:first-child) { --join-ss: var(--radius-field); --join-se: calc(var(--radius-field) * var(--join-v)); --join-es: calc(var(--radius-field) * var(--join-h)); --join-ee: 0 } & :where(:scope>:last-child) { --join-ss: 0; --join-se: calc(var(--radius-field) * var(--join-h)); --join-es: calc(var(--radius-field) * var(--join-v)); --join-ee: var(--radius-field) } & :where(:scope>:only-child) { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field) } } } .xl\:join-item { @layer daisyui.l1.l2.l3.l4 { &>* { --join-ss: initial; --join-se: initial; --join-es: initial; --join-ee: initial } } border-style:solid; border-width:var(--border, 1px); border-start-start-radius:var(--join-ss); border-start-end-radius:var(--join-se); border-end-end-radius:var(--join-ee); border-end-start-radius:var(--join-es); &:not(:first-child, :disabled, [disabled], .btn-disabled) { margin-block-start: calc(var(--border, 1px) * -1 * var(--join-v)); margin-inline-start: calc(var(--border, 1px) * -1 * var(--join-h)) } &:is(:disabled, [disabled], .btn-disabled) { border-width: var(--border, 1px); border-inline-end-width: calc(var(--border, 1px) * var(--join-v)); border-block-end-width: calc(var(--border, 1px) * var(--join-h)) } } .xl\:join-vertical { --join-v: 1; --join-h: 0; flex-direction: column } .xl\:join-horizontal { --join-v: 0; --join-h: 1; flex-direction: row } } @media (width>=1536px) { .\32 xl\:join { --join-ss: 0; --join-se: 0; --join-es: 0; --join-ee: 0; --join-v: 0; --join-h: 1; align-items: stretch; display: inline-flex; @scope(&) { &>:where(:focus, :has(:focus)) { z-index: 1 } @media (hover:hover) { &>:where(.btn:hover, :has(.btn:hover)) { isolation: isolate } } & :where(:scope>:first-child) { --join-ss: var(--radius-field); --join-se: calc(var(--radius-field) * var(--join-v)); --join-es: calc(var(--radius-field) * var(--join-h)); --join-ee: 0 } & :where(:scope>:last-child) { --join-ss: 0; --join-se: calc(var(--radius-field) * var(--join-h)); --join-es: calc(var(--radius-field) * var(--join-v)); --join-ee: var(--radius-field) } & :where(:scope>:only-child) { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field) } } } .\32 xl\:join-item { @layer daisyui.l1.l2.l3.l4 { &>* { --join-ss: initial; --join-se: initial; --join-es: initial; --join-ee: initial } } border-style:solid; border-width:var(--border, 1px); border-start-start-radius:var(--join-ss); border-start-end-radius:var(--join-se); border-end-end-radius:var(--join-ee); border-end-start-radius:var(--join-es); &:not(:first-child, :disabled, [disabled], .btn-disabled) { margin-block-start: calc(var(--border, 1px) * -1 * var(--join-v)); margin-inline-start: calc(var(--border, 1px) * -1 * var(--join-h)) } &:is(:disabled, [disabled], .btn-disabled) { border-width: var(--border, 1px); border-inline-end-width: calc(var(--border, 1px) * var(--join-v)); border-block-end-width: calc(var(--border, 1px) * var(--join-h)) } } .\32 xl\:join-vertical { --join-v: 1; --join-h: 0; flex-direction: column } .\32 xl\:join-horizontal { --join-v: 0; --join-h: 1; flex-direction: row } } :root .prose { --tw-prose-body: color-mix(in oklab, var(--color-base-content) 80%, #0000); --tw-prose-headings: var(--color-base-content); --tw-prose-lead: var(--color-base-content); --tw-prose-links: var(--color-base-content); --tw-prose-bold: var(--color-base-content); --tw-prose-counters: var(--color-base-content); --tw-prose-bullets: color-mix(in oklab, var(--color-base-content) 50%, #0000); --tw-prose-hr: color-mix(in oklab, var(--color-base-content) 20%, #0000); --tw-prose-quotes: var(--color-base-content); --tw-prose-quote-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000); --tw-prose-captions: color-mix(in oklab, var(--color-base-content) 50%, #0000); --tw-prose-code: var(--color-base-content); --tw-prose-pre-code: var(--color-neutral-content); --tw-prose-pre-bg: var(--color-neutral); --tw-prose-th-borders: color-mix(in oklab, var(--color-base-content) 50%, #0000); --tw-prose-td-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000); --tw-prose-kbd: color-mix(in oklab, var(--color-base-content) 80%, #0000); & :where(code):not(pre>code) { background-color: var(--color-base-200); border-radius: var(--radius-selector); border: var(--border) solid var(--color-base-300); font-weight: inherit; padding-block: .2em; padding-inline: .5em; &:before, &:after { display: none } } } .rounded-box { border-radius: var(--radius-box) } .rounded-field { border-radius: var(--radius-field) } .rounded-selector { border-radius: var(--radius-selector) } .rounded-t-box { border-top-left-radius: var(--radius-box); border-top-right-radius: var(--radius-box) } .rounded-b-box { border-bottom-left-radius: var(--radius-box); border-bottom-right-radius: var(--radius-box) } .rounded-l-box { border-top-left-radius: var(--radius-box); border-bottom-left-radius: var(--radius-box) } .rounded-r-box { border-top-right-radius: var(--radius-box); border-bottom-right-radius: var(--radius-box) } .rounded-tl-box { border-top-left-radius: var(--radius-box) } .rounded-tr-box { border-top-right-radius: var(--radius-box) } .rounded-br-box { border-bottom-right-radius: var(--radius-box) } .rounded-bl-box { border-bottom-left-radius: var(--radius-box) } .rounded-t-field { border-top-left-radius: var(--radius-field); border-top-right-radius: var(--radius-field) } .rounded-b-field { border-bottom-left-radius: var(--radius-field); border-bottom-right-radius: var(--radius-field) } .rounded-l-field { border-top-left-radius: var(--radius-field); border-bottom-left-radius: var(--radius-field) } .rounded-r-field { border-top-right-radius: var(--radius-field); border-bottom-right-radius: var(--radius-field) } .rounded-tl-field { border-top-left-radius: var(--radius-field) } .rounded-tr-field { border-top-right-radius: var(--radius-field) } .rounded-br-field { border-bottom-right-radius: var(--radius-field) } .rounded-bl-field { border-bottom-left-radius: var(--radius-field) } .rounded-t-selector { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector) } .rounded-b-selector { border-bottom-left-radius: var(--radius-selector); border-bottom-right-radius: var(--radius-selector) } .rounded-l-selector { border-top-left-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector) } .rounded-r-selector { border-top-right-radius: var(--radius-selector); border-bottom-right-radius: var(--radius-selector) } .rounded-tl-selector { border-top-left-radius: var(--radius-selector) } .rounded-tr-selector { border-top-right-radius: var(--radius-selector) } .rounded-br-selector { border-bottom-right-radius: var(--radius-selector) } .rounded-bl-selector { border-bottom-left-radius: var(--radius-selector) } @media (width>=640px) { .sm\:rounded-box { border-radius: var(--radius-box) } .sm\:rounded-field { border-radius: var(--radius-field) } .sm\:rounded-selector { border-radius: var(--radius-selector) } .sm\:rounded-t-box { border-top-left-radius: var(--radius-box); border-top-right-radius: var(--radius-box) } .sm\:rounded-b-box { border-bottom-left-radius: var(--radius-box); border-bottom-right-radius: var(--radius-box) } .sm\:rounded-l-box { border-top-left-radius: var(--radius-box); border-bottom-left-radius: var(--radius-box) } .sm\:rounded-r-box { border-top-right-radius: var(--radius-box); border-bottom-right-radius: var(--radius-box) } .sm\:rounded-tl-box { border-top-left-radius: var(--radius-box) } .sm\:rounded-tr-box { border-top-right-radius: var(--radius-box) } .sm\:rounded-br-box { border-bottom-right-radius: var(--radius-box) } .sm\:rounded-bl-box { border-bottom-left-radius: var(--radius-box) } .sm\:rounded-t-field { border-top-left-radius: var(--radius-field); border-top-right-radius: var(--radius-field) } .sm\:rounded-b-field { border-bottom-left-radius: var(--radius-field); border-bottom-right-radius: var(--radius-field) } .sm\:rounded-l-field { border-top-left-radius: var(--radius-field); border-bottom-left-radius: var(--radius-field) } .sm\:rounded-r-field { border-top-right-radius: var(--radius-field); border-bottom-right-radius: var(--radius-field) } .sm\:rounded-tl-field { border-top-left-radius: var(--radius-field) } .sm\:rounded-tr-field { border-top-right-radius: var(--radius-field) } .sm\:rounded-br-field { border-bottom-right-radius: var(--radius-field) } .sm\:rounded-bl-field { border-bottom-left-radius: var(--radius-field) } .sm\:rounded-t-selector { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector) } .sm\:rounded-b-selector { border-bottom-left-radius: var(--radius-selector); border-bottom-right-radius: var(--radius-selector) } .sm\:rounded-l-selector { border-top-left-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector) } .sm\:rounded-r-selector { border-top-right-radius: var(--radius-selector); border-bottom-right-radius: var(--radius-selector) } .sm\:rounded-tl-selector { border-top-left-radius: var(--radius-selector) } .sm\:rounded-tr-selector { border-top-right-radius: var(--radius-selector) } .sm\:rounded-br-selector { border-bottom-right-radius: var(--radius-selector) } .sm\:rounded-bl-selector { border-bottom-left-radius: var(--radius-selector) } } @media (width>=768px) { .md\:rounded-box { border-radius: var(--radius-box) } .md\:rounded-field { border-radius: var(--radius-field) } .md\:rounded-selector { border-radius: var(--radius-selector) } .md\:rounded-t-box { border-top-left-radius: var(--radius-box); border-top-right-radius: var(--radius-box) } .md\:rounded-b-box { border-bottom-left-radius: var(--radius-box); border-bottom-right-radius: var(--radius-box) } .md\:rounded-l-box { border-top-left-radius: var(--radius-box); border-bottom-left-radius: var(--radius-box) } .md\:rounded-r-box { border-top-right-radius: var(--radius-box); border-bottom-right-radius: var(--radius-box) } .md\:rounded-tl-box { border-top-left-radius: var(--radius-box) } .md\:rounded-tr-box { border-top-right-radius: var(--radius-box) } .md\:rounded-br-box { border-bottom-right-radius: var(--radius-box) } .md\:rounded-bl-box { border-bottom-left-radius: var(--radius-box) } .md\:rounded-t-field { border-top-left-radius: var(--radius-field); border-top-right-radius: var(--radius-field) } .md\:rounded-b-field { border-bottom-left-radius: var(--radius-field); border-bottom-right-radius: var(--radius-field) } .md\:rounded-l-field { border-top-left-radius: var(--radius-field); border-bottom-left-radius: var(--radius-field) } .md\:rounded-r-field { border-top-right-radius: var(--radius-field); border-bottom-right-radius: var(--radius-field) } .md\:rounded-tl-field { border-top-left-radius: var(--radius-field) } .md\:rounded-tr-field { border-top-right-radius: var(--radius-field) } .md\:rounded-br-field { border-bottom-right-radius: var(--radius-field) } .md\:rounded-bl-field { border-bottom-left-radius: var(--radius-field) } .md\:rounded-t-selector { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector) } .md\:rounded-b-selector { border-bottom-left-radius: var(--radius-selector); border-bottom-right-radius: var(--radius-selector) } .md\:rounded-l-selector { border-top-left-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector) } .md\:rounded-r-selector { border-top-right-radius: var(--radius-selector); border-bottom-right-radius: var(--radius-selector) } .md\:rounded-tl-selector { border-top-left-radius: var(--radius-selector) } .md\:rounded-tr-selector { border-top-right-radius: var(--radius-selector) } .md\:rounded-br-selector { border-bottom-right-radius: var(--radius-selector) } .md\:rounded-bl-selector { border-bottom-left-radius: var(--radius-selector) } } @media (width>=1024px) { .lg\:rounded-box { border-radius: var(--radius-box) } .lg\:rounded-field { border-radius: var(--radius-field) } .lg\:rounded-selector { border-radius: var(--radius-selector) } .lg\:rounded-t-box { border-top-left-radius: var(--radius-box); border-top-right-radius: var(--radius-box) } .lg\:rounded-b-box { border-bottom-left-radius: var(--radius-box); border-bottom-right-radius: var(--radius-box) } .lg\:rounded-l-box { border-top-left-radius: var(--radius-box); border-bottom-left-radius: var(--radius-box) } .lg\:rounded-r-box { border-top-right-radius: var(--radius-box); border-bottom-right-radius: var(--radius-box) } .lg\:rounded-tl-box { border-top-left-radius: var(--radius-box) } .lg\:rounded-tr-box { border-top-right-radius: var(--radius-box) } .lg\:rounded-br-box { border-bottom-right-radius: var(--radius-box) } .lg\:rounded-bl-box { border-bottom-left-radius: var(--radius-box) } .lg\:rounded-t-field { border-top-left-radius: var(--radius-field); border-top-right-radius: var(--radius-field) } .lg\:rounded-b-field { border-bottom-left-radius: var(--radius-field); border-bottom-right-radius: var(--radius-field) } .lg\:rounded-l-field { border-top-left-radius: var(--radius-field); border-bottom-left-radius: var(--radius-field) } .lg\:rounded-r-field { border-top-right-radius: var(--radius-field); border-bottom-right-radius: var(--radius-field) } .lg\:rounded-tl-field { border-top-left-radius: var(--radius-field) } .lg\:rounded-tr-field { border-top-right-radius: var(--radius-field) } .lg\:rounded-br-field { border-bottom-right-radius: var(--radius-field) } .lg\:rounded-bl-field { border-bottom-left-radius: var(--radius-field) } .lg\:rounded-t-selector { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector) } .lg\:rounded-b-selector { border-bottom-left-radius: var(--radius-selector); border-bottom-right-radius: var(--radius-selector) } .lg\:rounded-l-selector { border-top-left-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector) } .lg\:rounded-r-selector { border-top-right-radius: var(--radius-selector); border-bottom-right-radius: var(--radius-selector) } .lg\:rounded-tl-selector { border-top-left-radius: var(--radius-selector) } .lg\:rounded-tr-selector { border-top-right-radius: var(--radius-selector) } .lg\:rounded-br-selector { border-bottom-right-radius: var(--radius-selector) } .lg\:rounded-bl-selector { border-bottom-left-radius: var(--radius-selector) } } @media (width>=1280px) { .xl\:rounded-box { border-radius: var(--radius-box) } .xl\:rounded-field { border-radius: var(--radius-field) } .xl\:rounded-selector { border-radius: var(--radius-selector) } .xl\:rounded-t-box { border-top-left-radius: var(--radius-box); border-top-right-radius: var(--radius-box) } .xl\:rounded-b-box { border-bottom-left-radius: var(--radius-box); border-bottom-right-radius: var(--radius-box) } .xl\:rounded-l-box { border-top-left-radius: var(--radius-box); border-bottom-left-radius: var(--radius-box) } .xl\:rounded-r-box { border-top-right-radius: var(--radius-box); border-bottom-right-radius: var(--radius-box) } .xl\:rounded-tl-box { border-top-left-radius: var(--radius-box) } .xl\:rounded-tr-box { border-top-right-radius: var(--radius-box) } .xl\:rounded-br-box { border-bottom-right-radius: var(--radius-box) } .xl\:rounded-bl-box { border-bottom-left-radius: var(--radius-box) } .xl\:rounded-t-field { border-top-left-radius: var(--radius-field); border-top-right-radius: var(--radius-field) } .xl\:rounded-b-field { border-bottom-left-radius: var(--radius-field); border-bottom-right-radius: var(--radius-field) } .xl\:rounded-l-field { border-top-left-radius: var(--radius-field); border-bottom-left-radius: var(--radius-field) } .xl\:rounded-r-field { border-top-right-radius: var(--radius-field); border-bottom-right-radius: var(--radius-field) } .xl\:rounded-tl-field { border-top-left-radius: var(--radius-field) } .xl\:rounded-tr-field { border-top-right-radius: var(--radius-field) } .xl\:rounded-br-field { border-bottom-right-radius: var(--radius-field) } .xl\:rounded-bl-field { border-bottom-left-radius: var(--radius-field) } .xl\:rounded-t-selector { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector) } .xl\:rounded-b-selector { border-bottom-left-radius: var(--radius-selector); border-bottom-right-radius: var(--radius-selector) } .xl\:rounded-l-selector { border-top-left-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector) } .xl\:rounded-r-selector { border-top-right-radius: var(--radius-selector); border-bottom-right-radius: var(--radius-selector) } .xl\:rounded-tl-selector { border-top-left-radius: var(--radius-selector) } .xl\:rounded-tr-selector { border-top-right-radius: var(--radius-selector) } .xl\:rounded-br-selector { border-bottom-right-radius: var(--radius-selector) } .xl\:rounded-bl-selector { border-bottom-left-radius: var(--radius-selector) } } @media (width>=1536px) { .\32 xl\:rounded-box { border-radius: var(--radius-box) } .\32 xl\:rounded-field { border-radius: var(--radius-field) } .\32 xl\:rounded-selector { border-radius: var(--radius-selector) } .\32 xl\:rounded-t-box { border-top-left-radius: var(--radius-box); border-top-right-radius: var(--radius-box) } .\32 xl\:rounded-b-box { border-bottom-left-radius: var(--radius-box); border-bottom-right-radius: var(--radius-box) } .\32 xl\:rounded-l-box { border-top-left-radius: var(--radius-box); border-bottom-left-radius: var(--radius-box) } .\32 xl\:rounded-r-box { border-top-right-radius: var(--radius-box); border-bottom-right-radius: var(--radius-box) } .\32 xl\:rounded-tl-box { border-top-left-radius: var(--radius-box) } .\32 xl\:rounded-tr-box { border-top-right-radius: var(--radius-box) } .\32 xl\:rounded-br-box { border-bottom-right-radius: var(--radius-box) } .\32 xl\:rounded-bl-box { border-bottom-left-radius: var(--radius-box) } .\32 xl\:rounded-t-field { border-top-left-radius: var(--radius-field); border-top-right-radius: var(--radius-field) } .\32 xl\:rounded-b-field { border-bottom-left-radius: var(--radius-field); border-bottom-right-radius: var(--radius-field) } .\32 xl\:rounded-l-field { border-top-left-radius: var(--radius-field); border-bottom-left-radius: var(--radius-field) } .\32 xl\:rounded-r-field { border-top-right-radius: var(--radius-field); border-bottom-right-radius: var(--radius-field) } .\32 xl\:rounded-tl-field { border-top-left-radius: var(--radius-field) } .\32 xl\:rounded-tr-field { border-top-right-radius: var(--radius-field) } .\32 xl\:rounded-br-field { border-bottom-right-radius: var(--radius-field) } .\32 xl\:rounded-bl-field { border-bottom-left-radius: var(--radius-field) } .\32 xl\:rounded-t-selector { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector) } .\32 xl\:rounded-b-selector { border-bottom-left-radius: var(--radius-selector); border-bottom-right-radius: var(--radius-selector) } .\32 xl\:rounded-l-selector { border-top-left-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector) } .\32 xl\:rounded-r-selector { border-top-right-radius: var(--radius-selector); border-bottom-right-radius: var(--radius-selector) } .\32 xl\:rounded-tl-selector { border-top-left-radius: var(--radius-selector) } .\32 xl\:rounded-tr-selector { border-top-right-radius: var(--radius-selector) } .\32 xl\:rounded-br-selector { border-bottom-right-radius: var(--radius-selector) } .\32 xl\:rounded-bl-selector { border-bottom-left-radius: var(--radius-selector) } } .glass { backdrop-filter: blur(var(--glass-blur, 40px)); background-color: #0000; background-image: linear-gradient(135deg, oklch(100% 0 0 / var(--glass-opacity, 30%)) 0%, oklch(0% 0 0/0) 100%), linear-gradient(var(--glass-reflect-degree, 100deg), oklch(100% 0 0 / var(--glass-reflect-opacity, 5%)) 25%, oklch(0% 0 0/0) 25%); box-shadow: 0 0 0 1px oklch(100% 0 0 / var(--glass-border-opacity, 20%)) inset, 0 0 0 2px oklch(0% 0 0/.05); text-shadow: 0 1px oklch(0% 0 0 / var(--glass-text-shadow-opacity, 5%)); border: none } .hover\:bg-base-100:hover { &:hover { @media (hover:hover) { background-color: var(--color-base-100) } } } .hover\:text-base-100:hover { &:hover { @media (hover:hover) { color: var(--color-base-100) } } } .hover\:border-base-100:hover { &:hover { @media (hover:hover) { border-color: var(--color-base-100) } } } .hover\:bg-base-200:hover { &:hover { @media (hover:hover) { background-color: var(--color-base-200) } } } .hover\:text-base-200:hover { &:hover { @media (hover:hover) { color: var(--color-base-200) } } } .hover\:border-base-200:hover { &:hover { @media (hover:hover) { border-color: var(--color-base-200) } } } .hover\:bg-base-300:hover { &:hover { @media (hover:hover) { background-color: var(--color-base-300) } } } .hover\:text-base-300:hover { &:hover { @media (hover:hover) { color: var(--color-base-300) } } } .hover\:border-base-300:hover { &:hover { @media (hover:hover) { border-color: var(--color-base-300) } } } .hover\:bg-base-content:hover { &:hover { @media (hover:hover) { background-color: var(--color-base-content) } } } .hover\:text-base-content:hover { &:hover { @media (hover:hover) { color: var(--color-base-content) } } } .hover\:border-base-content:hover { &:hover { @media (hover:hover) { border-color: var(--color-base-content) } } } .hover\:bg-primary:hover { &:hover { @media (hover:hover) { background-color: var(--color-primary) } } } .hover\:text-primary:hover { &:hover { @media (hover:hover) { color: var(--color-primary) } } } .hover\:border-primary:hover { &:hover { @media (hover:hover) { border-color: var(--color-primary) } } } .hover\:bg-primary-content:hover { &:hover { @media (hover:hover) { background-color: var(--color-primary-content) } } } .hover\:text-primary-content:hover { &:hover { @media (hover:hover) { color: var(--color-primary-content) } } } .hover\:border-primary-content:hover { &:hover { @media (hover:hover) { border-color: var(--color-primary-content) } } } .hover\:bg-secondary:hover { &:hover { @media (hover:hover) { background-color: var(--color-secondary) } } } .hover\:text-secondary:hover { &:hover { @media (hover:hover) { color: var(--color-secondary) } } } .hover\:border-secondary:hover { &:hover { @media (hover:hover) { border-color: var(--color-secondary) } } } .hover\:bg-secondary-content:hover { &:hover { @media (hover:hover) { background-color: var(--color-secondary-content) } } } .hover\:text-secondary-content:hover { &:hover { @media (hover:hover) { color: var(--color-secondary-content) } } } .hover\:border-secondary-content:hover { &:hover { @media (hover:hover) { border-color: var(--color-secondary-content) } } } .hover\:bg-accent:hover { &:hover { @media (hover:hover) { background-color: var(--color-accent) } } } .hover\:text-accent:hover { &:hover { @media (hover:hover) { color: var(--color-accent) } } } .hover\:border-accent:hover { &:hover { @media (hover:hover) { border-color: var(--color-accent) } } } .hover\:bg-accent-content:hover { &:hover { @media (hover:hover) { background-color: var(--color-accent-content) } } } .hover\:text-accent-content:hover { &:hover { @media (hover:hover) { color: var(--color-accent-content) } } } .hover\:border-accent-content:hover { &:hover { @media (hover:hover) { border-color: var(--color-accent-content) } } } .hover\:bg-neutral:hover { &:hover { @media (hover:hover) { background-color: var(--color-neutral) } } } .hover\:text-neutral:hover { &:hover { @media (hover:hover) { color: var(--color-neutral) } } } .hover\:border-neutral:hover { &:hover { @media (hover:hover) { border-color: var(--color-neutral) } } } .hover\:bg-neutral-content:hover { &:hover { @media (hover:hover) { background-color: var(--color-neutral-content) } } } .hover\:text-neutral-content:hover { &:hover { @media (hover:hover) { color: var(--color-neutral-content) } } } .hover\:border-neutral-content:hover { &:hover { @media (hover:hover) { border-color: var(--color-neutral-content) } } } .hover\:bg-info:hover { &:hover { @media (hover:hover) { background-color: var(--color-info) } } } .hover\:text-info:hover { &:hover { @media (hover:hover) { color: var(--color-info) } } } .hover\:border-info:hover { &:hover { @media (hover:hover) { border-color: var(--color-info) } } } .hover\:bg-info-content:hover { &:hover { @media (hover:hover) { background-color: var(--color-info-content) } } } .hover\:text-info-content:hover { &:hover { @media (hover:hover) { color: var(--color-info-content) } } } .hover\:border-info-content:hover { &:hover { @media (hover:hover) { border-color: var(--color-info-content) } } } .hover\:bg-success:hover { &:hover { @media (hover:hover) { background-color: var(--color-success) } } } .hover\:text-success:hover { &:hover { @media (hover:hover) { color: var(--color-success) } } } .hover\:border-success:hover { &:hover { @media (hover:hover) { border-color: var(--color-success) } } } .hover\:bg-success-content:hover { &:hover { @media (hover:hover) { background-color: var(--color-success-content) } } } .hover\:text-success-content:hover { &:hover { @media (hover:hover) { color: var(--color-success-content) } } } .hover\:border-success-content:hover { &:hover { @media (hover:hover) { border-color: var(--color-success-content) } } } .hover\:bg-warning:hover { &:hover { @media (hover:hover) { background-color: var(--color-warning) } } } .hover\:text-warning:hover { &:hover { @media (hover:hover) { color: var(--color-warning) } } } .hover\:border-warning:hover { &:hover { @media (hover:hover) { border-color: var(--color-warning) } } } .hover\:bg-warning-content:hover { &:hover { @media (hover:hover) { background-color: var(--color-warning-content) } } } .hover\:text-warning-content:hover { &:hover { @media (hover:hover) { color: var(--color-warning-content) } } } .hover\:border-warning-content:hover { &:hover { @media (hover:hover) { border-color: var(--color-warning-content) } } } .hover\:bg-error:hover { &:hover { @media (hover:hover) { background-color: var(--color-error) } } } .hover\:text-error:hover { &:hover { @media (hover:hover) { color: var(--color-error) } } } .hover\:border-error:hover { &:hover { @media (hover:hover) { border-color: var(--color-error) } } } .hover\:bg-error-content:hover { &:hover { @media (hover:hover) { background-color: var(--color-error-content) } } } .hover\:text-error-content:hover { &:hover { @media (hover:hover) { color: var(--color-error-content) } } } .hover\:border-error-content:hover { &:hover { @media (hover:hover) { border-color: var(--color-error-content) } } } .bg-base-100 { background-color: var(--color-base-100) } .bg-base-100\/10 { background-color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-100)10%, #0000) } } .bg-base-100\/20 { background-color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-100)20%, #0000) } } .bg-base-100\/30 { background-color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-100)30%, #0000) } } .bg-base-100\/40 { background-color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-100)40%, #0000) } } .bg-base-100\/50 { background-color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-100)50%, #0000) } } .bg-base-100\/60 { background-color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-100)60%, #0000) } } .bg-base-100\/70 { background-color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-100)70%, #0000) } } .bg-base-100\/80 { background-color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-100)80%, #0000) } } .bg-base-100\/90 { background-color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-100)90%, #0000) } } .text-base-100 { color: var(--color-base-100) } .text-base-100\/10 { color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-100)10%, #0000) } } .text-base-100\/20 { color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-100)20%, #0000) } } .text-base-100\/30 { color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-100)30%, #0000) } } .text-base-100\/40 { color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-100)40%, #0000) } } .text-base-100\/50 { color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-100)50%, #0000) } } .text-base-100\/60 { color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-100)60%, #0000) } } .text-base-100\/70 { color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-100)70%, #0000) } } .text-base-100\/80 { color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-100)80%, #0000) } } .text-base-100\/90 { color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-100)90%, #0000) } } .border-base-100 { border-color: var(--color-base-100) } .border-base-100\/10 { border-color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-100)10%, #0000) } } .border-base-100\/20 { border-color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-100)20%, #0000) } } .border-base-100\/30 { border-color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-100)30%, #0000) } } .border-base-100\/40 { border-color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-100)40%, #0000) } } .border-base-100\/50 { border-color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-100)50%, #0000) } } .border-base-100\/60 { border-color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-100)60%, #0000) } } .border-base-100\/70 { border-color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-100)70%, #0000) } } .border-base-100\/80 { border-color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-100)80%, #0000) } } .border-base-100\/90 { border-color: var(--color-base-100); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-100)90%, #0000) } } .bg-base-200 { background-color: var(--color-base-200) } .bg-base-200\/10 { background-color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-200)10%, #0000) } } .bg-base-200\/20 { background-color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-200)20%, #0000) } } .bg-base-200\/30 { background-color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-200)30%, #0000) } } .bg-base-200\/40 { background-color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-200)40%, #0000) } } .bg-base-200\/50 { background-color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-200)50%, #0000) } } .bg-base-200\/60 { background-color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-200)60%, #0000) } } .bg-base-200\/70 { background-color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-200)70%, #0000) } } .bg-base-200\/80 { background-color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-200)80%, #0000) } } .bg-base-200\/90 { background-color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-200)90%, #0000) } } .text-base-200 { color: var(--color-base-200) } .text-base-200\/10 { color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-200)10%, #0000) } } .text-base-200\/20 { color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-200)20%, #0000) } } .text-base-200\/30 { color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-200)30%, #0000) } } .text-base-200\/40 { color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-200)40%, #0000) } } .text-base-200\/50 { color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-200)50%, #0000) } } .text-base-200\/60 { color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-200)60%, #0000) } } .text-base-200\/70 { color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-200)70%, #0000) } } .text-base-200\/80 { color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-200)80%, #0000) } } .text-base-200\/90 { color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-200)90%, #0000) } } .border-base-200 { border-color: var(--color-base-200) } .border-base-200\/10 { border-color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-200)10%, #0000) } } .border-base-200\/20 { border-color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-200)20%, #0000) } } .border-base-200\/30 { border-color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-200)30%, #0000) } } .border-base-200\/40 { border-color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-200)40%, #0000) } } .border-base-200\/50 { border-color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-200)50%, #0000) } } .border-base-200\/60 { border-color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-200)60%, #0000) } } .border-base-200\/70 { border-color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-200)70%, #0000) } } .border-base-200\/80 { border-color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-200)80%, #0000) } } .border-base-200\/90 { border-color: var(--color-base-200); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-200)90%, #0000) } } .bg-base-300 { background-color: var(--color-base-300) } .bg-base-300\/10 { background-color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-300)10%, #0000) } } .bg-base-300\/20 { background-color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-300)20%, #0000) } } .bg-base-300\/30 { background-color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-300)30%, #0000) } } .bg-base-300\/40 { background-color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-300)40%, #0000) } } .bg-base-300\/50 { background-color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-300)50%, #0000) } } .bg-base-300\/60 { background-color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-300)60%, #0000) } } .bg-base-300\/70 { background-color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-300)70%, #0000) } } .bg-base-300\/80 { background-color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-300)80%, #0000) } } .bg-base-300\/90 { background-color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-300)90%, #0000) } } .text-base-300 { color: var(--color-base-300) } .text-base-300\/10 { color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-300)10%, #0000) } } .text-base-300\/20 { color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-300)20%, #0000) } } .text-base-300\/30 { color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-300)30%, #0000) } } .text-base-300\/40 { color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-300)40%, #0000) } } .text-base-300\/50 { color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-300)50%, #0000) } } .text-base-300\/60 { color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-300)60%, #0000) } } .text-base-300\/70 { color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-300)70%, #0000) } } .text-base-300\/80 { color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-300)80%, #0000) } } .text-base-300\/90 { color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-300)90%, #0000) } } .border-base-300 { border-color: var(--color-base-300) } .border-base-300\/10 { border-color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-300)10%, #0000) } } .border-base-300\/20 { border-color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-300)20%, #0000) } } .border-base-300\/30 { border-color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-300)30%, #0000) } } .border-base-300\/40 { border-color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-300)40%, #0000) } } .border-base-300\/50 { border-color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-300)50%, #0000) } } .border-base-300\/60 { border-color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-300)60%, #0000) } } .border-base-300\/70 { border-color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-300)70%, #0000) } } .border-base-300\/80 { border-color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-300)80%, #0000) } } .border-base-300\/90 { border-color: var(--color-base-300); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-300)90%, #0000) } } .bg-base-content { background-color: var(--color-base-content) } .bg-base-content\/10 { background-color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content)10%, #0000) } } .bg-base-content\/20 { background-color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content)20%, #0000) } } .bg-base-content\/30 { background-color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content)30%, #0000) } } .bg-base-content\/40 { background-color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content)40%, #0000) } } .bg-base-content\/50 { background-color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content)50%, #0000) } } .bg-base-content\/60 { background-color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content)60%, #0000) } } .bg-base-content\/70 { background-color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content)70%, #0000) } } .bg-base-content\/80 { background-color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content)80%, #0000) } } .bg-base-content\/90 { background-color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content)90%, #0000) } } .text-base-content { color: var(--color-base-content) } .text-base-content\/10 { color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content)10%, #0000) } } .text-base-content\/20 { color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content)20%, #0000) } } .text-base-content\/30 { color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content)30%, #0000) } } .text-base-content\/40 { color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content)40%, #0000) } } .text-base-content\/50 { color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content)50%, #0000) } } .text-base-content\/60 { color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content)60%, #0000) } } .text-base-content\/70 { color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content)70%, #0000) } } .text-base-content\/80 { color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content)80%, #0000) } } .text-base-content\/90 { color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content)90%, #0000) } } .border-base-content { border-color: var(--color-base-content) } .border-base-content\/10 { border-color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content)10%, #0000) } } .border-base-content\/20 { border-color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content)20%, #0000) } } .border-base-content\/30 { border-color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content)30%, #0000) } } .border-base-content\/40 { border-color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content)40%, #0000) } } .border-base-content\/50 { border-color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content)50%, #0000) } } .border-base-content\/60 { border-color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content)60%, #0000) } } .border-base-content\/70 { border-color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content)70%, #0000) } } .border-base-content\/80 { border-color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content)80%, #0000) } } .border-base-content\/90 { border-color: var(--color-base-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content)90%, #0000) } } .bg-primary { background-color: var(--color-primary) } .bg-primary\/10 { background-color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary)10%, #0000) } } .bg-primary\/20 { background-color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary)20%, #0000) } } .bg-primary\/30 { background-color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary)30%, #0000) } } .bg-primary\/40 { background-color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary)40%, #0000) } } .bg-primary\/50 { background-color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary)50%, #0000) } } .bg-primary\/60 { background-color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary)60%, #0000) } } .bg-primary\/70 { background-color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary)70%, #0000) } } .bg-primary\/80 { background-color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary)80%, #0000) } } .bg-primary\/90 { background-color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary)90%, #0000) } } .text-primary { color: var(--color-primary) } .text-primary\/10 { color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-primary)10%, #0000) } } .text-primary\/20 { color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-primary)20%, #0000) } } .text-primary\/30 { color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-primary)30%, #0000) } } .text-primary\/40 { color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-primary)40%, #0000) } } .text-primary\/50 { color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-primary)50%, #0000) } } .text-primary\/60 { color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-primary)60%, #0000) } } .text-primary\/70 { color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-primary)70%, #0000) } } .text-primary\/80 { color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-primary)80%, #0000) } } .text-primary\/90 { color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-primary)90%, #0000) } } .border-primary { border-color: var(--color-primary) } .border-primary\/10 { border-color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary)10%, #0000) } } .border-primary\/20 { border-color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary)20%, #0000) } } .border-primary\/30 { border-color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary)30%, #0000) } } .border-primary\/40 { border-color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary)40%, #0000) } } .border-primary\/50 { border-color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary)50%, #0000) } } .border-primary\/60 { border-color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary)60%, #0000) } } .border-primary\/70 { border-color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary)70%, #0000) } } .border-primary\/80 { border-color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary)80%, #0000) } } .border-primary\/90 { border-color: var(--color-primary); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary)90%, #0000) } } .bg-primary-content { background-color: var(--color-primary-content) } .bg-primary-content\/10 { background-color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary-content)10%, #0000) } } .bg-primary-content\/20 { background-color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary-content)20%, #0000) } } .bg-primary-content\/30 { background-color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary-content)30%, #0000) } } .bg-primary-content\/40 { background-color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary-content)40%, #0000) } } .bg-primary-content\/50 { background-color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary-content)50%, #0000) } } .bg-primary-content\/60 { background-color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary-content)60%, #0000) } } .bg-primary-content\/70 { background-color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary-content)70%, #0000) } } .bg-primary-content\/80 { background-color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary-content)80%, #0000) } } .bg-primary-content\/90 { background-color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary-content)90%, #0000) } } .text-primary-content { color: var(--color-primary-content) } .text-primary-content\/10 { color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-primary-content)10%, #0000) } } .text-primary-content\/20 { color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-primary-content)20%, #0000) } } .text-primary-content\/30 { color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-primary-content)30%, #0000) } } .text-primary-content\/40 { color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-primary-content)40%, #0000) } } .text-primary-content\/50 { color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-primary-content)50%, #0000) } } .text-primary-content\/60 { color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-primary-content)60%, #0000) } } .text-primary-content\/70 { color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-primary-content)70%, #0000) } } .text-primary-content\/80 { color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-primary-content)80%, #0000) } } .text-primary-content\/90 { color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-primary-content)90%, #0000) } } .border-primary-content { border-color: var(--color-primary-content) } .border-primary-content\/10 { border-color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary-content)10%, #0000) } } .border-primary-content\/20 { border-color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary-content)20%, #0000) } } .border-primary-content\/30 { border-color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary-content)30%, #0000) } } .border-primary-content\/40 { border-color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary-content)40%, #0000) } } .border-primary-content\/50 { border-color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary-content)50%, #0000) } } .border-primary-content\/60 { border-color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary-content)60%, #0000) } } .border-primary-content\/70 { border-color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary-content)70%, #0000) } } .border-primary-content\/80 { border-color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary-content)80%, #0000) } } .border-primary-content\/90 { border-color: var(--color-primary-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary-content)90%, #0000) } } .bg-secondary { background-color: var(--color-secondary) } .bg-secondary\/10 { background-color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary)10%, #0000) } } .bg-secondary\/20 { background-color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary)20%, #0000) } } .bg-secondary\/30 { background-color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary)30%, #0000) } } .bg-secondary\/40 { background-color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary)40%, #0000) } } .bg-secondary\/50 { background-color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary)50%, #0000) } } .bg-secondary\/60 { background-color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary)60%, #0000) } } .bg-secondary\/70 { background-color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary)70%, #0000) } } .bg-secondary\/80 { background-color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary)80%, #0000) } } .bg-secondary\/90 { background-color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary)90%, #0000) } } .text-secondary { color: var(--color-secondary) } .text-secondary\/10 { color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-secondary)10%, #0000) } } .text-secondary\/20 { color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-secondary)20%, #0000) } } .text-secondary\/30 { color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-secondary)30%, #0000) } } .text-secondary\/40 { color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-secondary)40%, #0000) } } .text-secondary\/50 { color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-secondary)50%, #0000) } } .text-secondary\/60 { color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-secondary)60%, #0000) } } .text-secondary\/70 { color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-secondary)70%, #0000) } } .text-secondary\/80 { color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-secondary)80%, #0000) } } .text-secondary\/90 { color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-secondary)90%, #0000) } } .border-secondary { border-color: var(--color-secondary) } .border-secondary\/10 { border-color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-secondary)10%, #0000) } } .border-secondary\/20 { border-color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-secondary)20%, #0000) } } .border-secondary\/30 { border-color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-secondary)30%, #0000) } } .border-secondary\/40 { border-color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-secondary)40%, #0000) } } .border-secondary\/50 { border-color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-secondary)50%, #0000) } } .border-secondary\/60 { border-color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-secondary)60%, #0000) } } .border-secondary\/70 { border-color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-secondary)70%, #0000) } } .border-secondary\/80 { border-color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-secondary)80%, #0000) } } .border-secondary\/90 { border-color: var(--color-secondary); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-secondary)90%, #0000) } } .bg-secondary-content { background-color: var(--color-secondary-content) } .bg-secondary-content\/10 { background-color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary-content)10%, #0000) } } .bg-secondary-content\/20 { background-color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary-content)20%, #0000) } } .bg-secondary-content\/30 { background-color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary-content)30%, #0000) } } .bg-secondary-content\/40 { background-color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary-content)40%, #0000) } } .bg-secondary-content\/50 { background-color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary-content)50%, #0000) } } .bg-secondary-content\/60 { background-color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary-content)60%, #0000) } } .bg-secondary-content\/70 { background-color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary-content)70%, #0000) } } .bg-secondary-content\/80 { background-color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary-content)80%, #0000) } } .bg-secondary-content\/90 { background-color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary-content)90%, #0000) } } .text-secondary-content { color: var(--color-secondary-content) } .text-secondary-content\/10 { color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-secondary-content)10%, #0000) } } .text-secondary-content\/20 { color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-secondary-content)20%, #0000) } } .text-secondary-content\/30 { color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-secondary-content)30%, #0000) } } .text-secondary-content\/40 { color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-secondary-content)40%, #0000) } } .text-secondary-content\/50 { color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-secondary-content)50%, #0000) } } .text-secondary-content\/60 { color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-secondary-content)60%, #0000) } } .text-secondary-content\/70 { color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-secondary-content)70%, #0000) } } .text-secondary-content\/80 { color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-secondary-content)80%, #0000) } } .text-secondary-content\/90 { color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-secondary-content)90%, #0000) } } .border-secondary-content { border-color: var(--color-secondary-content) } .border-secondary-content\/10 { border-color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-secondary-content)10%, #0000) } } .border-secondary-content\/20 { border-color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-secondary-content)20%, #0000) } } .border-secondary-content\/30 { border-color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-secondary-content)30%, #0000) } } .border-secondary-content\/40 { border-color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-secondary-content)40%, #0000) } } .border-secondary-content\/50 { border-color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-secondary-content)50%, #0000) } } .border-secondary-content\/60 { border-color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-secondary-content)60%, #0000) } } .border-secondary-content\/70 { border-color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-secondary-content)70%, #0000) } } .border-secondary-content\/80 { border-color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-secondary-content)80%, #0000) } } .border-secondary-content\/90 { border-color: var(--color-secondary-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-secondary-content)90%, #0000) } } .bg-accent { background-color: var(--color-accent) } .bg-accent\/10 { background-color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent)10%, #0000) } } .bg-accent\/20 { background-color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent)20%, #0000) } } .bg-accent\/30 { background-color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent)30%, #0000) } } .bg-accent\/40 { background-color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent)40%, #0000) } } .bg-accent\/50 { background-color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent)50%, #0000) } } .bg-accent\/60 { background-color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent)60%, #0000) } } .bg-accent\/70 { background-color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent)70%, #0000) } } .bg-accent\/80 { background-color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent)80%, #0000) } } .bg-accent\/90 { background-color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent)90%, #0000) } } .text-accent { color: var(--color-accent) } .text-accent\/10 { color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-accent)10%, #0000) } } .text-accent\/20 { color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-accent)20%, #0000) } } .text-accent\/30 { color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-accent)30%, #0000) } } .text-accent\/40 { color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-accent)40%, #0000) } } .text-accent\/50 { color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-accent)50%, #0000) } } .text-accent\/60 { color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-accent)60%, #0000) } } .text-accent\/70 { color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-accent)70%, #0000) } } .text-accent\/80 { color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-accent)80%, #0000) } } .text-accent\/90 { color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-accent)90%, #0000) } } .border-accent { border-color: var(--color-accent) } .border-accent\/10 { border-color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-accent)10%, #0000) } } .border-accent\/20 { border-color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-accent)20%, #0000) } } .border-accent\/30 { border-color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-accent)30%, #0000) } } .border-accent\/40 { border-color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-accent)40%, #0000) } } .border-accent\/50 { border-color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-accent)50%, #0000) } } .border-accent\/60 { border-color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-accent)60%, #0000) } } .border-accent\/70 { border-color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-accent)70%, #0000) } } .border-accent\/80 { border-color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-accent)80%, #0000) } } .border-accent\/90 { border-color: var(--color-accent); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-accent)90%, #0000) } } .bg-accent-content { background-color: var(--color-accent-content) } .bg-accent-content\/10 { background-color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent-content)10%, #0000) } } .bg-accent-content\/20 { background-color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent-content)20%, #0000) } } .bg-accent-content\/30 { background-color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent-content)30%, #0000) } } .bg-accent-content\/40 { background-color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent-content)40%, #0000) } } .bg-accent-content\/50 { background-color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent-content)50%, #0000) } } .bg-accent-content\/60 { background-color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent-content)60%, #0000) } } .bg-accent-content\/70 { background-color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent-content)70%, #0000) } } .bg-accent-content\/80 { background-color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent-content)80%, #0000) } } .bg-accent-content\/90 { background-color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-accent-content)90%, #0000) } } .text-accent-content { color: var(--color-accent-content) } .text-accent-content\/10 { color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-accent-content)10%, #0000) } } .text-accent-content\/20 { color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-accent-content)20%, #0000) } } .text-accent-content\/30 { color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-accent-content)30%, #0000) } } .text-accent-content\/40 { color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-accent-content)40%, #0000) } } .text-accent-content\/50 { color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-accent-content)50%, #0000) } } .text-accent-content\/60 { color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-accent-content)60%, #0000) } } .text-accent-content\/70 { color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-accent-content)70%, #0000) } } .text-accent-content\/80 { color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-accent-content)80%, #0000) } } .text-accent-content\/90 { color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-accent-content)90%, #0000) } } .border-accent-content { border-color: var(--color-accent-content) } .border-accent-content\/10 { border-color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-accent-content)10%, #0000) } } .border-accent-content\/20 { border-color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-accent-content)20%, #0000) } } .border-accent-content\/30 { border-color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-accent-content)30%, #0000) } } .border-accent-content\/40 { border-color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-accent-content)40%, #0000) } } .border-accent-content\/50 { border-color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-accent-content)50%, #0000) } } .border-accent-content\/60 { border-color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-accent-content)60%, #0000) } } .border-accent-content\/70 { border-color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-accent-content)70%, #0000) } } .border-accent-content\/80 { border-color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-accent-content)80%, #0000) } } .border-accent-content\/90 { border-color: var(--color-accent-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-accent-content)90%, #0000) } } .bg-neutral { background-color: var(--color-neutral) } .bg-neutral\/10 { background-color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral)10%, #0000) } } .bg-neutral\/20 { background-color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral)20%, #0000) } } .bg-neutral\/30 { background-color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral)30%, #0000) } } .bg-neutral\/40 { background-color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral)40%, #0000) } } .bg-neutral\/50 { background-color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral)50%, #0000) } } .bg-neutral\/60 { background-color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral)60%, #0000) } } .bg-neutral\/70 { background-color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral)70%, #0000) } } .bg-neutral\/80 { background-color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral)80%, #0000) } } .bg-neutral\/90 { background-color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral)90%, #0000) } } .text-neutral { color: var(--color-neutral) } .text-neutral\/10 { color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral)10%, #0000) } } .text-neutral\/20 { color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral)20%, #0000) } } .text-neutral\/30 { color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral)30%, #0000) } } .text-neutral\/40 { color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral)40%, #0000) } } .text-neutral\/50 { color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral)50%, #0000) } } .text-neutral\/60 { color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral)60%, #0000) } } .text-neutral\/70 { color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral)70%, #0000) } } .text-neutral\/80 { color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral)80%, #0000) } } .text-neutral\/90 { color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral)90%, #0000) } } .border-neutral { border-color: var(--color-neutral) } .border-neutral\/10 { border-color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-neutral)10%, #0000) } } .border-neutral\/20 { border-color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-neutral)20%, #0000) } } .border-neutral\/30 { border-color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-neutral)30%, #0000) } } .border-neutral\/40 { border-color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-neutral)40%, #0000) } } .border-neutral\/50 { border-color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-neutral)50%, #0000) } } .border-neutral\/60 { border-color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-neutral)60%, #0000) } } .border-neutral\/70 { border-color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-neutral)70%, #0000) } } .border-neutral\/80 { border-color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-neutral)80%, #0000) } } .border-neutral\/90 { border-color: var(--color-neutral); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-neutral)90%, #0000) } } .bg-neutral-content { background-color: var(--color-neutral-content) } .bg-neutral-content\/10 { background-color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral-content)10%, #0000) } } .bg-neutral-content\/20 { background-color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral-content)20%, #0000) } } .bg-neutral-content\/30 { background-color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral-content)30%, #0000) } } .bg-neutral-content\/40 { background-color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral-content)40%, #0000) } } .bg-neutral-content\/50 { background-color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral-content)50%, #0000) } } .bg-neutral-content\/60 { background-color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral-content)60%, #0000) } } .bg-neutral-content\/70 { background-color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral-content)70%, #0000) } } .bg-neutral-content\/80 { background-color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral-content)80%, #0000) } } .bg-neutral-content\/90 { background-color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral-content)90%, #0000) } } .text-neutral-content { color: var(--color-neutral-content) } .text-neutral-content\/10 { color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral-content)10%, #0000) } } .text-neutral-content\/20 { color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral-content)20%, #0000) } } .text-neutral-content\/30 { color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral-content)30%, #0000) } } .text-neutral-content\/40 { color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral-content)40%, #0000) } } .text-neutral-content\/50 { color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral-content)50%, #0000) } } .text-neutral-content\/60 { color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral-content)60%, #0000) } } .text-neutral-content\/70 { color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral-content)70%, #0000) } } .text-neutral-content\/80 { color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral-content)80%, #0000) } } .text-neutral-content\/90 { color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-neutral-content)90%, #0000) } } .border-neutral-content { border-color: var(--color-neutral-content) } .border-neutral-content\/10 { border-color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-neutral-content)10%, #0000) } } .border-neutral-content\/20 { border-color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-neutral-content)20%, #0000) } } .border-neutral-content\/30 { border-color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-neutral-content)30%, #0000) } } .border-neutral-content\/40 { border-color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-neutral-content)40%, #0000) } } .border-neutral-content\/50 { border-color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-neutral-content)50%, #0000) } } .border-neutral-content\/60 { border-color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-neutral-content)60%, #0000) } } .border-neutral-content\/70 { border-color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-neutral-content)70%, #0000) } } .border-neutral-content\/80 { border-color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-neutral-content)80%, #0000) } } .border-neutral-content\/90 { border-color: var(--color-neutral-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-neutral-content)90%, #0000) } } .bg-info { background-color: var(--color-info) } .bg-info\/10 { background-color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info)10%, #0000) } } .bg-info\/20 { background-color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info)20%, #0000) } } .bg-info\/30 { background-color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info)30%, #0000) } } .bg-info\/40 { background-color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info)40%, #0000) } } .bg-info\/50 { background-color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info)50%, #0000) } } .bg-info\/60 { background-color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info)60%, #0000) } } .bg-info\/70 { background-color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info)70%, #0000) } } .bg-info\/80 { background-color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info)80%, #0000) } } .bg-info\/90 { background-color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info)90%, #0000) } } .text-info { color: var(--color-info) } .text-info\/10 { color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-info)10%, #0000) } } .text-info\/20 { color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-info)20%, #0000) } } .text-info\/30 { color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-info)30%, #0000) } } .text-info\/40 { color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-info)40%, #0000) } } .text-info\/50 { color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-info)50%, #0000) } } .text-info\/60 { color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-info)60%, #0000) } } .text-info\/70 { color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-info)70%, #0000) } } .text-info\/80 { color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-info)80%, #0000) } } .text-info\/90 { color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-info)90%, #0000) } } .border-info { border-color: var(--color-info) } .border-info\/10 { border-color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info)10%, #0000) } } .border-info\/20 { border-color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info)20%, #0000) } } .border-info\/30 { border-color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info)30%, #0000) } } .border-info\/40 { border-color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info)40%, #0000) } } .border-info\/50 { border-color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info)50%, #0000) } } .border-info\/60 { border-color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info)60%, #0000) } } .border-info\/70 { border-color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info)70%, #0000) } } .border-info\/80 { border-color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info)80%, #0000) } } .border-info\/90 { border-color: var(--color-info); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info)90%, #0000) } } .bg-info-content { background-color: var(--color-info-content) } .bg-info-content\/10 { background-color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info-content)10%, #0000) } } .bg-info-content\/20 { background-color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info-content)20%, #0000) } } .bg-info-content\/30 { background-color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info-content)30%, #0000) } } .bg-info-content\/40 { background-color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info-content)40%, #0000) } } .bg-info-content\/50 { background-color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info-content)50%, #0000) } } .bg-info-content\/60 { background-color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info-content)60%, #0000) } } .bg-info-content\/70 { background-color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info-content)70%, #0000) } } .bg-info-content\/80 { background-color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info-content)80%, #0000) } } .bg-info-content\/90 { background-color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-info-content)90%, #0000) } } .text-info-content { color: var(--color-info-content) } .text-info-content\/10 { color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-info-content)10%, #0000) } } .text-info-content\/20 { color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-info-content)20%, #0000) } } .text-info-content\/30 { color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-info-content)30%, #0000) } } .text-info-content\/40 { color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-info-content)40%, #0000) } } .text-info-content\/50 { color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-info-content)50%, #0000) } } .text-info-content\/60 { color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-info-content)60%, #0000) } } .text-info-content\/70 { color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-info-content)70%, #0000) } } .text-info-content\/80 { color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-info-content)80%, #0000) } } .text-info-content\/90 { color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-info-content)90%, #0000) } } .border-info-content { border-color: var(--color-info-content) } .border-info-content\/10 { border-color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info-content)10%, #0000) } } .border-info-content\/20 { border-color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info-content)20%, #0000) } } .border-info-content\/30 { border-color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info-content)30%, #0000) } } .border-info-content\/40 { border-color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info-content)40%, #0000) } } .border-info-content\/50 { border-color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info-content)50%, #0000) } } .border-info-content\/60 { border-color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info-content)60%, #0000) } } .border-info-content\/70 { border-color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info-content)70%, #0000) } } .border-info-content\/80 { border-color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info-content)80%, #0000) } } .border-info-content\/90 { border-color: var(--color-info-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-info-content)90%, #0000) } } .bg-success { background-color: var(--color-success) } .bg-success\/10 { background-color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success)10%, #0000) } } .bg-success\/20 { background-color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success)20%, #0000) } } .bg-success\/30 { background-color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success)30%, #0000) } } .bg-success\/40 { background-color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success)40%, #0000) } } .bg-success\/50 { background-color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success)50%, #0000) } } .bg-success\/60 { background-color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success)60%, #0000) } } .bg-success\/70 { background-color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success)70%, #0000) } } .bg-success\/80 { background-color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success)80%, #0000) } } .bg-success\/90 { background-color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success)90%, #0000) } } .text-success { color: var(--color-success) } .text-success\/10 { color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-success)10%, #0000) } } .text-success\/20 { color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-success)20%, #0000) } } .text-success\/30 { color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-success)30%, #0000) } } .text-success\/40 { color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-success)40%, #0000) } } .text-success\/50 { color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-success)50%, #0000) } } .text-success\/60 { color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-success)60%, #0000) } } .text-success\/70 { color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-success)70%, #0000) } } .text-success\/80 { color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-success)80%, #0000) } } .text-success\/90 { color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-success)90%, #0000) } } .border-success { border-color: var(--color-success) } .border-success\/10 { border-color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success)10%, #0000) } } .border-success\/20 { border-color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success)20%, #0000) } } .border-success\/30 { border-color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success)30%, #0000) } } .border-success\/40 { border-color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success)40%, #0000) } } .border-success\/50 { border-color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success)50%, #0000) } } .border-success\/60 { border-color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success)60%, #0000) } } .border-success\/70 { border-color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success)70%, #0000) } } .border-success\/80 { border-color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success)80%, #0000) } } .border-success\/90 { border-color: var(--color-success); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success)90%, #0000) } } .bg-success-content { background-color: var(--color-success-content) } .bg-success-content\/10 { background-color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success-content)10%, #0000) } } .bg-success-content\/20 { background-color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success-content)20%, #0000) } } .bg-success-content\/30 { background-color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success-content)30%, #0000) } } .bg-success-content\/40 { background-color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success-content)40%, #0000) } } .bg-success-content\/50 { background-color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success-content)50%, #0000) } } .bg-success-content\/60 { background-color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success-content)60%, #0000) } } .bg-success-content\/70 { background-color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success-content)70%, #0000) } } .bg-success-content\/80 { background-color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success-content)80%, #0000) } } .bg-success-content\/90 { background-color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-success-content)90%, #0000) } } .text-success-content { color: var(--color-success-content) } .text-success-content\/10 { color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-success-content)10%, #0000) } } .text-success-content\/20 { color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-success-content)20%, #0000) } } .text-success-content\/30 { color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-success-content)30%, #0000) } } .text-success-content\/40 { color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-success-content)40%, #0000) } } .text-success-content\/50 { color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-success-content)50%, #0000) } } .text-success-content\/60 { color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-success-content)60%, #0000) } } .text-success-content\/70 { color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-success-content)70%, #0000) } } .text-success-content\/80 { color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-success-content)80%, #0000) } } .text-success-content\/90 { color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-success-content)90%, #0000) } } .border-success-content { border-color: var(--color-success-content) } .border-success-content\/10 { border-color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success-content)10%, #0000) } } .border-success-content\/20 { border-color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success-content)20%, #0000) } } .border-success-content\/30 { border-color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success-content)30%, #0000) } } .border-success-content\/40 { border-color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success-content)40%, #0000) } } .border-success-content\/50 { border-color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success-content)50%, #0000) } } .border-success-content\/60 { border-color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success-content)60%, #0000) } } .border-success-content\/70 { border-color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success-content)70%, #0000) } } .border-success-content\/80 { border-color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success-content)80%, #0000) } } .border-success-content\/90 { border-color: var(--color-success-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-success-content)90%, #0000) } } .bg-warning { background-color: var(--color-warning) } .bg-warning\/10 { background-color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning)10%, #0000) } } .bg-warning\/20 { background-color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning)20%, #0000) } } .bg-warning\/30 { background-color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning)30%, #0000) } } .bg-warning\/40 { background-color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning)40%, #0000) } } .bg-warning\/50 { background-color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning)50%, #0000) } } .bg-warning\/60 { background-color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning)60%, #0000) } } .bg-warning\/70 { background-color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning)70%, #0000) } } .bg-warning\/80 { background-color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning)80%, #0000) } } .bg-warning\/90 { background-color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning)90%, #0000) } } .text-warning { color: var(--color-warning) } .text-warning\/10 { color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-warning)10%, #0000) } } .text-warning\/20 { color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-warning)20%, #0000) } } .text-warning\/30 { color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-warning)30%, #0000) } } .text-warning\/40 { color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-warning)40%, #0000) } } .text-warning\/50 { color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-warning)50%, #0000) } } .text-warning\/60 { color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-warning)60%, #0000) } } .text-warning\/70 { color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-warning)70%, #0000) } } .text-warning\/80 { color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-warning)80%, #0000) } } .text-warning\/90 { color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-warning)90%, #0000) } } .border-warning { border-color: var(--color-warning) } .border-warning\/10 { border-color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning)10%, #0000) } } .border-warning\/20 { border-color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning)20%, #0000) } } .border-warning\/30 { border-color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning)30%, #0000) } } .border-warning\/40 { border-color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning)40%, #0000) } } .border-warning\/50 { border-color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning)50%, #0000) } } .border-warning\/60 { border-color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning)60%, #0000) } } .border-warning\/70 { border-color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning)70%, #0000) } } .border-warning\/80 { border-color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning)80%, #0000) } } .border-warning\/90 { border-color: var(--color-warning); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning)90%, #0000) } } .bg-warning-content { background-color: var(--color-warning-content) } .bg-warning-content\/10 { background-color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning-content)10%, #0000) } } .bg-warning-content\/20 { background-color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning-content)20%, #0000) } } .bg-warning-content\/30 { background-color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning-content)30%, #0000) } } .bg-warning-content\/40 { background-color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning-content)40%, #0000) } } .bg-warning-content\/50 { background-color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning-content)50%, #0000) } } .bg-warning-content\/60 { background-color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning-content)60%, #0000) } } .bg-warning-content\/70 { background-color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning-content)70%, #0000) } } .bg-warning-content\/80 { background-color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning-content)80%, #0000) } } .bg-warning-content\/90 { background-color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning-content)90%, #0000) } } .text-warning-content { color: var(--color-warning-content) } .text-warning-content\/10 { color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-warning-content)10%, #0000) } } .text-warning-content\/20 { color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-warning-content)20%, #0000) } } .text-warning-content\/30 { color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-warning-content)30%, #0000) } } .text-warning-content\/40 { color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-warning-content)40%, #0000) } } .text-warning-content\/50 { color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-warning-content)50%, #0000) } } .text-warning-content\/60 { color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-warning-content)60%, #0000) } } .text-warning-content\/70 { color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-warning-content)70%, #0000) } } .text-warning-content\/80 { color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-warning-content)80%, #0000) } } .text-warning-content\/90 { color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-warning-content)90%, #0000) } } .border-warning-content { border-color: var(--color-warning-content) } .border-warning-content\/10 { border-color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning-content)10%, #0000) } } .border-warning-content\/20 { border-color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning-content)20%, #0000) } } .border-warning-content\/30 { border-color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning-content)30%, #0000) } } .border-warning-content\/40 { border-color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning-content)40%, #0000) } } .border-warning-content\/50 { border-color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning-content)50%, #0000) } } .border-warning-content\/60 { border-color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning-content)60%, #0000) } } .border-warning-content\/70 { border-color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning-content)70%, #0000) } } .border-warning-content\/80 { border-color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning-content)80%, #0000) } } .border-warning-content\/90 { border-color: var(--color-warning-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-warning-content)90%, #0000) } } .bg-error { background-color: var(--color-error) } .bg-error\/10 { background-color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error)10%, #0000) } } .bg-error\/20 { background-color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error)20%, #0000) } } .bg-error\/30 { background-color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error)30%, #0000) } } .bg-error\/40 { background-color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error)40%, #0000) } } .bg-error\/50 { background-color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error)50%, #0000) } } .bg-error\/60 { background-color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error)60%, #0000) } } .bg-error\/70 { background-color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error)70%, #0000) } } .bg-error\/80 { background-color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error)80%, #0000) } } .bg-error\/90 { background-color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error)90%, #0000) } } .text-error { color: var(--color-error) } .text-error\/10 { color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-error)10%, #0000) } } .text-error\/20 { color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-error)20%, #0000) } } .text-error\/30 { color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-error)30%, #0000) } } .text-error\/40 { color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-error)40%, #0000) } } .text-error\/50 { color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-error)50%, #0000) } } .text-error\/60 { color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-error)60%, #0000) } } .text-error\/70 { color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-error)70%, #0000) } } .text-error\/80 { color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-error)80%, #0000) } } .text-error\/90 { color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-error)90%, #0000) } } .border-error { border-color: var(--color-error) } .border-error\/10 { border-color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-error)10%, #0000) } } .border-error\/20 { border-color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-error)20%, #0000) } } .border-error\/30 { border-color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-error)30%, #0000) } } .border-error\/40 { border-color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-error)40%, #0000) } } .border-error\/50 { border-color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-error)50%, #0000) } } .border-error\/60 { border-color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-error)60%, #0000) } } .border-error\/70 { border-color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-error)70%, #0000) } } .border-error\/80 { border-color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-error)80%, #0000) } } .border-error\/90 { border-color: var(--color-error); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-error)90%, #0000) } } .bg-error-content { background-color: var(--color-error-content) } .bg-error-content\/10 { background-color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error-content)10%, #0000) } } .bg-error-content\/20 { background-color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error-content)20%, #0000) } } .bg-error-content\/30 { background-color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error-content)30%, #0000) } } .bg-error-content\/40 { background-color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error-content)40%, #0000) } } .bg-error-content\/50 { background-color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error-content)50%, #0000) } } .bg-error-content\/60 { background-color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error-content)60%, #0000) } } .bg-error-content\/70 { background-color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error-content)70%, #0000) } } .bg-error-content\/80 { background-color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error-content)80%, #0000) } } .bg-error-content\/90 { background-color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-error-content)90%, #0000) } } .text-error-content { color: var(--color-error-content) } .text-error-content\/10 { color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-error-content)10%, #0000) } } .text-error-content\/20 { color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-error-content)20%, #0000) } } .text-error-content\/30 { color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-error-content)30%, #0000) } } .text-error-content\/40 { color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-error-content)40%, #0000) } } .text-error-content\/50 { color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-error-content)50%, #0000) } } .text-error-content\/60 { color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-error-content)60%, #0000) } } .text-error-content\/70 { color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-error-content)70%, #0000) } } .text-error-content\/80 { color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-error-content)80%, #0000) } } .text-error-content\/90 { color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-error-content)90%, #0000) } } .border-error-content { border-color: var(--color-error-content) } .border-error-content\/10 { border-color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-error-content)10%, #0000) } } .border-error-content\/20 { border-color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-error-content)20%, #0000) } } .border-error-content\/30 { border-color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-error-content)30%, #0000) } } .border-error-content\/40 { border-color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-error-content)40%, #0000) } } .border-error-content\/50 { border-color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-error-content)50%, #0000) } } .border-error-content\/60 { border-color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-error-content)60%, #0000) } } .border-error-content\/70 { border-color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-error-content)70%, #0000) } } .border-error-content\/80 { border-color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-error-content)80%, #0000) } } .border-error-content\/90 { border-color: var(--color-error-content); @supports (color:color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-error-content)90%, #0000) } } @media (width>=40rem) { .sm\:bg-base-100 { background-color: var(--color-base-100) } .sm\:text-base-100 { color: var(--color-base-100) } .sm\:border-base-100 { border-color: var(--color-base-100) } .sm\:bg-base-200 { background-color: var(--color-base-200) } .sm\:text-base-200 { color: var(--color-base-200) } .sm\:border-base-200 { border-color: var(--color-base-200) } .sm\:bg-base-300 { background-color: var(--color-base-300) } .sm\:text-base-300 { color: var(--color-base-300) } .sm\:border-base-300 { border-color: var(--color-base-300) } .sm\:bg-base-content { background-color: var(--color-base-content) } .sm\:text-base-content { color: var(--color-base-content) } .sm\:border-base-content { border-color: var(--color-base-content) } .sm\:bg-primary { background-color: var(--color-primary) } .sm\:text-primary { color: var(--color-primary) } .sm\:border-primary { border-color: var(--color-primary) } .sm\:bg-primary-content { background-color: var(--color-primary-content) } .sm\:text-primary-content { color: var(--color-primary-content) } .sm\:border-primary-content { border-color: var(--color-primary-content) } .sm\:bg-secondary { background-color: var(--color-secondary) } .sm\:text-secondary { color: var(--color-secondary) } .sm\:border-secondary { border-color: var(--color-secondary) } .sm\:bg-secondary-content { background-color: var(--color-secondary-content) } .sm\:text-secondary-content { color: var(--color-secondary-content) } .sm\:border-secondary-content { border-color: var(--color-secondary-content) } .sm\:bg-accent { background-color: var(--color-accent) } .sm\:text-accent { color: var(--color-accent) } .sm\:border-accent { border-color: var(--color-accent) } .sm\:bg-accent-content { background-color: var(--color-accent-content) } .sm\:text-accent-content { color: var(--color-accent-content) } .sm\:border-accent-content { border-color: var(--color-accent-content) } .sm\:bg-neutral { background-color: var(--color-neutral) } .sm\:text-neutral { color: var(--color-neutral) } .sm\:border-neutral { border-color: var(--color-neutral) } .sm\:bg-neutral-content { background-color: var(--color-neutral-content) } .sm\:text-neutral-content { color: var(--color-neutral-content) } .sm\:border-neutral-content { border-color: var(--color-neutral-content) } .sm\:bg-info { background-color: var(--color-info) } .sm\:text-info { color: var(--color-info) } .sm\:border-info { border-color: var(--color-info) } .sm\:bg-info-content { background-color: var(--color-info-content) } .sm\:text-info-content { color: var(--color-info-content) } .sm\:border-info-content { border-color: var(--color-info-content) } .sm\:bg-success { background-color: var(--color-success) } .sm\:text-success { color: var(--color-success) } .sm\:border-success { border-color: var(--color-success) } .sm\:bg-success-content { background-color: var(--color-success-content) } .sm\:text-success-content { color: var(--color-success-content) } .sm\:border-success-content { border-color: var(--color-success-content) } .sm\:bg-warning { background-color: var(--color-warning) } .sm\:text-warning { color: var(--color-warning) } .sm\:border-warning { border-color: var(--color-warning) } .sm\:bg-warning-content { background-color: var(--color-warning-content) } .sm\:text-warning-content { color: var(--color-warning-content) } .sm\:border-warning-content { border-color: var(--color-warning-content) } .sm\:bg-error { background-color: var(--color-error) } .sm\:text-error { color: var(--color-error) } .sm\:border-error { border-color: var(--color-error) } .sm\:bg-error-content { background-color: var(--color-error-content) } .sm\:text-error-content { color: var(--color-error-content) } .sm\:border-error-content { border-color: var(--color-error-content) } } @media (width>=48rem) { .md\:bg-base-100 { background-color: var(--color-base-100) } .md\:text-base-100 { color: var(--color-base-100) } .md\:border-base-100 { border-color: var(--color-base-100) } .md\:bg-base-200 { background-color: var(--color-base-200) } .md\:text-base-200 { color: var(--color-base-200) } .md\:border-base-200 { border-color: var(--color-base-200) } .md\:bg-base-300 { background-color: var(--color-base-300) } .md\:text-base-300 { color: var(--color-base-300) } .md\:border-base-300 { border-color: var(--color-base-300) } .md\:bg-base-content { background-color: var(--color-base-content) } .md\:text-base-content { color: var(--color-base-content) } .md\:border-base-content { border-color: var(--color-base-content) } .md\:bg-primary { background-color: var(--color-primary) } .md\:text-primary { color: var(--color-primary) } .md\:border-primary { border-color: var(--color-primary) } .md\:bg-primary-content { background-color: var(--color-primary-content) } .md\:text-primary-content { color: var(--color-primary-content) } .md\:border-primary-content { border-color: var(--color-primary-content) } .md\:bg-secondary { background-color: var(--color-secondary) } .md\:text-secondary { color: var(--color-secondary) } .md\:border-secondary { border-color: var(--color-secondary) } .md\:bg-secondary-content { background-color: var(--color-secondary-content) } .md\:text-secondary-content { color: var(--color-secondary-content) } .md\:border-secondary-content { border-color: var(--color-secondary-content) } .md\:bg-accent { background-color: var(--color-accent) } .md\:text-accent { color: var(--color-accent) } .md\:border-accent { border-color: var(--color-accent) } .md\:bg-accent-content { background-color: var(--color-accent-content) } .md\:text-accent-content { color: var(--color-accent-content) } .md\:border-accent-content { border-color: var(--color-accent-content) } .md\:bg-neutral { background-color: var(--color-neutral) } .md\:text-neutral { color: var(--color-neutral) } .md\:border-neutral { border-color: var(--color-neutral) } .md\:bg-neutral-content { background-color: var(--color-neutral-content) } .md\:text-neutral-content { color: var(--color-neutral-content) } .md\:border-neutral-content { border-color: var(--color-neutral-content) } .md\:bg-info { background-color: var(--color-info) } .md\:text-info { color: var(--color-info) } .md\:border-info { border-color: var(--color-info) } .md\:bg-info-content { background-color: var(--color-info-content) } .md\:text-info-content { color: var(--color-info-content) } .md\:border-info-content { border-color: var(--color-info-content) } .md\:bg-success { background-color: var(--color-success) } .md\:text-success { color: var(--color-success) } .md\:border-success { border-color: var(--color-success) } .md\:bg-success-content { background-color: var(--color-success-content) } .md\:text-success-content { color: var(--color-success-content) } .md\:border-success-content { border-color: var(--color-success-content) } .md\:bg-warning { background-color: var(--color-warning) } .md\:text-warning { color: var(--color-warning) } .md\:border-warning { border-color: var(--color-warning) } .md\:bg-warning-content { background-color: var(--color-warning-content) } .md\:text-warning-content { color: var(--color-warning-content) } .md\:border-warning-content { border-color: var(--color-warning-content) } .md\:bg-error { background-color: var(--color-error) } .md\:text-error { color: var(--color-error) } .md\:border-error { border-color: var(--color-error) } .md\:bg-error-content { background-color: var(--color-error-content) } .md\:text-error-content { color: var(--color-error-content) } .md\:border-error-content { border-color: var(--color-error-content) } } @media (width>=64rem) { .lg\:bg-base-100 { background-color: var(--color-base-100) } .lg\:text-base-100 { color: var(--color-base-100) } .lg\:border-base-100 { border-color: var(--color-base-100) } .lg\:bg-base-200 { background-color: var(--color-base-200) } .lg\:text-base-200 { color: var(--color-base-200) } .lg\:border-base-200 { border-color: var(--color-base-200) } .lg\:bg-base-300 { background-color: var(--color-base-300) } .lg\:text-base-300 { color: var(--color-base-300) } .lg\:border-base-300 { border-color: var(--color-base-300) } .lg\:bg-base-content { background-color: var(--color-base-content) } .lg\:text-base-content { color: var(--color-base-content) } .lg\:border-base-content { border-color: var(--color-base-content) } .lg\:bg-primary { background-color: var(--color-primary) } .lg\:text-primary { color: var(--color-primary) } .lg\:border-primary { border-color: var(--color-primary) } .lg\:bg-primary-content { background-color: var(--color-primary-content) } .lg\:text-primary-content { color: var(--color-primary-content) } .lg\:border-primary-content { border-color: var(--color-primary-content) } .lg\:bg-secondary { background-color: var(--color-secondary) } .lg\:text-secondary { color: var(--color-secondary) } .lg\:border-secondary { border-color: var(--color-secondary) } .lg\:bg-secondary-content { background-color: var(--color-secondary-content) } .lg\:text-secondary-content { color: var(--color-secondary-content) } .lg\:border-secondary-content { border-color: var(--color-secondary-content) } .lg\:bg-accent { background-color: var(--color-accent) } .lg\:text-accent { color: var(--color-accent) } .lg\:border-accent { border-color: var(--color-accent) } .lg\:bg-accent-content { background-color: var(--color-accent-content) } .lg\:text-accent-content { color: var(--color-accent-content) } .lg\:border-accent-content { border-color: var(--color-accent-content) } .lg\:bg-neutral { background-color: var(--color-neutral) } .lg\:text-neutral { color: var(--color-neutral) } .lg\:border-neutral { border-color: var(--color-neutral) } .lg\:bg-neutral-content { background-color: var(--color-neutral-content) } .lg\:text-neutral-content { color: var(--color-neutral-content) } .lg\:border-neutral-content { border-color: var(--color-neutral-content) } .lg\:bg-info { background-color: var(--color-info) } .lg\:text-info { color: var(--color-info) } .lg\:border-info { border-color: var(--color-info) } .lg\:bg-info-content { background-color: var(--color-info-content) } .lg\:text-info-content { color: var(--color-info-content) } .lg\:border-info-content { border-color: var(--color-info-content) } .lg\:bg-success { background-color: var(--color-success) } .lg\:text-success { color: var(--color-success) } .lg\:border-success { border-color: var(--color-success) } .lg\:bg-success-content { background-color: var(--color-success-content) } .lg\:text-success-content { color: var(--color-success-content) } .lg\:border-success-content { border-color: var(--color-success-content) } .lg\:bg-warning { background-color: var(--color-warning) } .lg\:text-warning { color: var(--color-warning) } .lg\:border-warning { border-color: var(--color-warning) } .lg\:bg-warning-content { background-color: var(--color-warning-content) } .lg\:text-warning-content { color: var(--color-warning-content) } .lg\:border-warning-content { border-color: var(--color-warning-content) } .lg\:bg-error { background-color: var(--color-error) } .lg\:text-error { color: var(--color-error) } .lg\:border-error { border-color: var(--color-error) } .lg\:bg-error-content { background-color: var(--color-error-content) } .lg\:text-error-content { color: var(--color-error-content) } .lg\:border-error-content { border-color: var(--color-error-content) } } @media (width>=80rem) { .xl\:bg-base-100 { background-color: var(--color-base-100) } .xl\:text-base-100 { color: var(--color-base-100) } .xl\:border-base-100 { border-color: var(--color-base-100) } .xl\:bg-base-200 { background-color: var(--color-base-200) } .xl\:text-base-200 { color: var(--color-base-200) } .xl\:border-base-200 { border-color: var(--color-base-200) } .xl\:bg-base-300 { background-color: var(--color-base-300) } .xl\:text-base-300 { color: var(--color-base-300) } .xl\:border-base-300 { border-color: var(--color-base-300) } .xl\:bg-base-content { background-color: var(--color-base-content) } .xl\:text-base-content { color: var(--color-base-content) } .xl\:border-base-content { border-color: var(--color-base-content) } .xl\:bg-primary { background-color: var(--color-primary) } .xl\:text-primary { color: var(--color-primary) } .xl\:border-primary { border-color: var(--color-primary) } .xl\:bg-primary-content { background-color: var(--color-primary-content) } .xl\:text-primary-content { color: var(--color-primary-content) } .xl\:border-primary-content { border-color: var(--color-primary-content) } .xl\:bg-secondary { background-color: var(--color-secondary) } .xl\:text-secondary { color: var(--color-secondary) } .xl\:border-secondary { border-color: var(--color-secondary) } .xl\:bg-secondary-content { background-color: var(--color-secondary-content) } .xl\:text-secondary-content { color: var(--color-secondary-content) } .xl\:border-secondary-content { border-color: var(--color-secondary-content) } .xl\:bg-accent { background-color: var(--color-accent) } .xl\:text-accent { color: var(--color-accent) } .xl\:border-accent { border-color: var(--color-accent) } .xl\:bg-accent-content { background-color: var(--color-accent-content) } .xl\:text-accent-content { color: var(--color-accent-content) } .xl\:border-accent-content { border-color: var(--color-accent-content) } .xl\:bg-neutral { background-color: var(--color-neutral) } .xl\:text-neutral { color: var(--color-neutral) } .xl\:border-neutral { border-color: var(--color-neutral) } .xl\:bg-neutral-content { background-color: var(--color-neutral-content) } .xl\:text-neutral-content { color: var(--color-neutral-content) } .xl\:border-neutral-content { border-color: var(--color-neutral-content) } .xl\:bg-info { background-color: var(--color-info) } .xl\:text-info { color: var(--color-info) } .xl\:border-info { border-color: var(--color-info) } .xl\:bg-info-content { background-color: var(--color-info-content) } .xl\:text-info-content { color: var(--color-info-content) } .xl\:border-info-content { border-color: var(--color-info-content) } .xl\:bg-success { background-color: var(--color-success) } .xl\:text-success { color: var(--color-success) } .xl\:border-success { border-color: var(--color-success) } .xl\:bg-success-content { background-color: var(--color-success-content) } .xl\:text-success-content { color: var(--color-success-content) } .xl\:border-success-content { border-color: var(--color-success-content) } .xl\:bg-warning { background-color: var(--color-warning) } .xl\:text-warning { color: var(--color-warning) } .xl\:border-warning { border-color: var(--color-warning) } .xl\:bg-warning-content { background-color: var(--color-warning-content) } .xl\:text-warning-content { color: var(--color-warning-content) } .xl\:border-warning-content { border-color: var(--color-warning-content) } .xl\:bg-error { background-color: var(--color-error) } .xl\:text-error { color: var(--color-error) } .xl\:border-error { border-color: var(--color-error) } .xl\:bg-error-content { background-color: var(--color-error-content) } .xl\:text-error-content { color: var(--color-error-content) } .xl\:border-error-content { border-color: var(--color-error-content) } } @media (width>=96rem) { .\32 xl\:bg-base-100 { background-color: var(--color-base-100) } .\32 xl\:text-base-100 { color: var(--color-base-100) } .\32 xl\:border-base-100 { border-color: var(--color-base-100) } .\32 xl\:bg-base-200 { background-color: var(--color-base-200) } .\32 xl\:text-base-200 { color: var(--color-base-200) } .\32 xl\:border-base-200 { border-color: var(--color-base-200) } .\32 xl\:bg-base-300 { background-color: var(--color-base-300) } .\32 xl\:text-base-300 { color: var(--color-base-300) } .\32 xl\:border-base-300 { border-color: var(--color-base-300) } .\32 xl\:bg-base-content { background-color: var(--color-base-content) } .\32 xl\:text-base-content { color: var(--color-base-content) } .\32 xl\:border-base-content { border-color: var(--color-base-content) } .\32 xl\:bg-primary { background-color: var(--color-primary) } .\32 xl\:text-primary { color: var(--color-primary) } .\32 xl\:border-primary { border-color: var(--color-primary) } .\32 xl\:bg-primary-content { background-color: var(--color-primary-content) } .\32 xl\:text-primary-content { color: var(--color-primary-content) } .\32 xl\:border-primary-content { border-color: var(--color-primary-content) } .\32 xl\:bg-secondary { background-color: var(--color-secondary) } .\32 xl\:text-secondary { color: var(--color-secondary) } .\32 xl\:border-secondary { border-color: var(--color-secondary) } .\32 xl\:bg-secondary-content { background-color: var(--color-secondary-content) } .\32 xl\:text-secondary-content { color: var(--color-secondary-content) } .\32 xl\:border-secondary-content { border-color: var(--color-secondary-content) } .\32 xl\:bg-accent { background-color: var(--color-accent) } .\32 xl\:text-accent { color: var(--color-accent) } .\32 xl\:border-accent { border-color: var(--color-accent) } .\32 xl\:bg-accent-content { background-color: var(--color-accent-content) } .\32 xl\:text-accent-content { color: var(--color-accent-content) } .\32 xl\:border-accent-content { border-color: var(--color-accent-content) } .\32 xl\:bg-neutral { background-color: var(--color-neutral) } .\32 xl\:text-neutral { color: var(--color-neutral) } .\32 xl\:border-neutral { border-color: var(--color-neutral) } .\32 xl\:bg-neutral-content { background-color: var(--color-neutral-content) } .\32 xl\:text-neutral-content { color: var(--color-neutral-content) } .\32 xl\:border-neutral-content { border-color: var(--color-neutral-content) } .\32 xl\:bg-info { background-color: var(--color-info) } .\32 xl\:text-info { color: var(--color-info) } .\32 xl\:border-info { border-color: var(--color-info) } .\32 xl\:bg-info-content { background-color: var(--color-info-content) } .\32 xl\:text-info-content { color: var(--color-info-content) } .\32 xl\:border-info-content { border-color: var(--color-info-content) } .\32 xl\:bg-success { background-color: var(--color-success) } .\32 xl\:text-success { color: var(--color-success) } .\32 xl\:border-success { border-color: var(--color-success) } .\32 xl\:bg-success-content { background-color: var(--color-success-content) } .\32 xl\:text-success-content { color: var(--color-success-content) } .\32 xl\:border-success-content { border-color: var(--color-success-content) } .\32 xl\:bg-warning { background-color: var(--color-warning) } .\32 xl\:text-warning { color: var(--color-warning) } .\32 xl\:border-warning { border-color: var(--color-warning) } .\32 xl\:bg-warning-content { background-color: var(--color-warning-content) } .\32 xl\:text-warning-content { color: var(--color-warning-content) } .\32 xl\:border-warning-content { border-color: var(--color-warning-content) } .\32 xl\:bg-error { background-color: var(--color-error) } .\32 xl\:text-error { color: var(--color-error) } .\32 xl\:border-error { border-color: var(--color-error) } .\32 xl\:bg-error-content { background-color: var(--color-error-content) } .\32 xl\:text-error-content { color: var(--color-error-content) } .\32 xl\:border-error-content { border-color: var(--color-error-content) } } }