daisyui/components/otp/object.js

daisyUI 5 - The Tailwind CSS Component Library

export default {".otp":{"@layer daisyui.l1.l2.l3":{"position":"relative","display":"inline-flex","font-family":"var(--font-mono)","clip-path":"inset(-3.5px 3.5px -3.5px -3.5px)","border-radius":"var(--radius-field)","font-size":"1.75rem","gap":"var(--otp-gap)","--input-color":"color-mix(in oklab, var(--color-base-content) 20%, #0000)","--otp-ch":"1ch","@supports (font: -apple-system-body)":{"--otp-ch":"0.618164em"},"--otp-gap":"calc(var(--otp-ch) * 0.5)","--otp-w":"calc(var(--otp-ch) * 2)","--otp-size":"calc(var(--size-field, 0.25rem) * 10)","--stride":"calc(var(--otp-w) + var(--otp-gap))","> input":{"pointer-events":"none","inset-inline-start":"calc(0.25rem * 0)","z-index":1,"margin":"0","appearance":"none","border-style":"var(--tw-border-style)","border-width":"0px","background-color":"transparent","padding":"0","outline-style":"var(--tw-outline-style)","outline-width":"0px","field-sizing":"content","padding-inline-start":"calc(var(--otp-ch) * 0.5 + var(--border))","line-height":1,"letter-spacing":"calc(var(--stride) - var(--otp-ch))","font-variant-numeric":"tabular-nums","&::selection":{"background-color":"transparent","color":"color-mix(in oklab, var(--color-base-content) 20%, #0000)"},"&:valid":{"caret-color":"transparent"}},"&:has(> span:nth-child(1))":{"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":{"position":"absolute","display":"flex","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))","transition":"border-color 0.2s","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":"2px solid #0000","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) * 0.1)) inset","&:nth-child(1)":{"left":"1px","@supports (font: -apple-system-body)":{"left":"2px"},"@supports (-moz-appearance: none)":{"left":"0px"}},"&:nth-child(2)":{"left":"calc(var(--stride) * 1)","transition-delay":"0.02s"},"&:nth-child(3)":{"left":"calc(var(--stride) * 2)","transition-delay":"0.04s"},"&:nth-child(4)":{"left":"calc(var(--stride) * 3)","transition-delay":"0.06s"},"&:nth-child(5)":{"left":"calc(var(--stride) * 4)","transition-delay":"0.08s"},"&:nth-child(6)":{"left":"calc(var(--stride) * 5)","transition-delay":"0.1s"},"&:nth-child(7)":{"left":"calc(var(--stride) * 6)","transition-delay":"0.12s"},"&:nth-child(8)":{"left":"calc(var(--stride) * 7)","transition-delay":"0.14s"}},"&:has(input:valid:focus)":{"> span":{"outline":"2px solid var(--input-color)","outline-offset":"1px"},"&:after":{"opacity":0}},"&:after":{"flex-shrink":0,"content":"\"\"","width":"var(--otp-w)","height":"var(--otp-size)","border-radius":"var(--radius-field)","outline":"2px solid #0000","outline-offset":"1px","z-index":10,"margin-inline-start":"calc(-1 * (var(--otp-gap) + var(--otp-ch) * 0.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":"0px"},"&: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":{"font-size":"1.25rem","--otp-size":"calc(var(--size-field, 0.25rem) * 6)"}},".otp-sm":{"@layer daisyui.l1.l2":{"font-size":"1.5rem","--otp-size":"calc(var(--size-field, 0.25rem) * 8)"}},".otp-md":{"@layer daisyui.l1.l2":{"font-size":"1.75rem","--otp-size":"calc(var(--size-field, 0.25rem) * 10)"}},".otp-lg":{"@layer daisyui.l1.l2":{"font-size":"2rem","--otp-size":"calc(var(--size-field, 0.25rem) * 12)"}},".otp-xl":{"@layer daisyui.l1.l2":{"font-size":"2.5rem","--otp-size":"calc(var(--size-field, 0.25rem) * 14)"}},".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)"}}}};