daisyui/components/input.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.7.17 - MIT License */ @layer utilities{@layer daisyui.l1.l2.l3{.input{appearance:none;background-color:var(--color-base-100);vertical-align:middle;white-space:nowrap;--size:calc(var(--size-field,.25rem) * var(--in-size-mul,10));--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,.875rem));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 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}}.input::-webkit-inner-spin-button{margin-inline-end:-10px}.input::-webkit-calendar-picker-indicator{inset-inline-end:.75em}input.input,.input input{text-align:start;display:inline-flex;position:relative;&[type=url],&[type=tel],&[type=email],&[type=number]{direction:ltr}&::-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,-3))}&::-webkit-calendar-picker-indicator{cursor:pointer;width:1em;height:1em;position:absolute}&::-webkit-color-swatch-wrapper{padding-block:.25rem}}.input:focus,.input: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}@media (pointer:coarse){@supports (-webkit-touch-callout:none){.input:focus,.input:focus-within{--font-size:1rem}}}.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input{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}}.input:has(>input[disabled])>input[disabled]{cursor:not-allowed}}:is(.input[type=url],.input[type=tel],.input[type=email],.input[type=number]):dir(rtl){border-start-start-radius:var(--join-se,var(--radius-field));border-start-end-radius:var(--join-ss,var(--radius-field));border-end-end-radius:var(--join-es,var(--radius-field));border-end-start-radius:var(--join-ee,var(--radius-field))}@layer daisyui.l1.l2{.input-ghost{box-shadow:none;background-color:#0000;border-color:#0000}.input-ghost:focus,.input-ghost:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}.input-neutral,.input-neutral:focus,.input-neutral:focus-within{--input-color:var(--color-neutral)}.input-primary,.input-primary:focus,.input-primary:focus-within{--input-color:var(--color-primary)}.input-secondary,.input-secondary:focus,.input-secondary:focus-within{--input-color:var(--color-secondary)}.input-accent,.input-accent:focus,.input-accent:focus-within{--input-color:var(--color-accent)}.input-info,.input-info:focus,.input-info:focus-within{--input-color:var(--color-info)}.input-success,.input-success:focus,.input-success:focus-within{--input-color:var(--color-success)}.input-warning,.input-warning:focus,.input-warning:focus-within{--input-color:var(--color-warning)}.input-error,.input-error:focus,.input-error:focus-within{--input-color:var(--color-error)}.input-xs{--in-size-mul:6;--font-size-min:.6875rem;--spin-my:-1}.floating-label:has(.input-xs){--top-mul:3;--font-size:.6875rem}.input-sm{--in-size-mul:8;--font-size-min:.75rem;--spin-my:-2}.floating-label:has(.input-sm){--top-mul:4;--font-size:.75rem}.input-md{--in-size-mul:10;--font-size-min:.875rem;--spin-my:-3}.floating-label:has(.input-md){--top-mul:5;--font-size:.875rem}.input-lg{--in-size-mul:12;--font-size-min:1.125rem;--spin-my:-3}.floating-label:has(.input-lg){--top-mul:6;--font-size:1.125rem}.input-xl{--in-size-mul:14;--font-size-min:1.375rem;--spin-my:-4}.floating-label:has(.input-xl){--top-mul:7;--font-size:1.375rem}}@media (width>=640px){@layer daisyui.l1.l2.l3{.sm\:input{appearance:none;background-color:var(--color-base-100);vertical-align:middle;white-space:nowrap;--size:calc(var(--size-field,.25rem) * var(--in-size-mul,10));--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,.875rem));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}.sm\:input 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}}.sm\:input::-webkit-inner-spin-button{margin-inline-end:-10px}.sm\:input::-webkit-calendar-picker-indicator{inset-inline-end:.75em}input.input,.sm\:input input{text-align:start;display:inline-flex;position:relative;&[type=url],&[type=tel],&[type=email],&[type=number]{direction:ltr}&::-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,-3))}&::-webkit-calendar-picker-indicator{cursor:pointer;width:1em;height:1em;position:absolute}&::-webkit-color-swatch-wrapper{padding-block:.25rem}}.sm\:input:focus,.sm\:input: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}@media (pointer:coarse){@supports (-webkit-touch-callout:none){.sm\:input:focus,.sm\:input:focus-within{--font-size:1rem}}}.sm\:input:has(>input[disabled]),.sm\:input:is(:disabled,[disabled]),fieldset:disabled .input{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}}.sm\:input:has(>input[disabled])>input[disabled]{cursor:not-allowed}}:is(.input[type=url],.input[type=tel],.input[type=email],.input[type=number]):dir(rtl){border-start-start-radius:var(--join-se,var(--radius-field));border-start-end-radius:var(--join-ss,var(--radius-field));border-end-end-radius:var(--join-es,var(--radius-field));border-end-start-radius:var(--join-ee,var(--radius-field))}@layer daisyui.l1.l2{.sm\:input-ghost{box-shadow:none;background-color:#0000;border-color:#0000}.sm\:input-ghost:focus,.sm\:input-ghost:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}.input-neutral,.sm\:input-neutral:focus,.sm\:input-neutral:focus-within{--input-color:var(--color-neutral)}.input-primary,.sm\:input-primary:focus,.sm\:input-primary:focus-within{--input-color:var(--color-primary)}.input-secondary,.sm\:input-secondary:focus,.sm\:input-secondary:focus-within{--input-color:var(--color-secondary)}.input-accent,.sm\:input-accent:focus,.sm\:input-accent:focus-within{--input-color:var(--color-accent)}.input-info,.sm\:input-info:focus,.sm\:input-info:focus-within{--input-color:var(--color-info)}.input-success,.sm\:input-success:focus,.sm\:input-success:focus-within{--input-color:var(--color-success)}.input-warning,.sm\:input-warning:focus,.sm\:input-warning:focus-within{--input-color:var(--color-warning)}.input-error,.sm\:input-error:focus,.sm\:input-error:focus-within{--input-color:var(--color-error)}.sm\:input-xs{--in-size-mul:6;--font-size-min:.6875rem;--spin-my:-1}.sm\:floating-label:has(.input-xs){--top-mul:3;--font-size:.6875rem}.sm\:input-sm{--in-size-mul:8;--font-size-min:.75rem;--spin-my:-2}.sm\:floating-label:has(.input-sm){--top-mul:4;--font-size:.75rem}.sm\:input-md{--in-size-mul:10;--font-size-min:.875rem;--spin-my:-3}.sm\:floating-label:has(.input-md){--top-mul:5;--font-size:.875rem}.sm\:input-lg{--in-size-mul:12;--font-size-min:1.125rem;--spin-my:-3}.sm\:floating-label:has(.input-lg){--top-mul:6;--font-size:1.125rem}.sm\:input-xl{--in-size-mul:14;--font-size-min:1.375rem;--spin-my:-4}.sm\:floating-label:has(.input-xl){--top-mul:7;--font-size:1.375rem}}}@media (width>=768px){@layer daisyui.l1.l2.l3{.md\:input{appearance:none;background-color:var(--color-base-100);vertical-align:middle;white-space:nowrap;--size:calc(var(--size-field,.25rem) * var(--in-size-mul,10));--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,.875rem));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}.md\:input 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}}.md\:input::-webkit-inner-spin-button{margin-inline-end:-10px}.md\:input::-webkit-calendar-picker-indicator{inset-inline-end:.75em}input.input,.md\:input input{text-align:start;display:inline-flex;position:relative;&[type=url],&[type=tel],&[type=email],&[type=number]{direction:ltr}&::-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,-3))}&::-webkit-calendar-picker-indicator{cursor:pointer;width:1em;height:1em;position:absolute}&::-webkit-color-swatch-wrapper{padding-block:.25rem}}.md\:input:focus,.md\:input: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}@media (pointer:coarse){@supports (-webkit-touch-callout:none){.md\:input:focus,.md\:input:focus-within{--font-size:1rem}}}.md\:input:has(>input[disabled]),.md\:input:is(:disabled,[disabled]),fieldset:disabled .input{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}}.md\:input:has(>input[disabled])>input[disabled]{cursor:not-allowed}}:is(.input[type=url],.input[type=tel],.input[type=email],.input[type=number]):dir(rtl){border-start-start-radius:var(--join-se,var(--radius-field));border-start-end-radius:var(--join-ss,var(--radius-field));border-end-end-radius:var(--join-es,var(--radius-field));border-end-start-radius:var(--join-ee,var(--radius-field))}@layer daisyui.l1.l2{.md\:input-ghost{box-shadow:none;background-color:#0000;border-color:#0000}.md\:input-ghost:focus,.md\:input-ghost:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}.input-neutral,.md\:input-neutral:focus,.md\:input-neutral:focus-within{--input-color:var(--color-neutral)}.input-primary,.md\:input-primary:focus,.md\:input-primary:focus-within{--input-color:var(--color-primary)}.input-secondary,.md\:input-secondary:focus,.md\:input-secondary:focus-within{--input-color:var(--color-secondary)}.input-accent,.md\:input-accent:focus,.md\:input-accent:focus-within{--input-color:var(--color-accent)}.input-info,.md\:input-info:focus,.md\:input-info:focus-within{--input-color:var(--color-info)}.input-success,.md\:input-success:focus,.md\:input-success:focus-within{--input-color:var(--color-success)}.input-warning,.md\:input-warning:focus,.md\:input-warning:focus-within{--input-color:var(--color-warning)}.input-error,.md\:input-error:focus,.md\:input-error:focus-within{--input-color:var(--color-error)}.md\:input-xs{--in-size-mul:6;--font-size-min:.6875rem;--spin-my:-1}.md\:floating-label:has(.input-xs){--top-mul:3;--font-size:.6875rem}.md\:input-sm{--in-size-mul:8;--font-size-min:.75rem;--spin-my:-2}.md\:floating-label:has(.input-sm){--top-mul:4;--font-size:.75rem}.md\:input-md{--in-size-mul:10;--font-size-min:.875rem;--spin-my:-3}.md\:floating-label:has(.input-md){--top-mul:5;--font-size:.875rem}.md\:input-lg{--in-size-mul:12;--font-size-min:1.125rem;--spin-my:-3}.md\:floating-label:has(.input-lg){--top-mul:6;--font-size:1.125rem}.md\:input-xl{--in-size-mul:14;--font-size-min:1.375rem;--spin-my:-4}.md\:floating-label:has(.input-xl){--top-mul:7;--font-size:1.375rem}}}@media (width>=1024px){@layer daisyui.l1.l2.l3{.lg\:input{appearance:none;background-color:var(--color-base-100);vertical-align:middle;white-space:nowrap;--size:calc(var(--size-field,.25rem) * var(--in-size-mul,10));--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,.875rem));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}.lg\:input 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}}.lg\:input::-webkit-inner-spin-button{margin-inline-end:-10px}.lg\:input::-webkit-calendar-picker-indicator{inset-inline-end:.75em}input.input,.lg\:input input{text-align:start;display:inline-flex;position:relative;&[type=url],&[type=tel],&[type=email],&[type=number]{direction:ltr}&::-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,-3))}&::-webkit-calendar-picker-indicator{cursor:pointer;width:1em;height:1em;position:absolute}&::-webkit-color-swatch-wrapper{padding-block:.25rem}}.lg\:input:focus,.lg\:input: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}@media (pointer:coarse){@supports (-webkit-touch-callout:none){.lg\:input:focus,.lg\:input:focus-within{--font-size:1rem}}}.lg\:input:has(>input[disabled]),.lg\:input:is(:disabled,[disabled]),fieldset:disabled .input{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}}.lg\:input:has(>input[disabled])>input[disabled]{cursor:not-allowed}}:is(.input[type=url],.input[type=tel],.input[type=email],.input[type=number]):dir(rtl){border-start-start-radius:var(--join-se,var(--radius-field));border-start-end-radius:var(--join-ss,var(--radius-field));border-end-end-radius:var(--join-es,var(--radius-field));border-end-start-radius:var(--join-ee,var(--radius-field))}@layer daisyui.l1.l2{.lg\:input-ghost{box-shadow:none;background-color:#0000;border-color:#0000}.lg\:input-ghost:focus,.lg\:input-ghost:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}.input-neutral,.lg\:input-neutral:focus,.lg\:input-neutral:focus-within{--input-color:var(--color-neutral)}.input-primary,.lg\:input-primary:focus,.lg\:input-primary:focus-within{--input-color:var(--color-primary)}.input-secondary,.lg\:input-secondary:focus,.lg\:input-secondary:focus-within{--input-color:var(--color-secondary)}.input-accent,.lg\:input-accent:focus,.lg\:input-accent:focus-within{--input-color:var(--color-accent)}.input-info,.lg\:input-info:focus,.lg\:input-info:focus-within{--input-color:var(--color-info)}.input-success,.lg\:input-success:focus,.lg\:input-success:focus-within{--input-color:var(--color-success)}.input-warning,.lg\:input-warning:focus,.lg\:input-warning:focus-within{--input-color:var(--color-warning)}.input-error,.lg\:input-error:focus,.lg\:input-error:focus-within{--input-color:var(--color-error)}.lg\:input-xs{--in-size-mul:6;--font-size-min:.6875rem;--spin-my:-1}.lg\:floating-label:has(.input-xs){--top-mul:3;--font-size:.6875rem}.lg\:input-sm{--in-size-mul:8;--font-size-min:.75rem;--spin-my:-2}.lg\:floating-label:has(.input-sm){--top-mul:4;--font-size:.75rem}.lg\:input-md{--in-size-mul:10;--font-size-min:.875rem;--spin-my:-3}.lg\:floating-label:has(.input-md){--top-mul:5;--font-size:.875rem}.lg\:input-lg{--in-size-mul:12;--font-size-min:1.125rem;--spin-my:-3}.lg\:floating-label:has(.input-lg){--top-mul:6;--font-size:1.125rem}.lg\:input-xl{--in-size-mul:14;--font-size-min:1.375rem;--spin-my:-4}.lg\:floating-label:has(.input-xl){--top-mul:7;--font-size:1.375rem}}}@media (width>=1280px){@layer daisyui.l1.l2.l3{.xl\:input{appearance:none;background-color:var(--color-base-100);vertical-align:middle;white-space:nowrap;--size:calc(var(--size-field,.25rem) * var(--in-size-mul,10));--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,.875rem));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}.xl\:input 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}}.xl\:input::-webkit-inner-spin-button{margin-inline-end:-10px}.xl\:input::-webkit-calendar-picker-indicator{inset-inline-end:.75em}input.input,.xl\:input input{text-align:start;display:inline-flex;position:relative;&[type=url],&[type=tel],&[type=email],&[type=number]{direction:ltr}&::-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,-3))}&::-webkit-calendar-picker-indicator{cursor:pointer;width:1em;height:1em;position:absolute}&::-webkit-color-swatch-wrapper{padding-block:.25rem}}.xl\:input:focus,.xl\:input: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}@media (pointer:coarse){@supports (-webkit-touch-callout:none){.xl\:input:focus,.xl\:input:focus-within{--font-size:1rem}}}.xl\:input:has(>input[disabled]),.xl\:input:is(:disabled,[disabled]),fieldset:disabled .input{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}}.xl\:input:has(>input[disabled])>input[disabled]{cursor:not-allowed}}:is(.input[type=url],.input[type=tel],.input[type=email],.input[type=number]):dir(rtl){border-start-start-radius:var(--join-se,var(--radius-field));border-start-end-radius:var(--join-ss,var(--radius-field));border-end-end-radius:var(--join-es,var(--radius-field));border-end-start-radius:var(--join-ee,var(--radius-field))}@layer daisyui.l1.l2{.xl\:input-ghost{box-shadow:none;background-color:#0000;border-color:#0000}.xl\:input-ghost:focus,.xl\:input-ghost:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}.input-neutral,.xl\:input-neutral:focus,.xl\:input-neutral:focus-within{--input-color:var(--color-neutral)}.input-primary,.xl\:input-primary:focus,.xl\:input-primary:focus-within{--input-color:var(--color-primary)}.input-secondary,.xl\:input-secondary:focus,.xl\:input-secondary:focus-within{--input-color:var(--color-secondary)}.input-accent,.xl\:input-accent:focus,.xl\:input-accent:focus-within{--input-color:var(--color-accent)}.input-info,.xl\:input-info:focus,.xl\:input-info:focus-within{--input-color:var(--color-info)}.input-success,.xl\:input-success:focus,.xl\:input-success:focus-within{--input-color:var(--color-success)}.input-warning,.xl\:input-warning:focus,.xl\:input-warning:focus-within{--input-color:var(--color-warning)}.input-error,.xl\:input-error:focus,.xl\:input-error:focus-within{--input-color:var(--color-error)}.xl\:input-xs{--in-size-mul:6;--font-size-min:.6875rem;--spin-my:-1}.xl\:floating-label:has(.input-xs){--top-mul:3;--font-size:.6875rem}.xl\:input-sm{--in-size-mul:8;--font-size-min:.75rem;--spin-my:-2}.xl\:floating-label:has(.input-sm){--top-mul:4;--font-size:.75rem}.xl\:input-md{--in-size-mul:10;--font-size-min:.875rem;--spin-my:-3}.xl\:floating-label:has(.input-md){--top-mul:5;--font-size:.875rem}.xl\:input-lg{--in-size-mul:12;--font-size-min:1.125rem;--spin-my:-3}.xl\:floating-label:has(.input-lg){--top-mul:6;--font-size:1.125rem}.xl\:input-xl{--in-size-mul:14;--font-size-min:1.375rem;--spin-my:-4}.xl\:floating-label:has(.input-xl){--top-mul:7;--font-size:1.375rem}}}@media (width>=1536px){@layer daisyui.l1.l2.l3{.\32 xl\:input{appearance:none;background-color:var(--color-base-100);vertical-align:middle;white-space:nowrap;--size:calc(var(--size-field,.25rem) * var(--in-size-mul,10));--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,.875rem));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}.\32 xl\:input 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}}.\32 xl\:input::-webkit-inner-spin-button{margin-inline-end:-10px}.\32 xl\:input::-webkit-calendar-picker-indicator{inset-inline-end:.75em}input.input,.\32 xl\:input input{text-align:start;display:inline-flex;position:relative;&[type=url],&[type=tel],&[type=email],&[type=number]{direction:ltr}&::-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,-3))}&::-webkit-calendar-picker-indicator{cursor:pointer;width:1em;height:1em;position:absolute}&::-webkit-color-swatch-wrapper{padding-block:.25rem}}.\32 xl\:input:focus,.\32 xl\:input: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}@media (pointer:coarse){@supports (-webkit-touch-callout:none){.\32 xl\:input:focus,.\32 xl\:input:focus-within{--font-size:1rem}}}.\32 xl\:input:has(>input[disabled]),.\32 xl\:input:is(:disabled,[disabled]),fieldset:disabled .input{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}}.\32 xl\:input:has(>input[disabled])>input[disabled]{cursor:not-allowed}}:is(.input[type=url],.input[type=tel],.input[type=email],.input[type=number]):dir(rtl){border-start-start-radius:var(--join-se,var(--radius-field));border-start-end-radius:var(--join-ss,var(--radius-field));border-end-end-radius:var(--join-es,var(--radius-field));border-end-start-radius:var(--join-ee,var(--radius-field))}@layer daisyui.l1.l2{.\32 xl\:input-ghost{box-shadow:none;background-color:#0000;border-color:#0000}.\32 xl\:input-ghost:focus,.\32 xl\:input-ghost:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}.input-neutral,.\32 xl\:input-neutral:focus,.\32 xl\:input-neutral:focus-within{--input-color:var(--color-neutral)}.input-primary,.\32 xl\:input-primary:focus,.\32 xl\:input-primary:focus-within{--input-color:var(--color-primary)}.input-secondary,.\32 xl\:input-secondary:focus,.\32 xl\:input-secondary:focus-within{--input-color:var(--color-secondary)}.input-accent,.\32 xl\:input-accent:focus,.\32 xl\:input-accent:focus-within{--input-color:var(--color-accent)}.input-info,.\32 xl\:input-info:focus,.\32 xl\:input-info:focus-within{--input-color:var(--color-info)}.input-success,.\32 xl\:input-success:focus,.\32 xl\:input-success:focus-within{--input-color:var(--color-success)}.input-warning,.\32 xl\:input-warning:focus,.\32 xl\:input-warning:focus-within{--input-color:var(--color-warning)}.input-error,.\32 xl\:input-error:focus,.\32 xl\:input-error:focus-within{--input-color:var(--color-error)}.\32 xl\:input-xs{--in-size-mul:6;--font-size-min:.6875rem;--spin-my:-1}.\32 xl\:floating-label:has(.input-xs){--top-mul:3;--font-size:.6875rem}.\32 xl\:input-sm{--in-size-mul:8;--font-size-min:.75rem;--spin-my:-2}.\32 xl\:floating-label:has(.input-sm){--top-mul:4;--font-size:.75rem}.\32 xl\:input-md{--in-size-mul:10;--font-size-min:.875rem;--spin-my:-3}.\32 xl\:floating-label:has(.input-md){--top-mul:5;--font-size:.875rem}.\32 xl\:input-lg{--in-size-mul:12;--font-size-min:1.125rem;--spin-my:-3}.\32 xl\:floating-label:has(.input-lg){--top-mul:6;--font-size:1.125rem}.\32 xl\:input-xl{--in-size-mul:14;--font-size-min:1.375rem;--spin-my:-4}.\32 xl\:floating-label:has(.input-xl){--top-mul:7;--font-size:1.375rem}}}}