daisyui/components/input.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.4.1 - MIT License */ @layer utilities{.input{@layer daisyui.component{&{cursor:text;border:var(--border)solid #0000;appearance:none;background-color:var(--color-base-100);vertical-align:middle;white-space:nowrap;width:clamp(3rem,20rem,100%);height:var(--size);font-size:max(var(--font-size,.875rem),.875rem);touch-action:manipulation;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));flex-shrink:1;align-items:center;gap:.5rem;padding-inline:.75rem;display:inline-flex;position:relative}&:where(input){display:inline-flex}& :where(input){appearance:none;background-color:#0000;border:none;width:100%;height:100%;display:inline-flex;&:focus,&:focus-within{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){&{outline-offset:2px;outline:2px solid #0000}}}}& :where(input[type=url]),& :where(input[type=email]){direction:ltr}& :where(input[type=date]){display:inline-flex}&: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;z-index:1}@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);color:color-mix(in oklab,var(--color-base-content)40%,transparent);box-shadow:none;&::placeholder{color:color-mix(in oklab,var(--color-base-content)20%,transparent)}}&:has(>input[disabled])>input[disabled]{cursor:not-allowed}&::-webkit-date-and-time-value{text-align:inherit}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}}&::-webkit-calendar-picker-indicator{position:absolute;inset-inline-end:.75em}&:has(>input[type=date]){& :where(input[type=date]){-webkit-appearance:none;appearance:none;display:inline-flex}& input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;width:1em;height:1em;position:absolute;inset-inline-end:.75em}}}}.input-ghost{@layer daisyui.modifier{&{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.modifier{&,&:focus,&:focus-within{--input-color:var(--color-neutral)}}}.input-primary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-primary)}}}.input-secondary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-secondary)}}}.input-accent{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-accent)}}}.input-info{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-info)}}}.input-success{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-success)}}}.input-warning{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-warning)}}}.input-error{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-error)}}}.input-xs{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*6);font-size:max(var(--font-size,.6875rem),.6875rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.25rem;margin-inline-end:-.75rem}}}}.input-sm{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*8);font-size:max(var(--font-size,.75rem),.75rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.5rem;margin-inline-end:-.75rem}}}}.input-md{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*10);font-size:max(var(--font-size,.875rem),.875rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}}}}.input-lg{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*12);font-size:max(var(--font-size,1.125rem),1.125rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}}}}.input-xl{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*14);font-size:max(var(--font-size,1.375rem),1.375rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-1rem;margin-inline-end:-.75rem}}}}@media (width>=640px){.sm\:input{@layer daisyui.component{&{cursor:text;border:var(--border)solid #0000;appearance:none;background-color:var(--color-base-100);vertical-align:middle;white-space:nowrap;width:clamp(3rem,20rem,100%);height:var(--size);font-size:max(var(--font-size,.875rem),.875rem);touch-action:manipulation;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));flex-shrink:1;align-items:center;gap:.5rem;padding-inline:.75rem;display:inline-flex;position:relative}&:where(input){display:inline-flex}& :where(input){appearance:none;background-color:#0000;border:none;width:100%;height:100%;display:inline-flex;&:focus,&:focus-within{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){&{outline-offset:2px;outline:2px solid #0000}}}}& :where(input[type=url]),& :where(input[type=email]){direction:ltr}& :where(input[type=date]){display:inline-flex}&: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;z-index:1}@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);color:color-mix(in oklab,var(--color-base-content)40%,transparent);box-shadow:none;&::placeholder{color:color-mix(in oklab,var(--color-base-content)20%,transparent)}}&:has(>input[disabled])>input[disabled]{cursor:not-allowed}&::-webkit-date-and-time-value{text-align:inherit}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}}&::-webkit-calendar-picker-indicator{position:absolute;inset-inline-end:.75em}&:has(>input[type=date]){& :where(input[type=date]){-webkit-appearance:none;appearance:none;display:inline-flex}& input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;width:1em;height:1em;position:absolute;inset-inline-end:.75em}}}}.sm\:input-ghost{@layer daisyui.modifier{&{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.modifier{&,&:focus,&:focus-within{--input-color:var(--color-neutral)}}}.sm\:input-primary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-primary)}}}.sm\:input-secondary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-secondary)}}}.sm\:input-accent{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-accent)}}}.sm\:input-info{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-info)}}}.sm\:input-success{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-success)}}}.sm\:input-warning{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-warning)}}}.sm\:input-error{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-error)}}}.sm\:input-xs{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*6);font-size:max(var(--font-size,.6875rem),.6875rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.25rem;margin-inline-end:-.75rem}}}}.sm\:input-sm{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*8);font-size:max(var(--font-size,.75rem),.75rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.5rem;margin-inline-end:-.75rem}}}}.sm\:input-md{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*10);font-size:max(var(--font-size,.875rem),.875rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}}}}.sm\:input-lg{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*12);font-size:max(var(--font-size,1.125rem),1.125rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}}}}.sm\:input-xl{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*14);font-size:max(var(--font-size,1.375rem),1.375rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-1rem;margin-inline-end:-.75rem}}}}}@media (width>=768px){.md\:input{@layer daisyui.component{&{cursor:text;border:var(--border)solid #0000;appearance:none;background-color:var(--color-base-100);vertical-align:middle;white-space:nowrap;width:clamp(3rem,20rem,100%);height:var(--size);font-size:max(var(--font-size,.875rem),.875rem);touch-action:manipulation;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));flex-shrink:1;align-items:center;gap:.5rem;padding-inline:.75rem;display:inline-flex;position:relative}&:where(input){display:inline-flex}& :where(input){appearance:none;background-color:#0000;border:none;width:100%;height:100%;display:inline-flex;&:focus,&:focus-within{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){&{outline-offset:2px;outline:2px solid #0000}}}}& :where(input[type=url]),& :where(input[type=email]){direction:ltr}& :where(input[type=date]){display:inline-flex}&: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;z-index:1}@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);color:color-mix(in oklab,var(--color-base-content)40%,transparent);box-shadow:none;&::placeholder{color:color-mix(in oklab,var(--color-base-content)20%,transparent)}}&:has(>input[disabled])>input[disabled]{cursor:not-allowed}&::-webkit-date-and-time-value{text-align:inherit}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}}&::-webkit-calendar-picker-indicator{position:absolute;inset-inline-end:.75em}&:has(>input[type=date]){& :where(input[type=date]){-webkit-appearance:none;appearance:none;display:inline-flex}& input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;width:1em;height:1em;position:absolute;inset-inline-end:.75em}}}}.md\:input-ghost{@layer daisyui.modifier{&{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.modifier{&,&:focus,&:focus-within{--input-color:var(--color-neutral)}}}.md\:input-primary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-primary)}}}.md\:input-secondary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-secondary)}}}.md\:input-accent{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-accent)}}}.md\:input-info{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-info)}}}.md\:input-success{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-success)}}}.md\:input-warning{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-warning)}}}.md\:input-error{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-error)}}}.md\:input-xs{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*6);font-size:max(var(--font-size,.6875rem),.6875rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.25rem;margin-inline-end:-.75rem}}}}.md\:input-sm{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*8);font-size:max(var(--font-size,.75rem),.75rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.5rem;margin-inline-end:-.75rem}}}}.md\:input-md{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*10);font-size:max(var(--font-size,.875rem),.875rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}}}}.md\:input-lg{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*12);font-size:max(var(--font-size,1.125rem),1.125rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}}}}.md\:input-xl{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*14);font-size:max(var(--font-size,1.375rem),1.375rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-1rem;margin-inline-end:-.75rem}}}}}@media (width>=1024px){.lg\:input{@layer daisyui.component{&{cursor:text;border:var(--border)solid #0000;appearance:none;background-color:var(--color-base-100);vertical-align:middle;white-space:nowrap;width:clamp(3rem,20rem,100%);height:var(--size);font-size:max(var(--font-size,.875rem),.875rem);touch-action:manipulation;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));flex-shrink:1;align-items:center;gap:.5rem;padding-inline:.75rem;display:inline-flex;position:relative}&:where(input){display:inline-flex}& :where(input){appearance:none;background-color:#0000;border:none;width:100%;height:100%;display:inline-flex;&:focus,&:focus-within{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){&{outline-offset:2px;outline:2px solid #0000}}}}& :where(input[type=url]),& :where(input[type=email]){direction:ltr}& :where(input[type=date]){display:inline-flex}&: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;z-index:1}@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);color:color-mix(in oklab,var(--color-base-content)40%,transparent);box-shadow:none;&::placeholder{color:color-mix(in oklab,var(--color-base-content)20%,transparent)}}&:has(>input[disabled])>input[disabled]{cursor:not-allowed}&::-webkit-date-and-time-value{text-align:inherit}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}}&::-webkit-calendar-picker-indicator{position:absolute;inset-inline-end:.75em}&:has(>input[type=date]){& :where(input[type=date]){-webkit-appearance:none;appearance:none;display:inline-flex}& input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;width:1em;height:1em;position:absolute;inset-inline-end:.75em}}}}.lg\:input-ghost{@layer daisyui.modifier{&{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.modifier{&,&:focus,&:focus-within{--input-color:var(--color-neutral)}}}.lg\:input-primary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-primary)}}}.lg\:input-secondary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-secondary)}}}.lg\:input-accent{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-accent)}}}.lg\:input-info{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-info)}}}.lg\:input-success{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-success)}}}.lg\:input-warning{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-warning)}}}.lg\:input-error{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-error)}}}.lg\:input-xs{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*6);font-size:max(var(--font-size,.6875rem),.6875rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.25rem;margin-inline-end:-.75rem}}}}.lg\:input-sm{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*8);font-size:max(var(--font-size,.75rem),.75rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.5rem;margin-inline-end:-.75rem}}}}.lg\:input-md{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*10);font-size:max(var(--font-size,.875rem),.875rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}}}}.lg\:input-lg{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*12);font-size:max(var(--font-size,1.125rem),1.125rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}}}}.lg\:input-xl{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*14);font-size:max(var(--font-size,1.375rem),1.375rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-1rem;margin-inline-end:-.75rem}}}}}@media (width>=1280px){.xl\:input{@layer daisyui.component{&{cursor:text;border:var(--border)solid #0000;appearance:none;background-color:var(--color-base-100);vertical-align:middle;white-space:nowrap;width:clamp(3rem,20rem,100%);height:var(--size);font-size:max(var(--font-size,.875rem),.875rem);touch-action:manipulation;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));flex-shrink:1;align-items:center;gap:.5rem;padding-inline:.75rem;display:inline-flex;position:relative}&:where(input){display:inline-flex}& :where(input){appearance:none;background-color:#0000;border:none;width:100%;height:100%;display:inline-flex;&:focus,&:focus-within{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){&{outline-offset:2px;outline:2px solid #0000}}}}& :where(input[type=url]),& :where(input[type=email]){direction:ltr}& :where(input[type=date]){display:inline-flex}&: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;z-index:1}@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);color:color-mix(in oklab,var(--color-base-content)40%,transparent);box-shadow:none;&::placeholder{color:color-mix(in oklab,var(--color-base-content)20%,transparent)}}&:has(>input[disabled])>input[disabled]{cursor:not-allowed}&::-webkit-date-and-time-value{text-align:inherit}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}}&::-webkit-calendar-picker-indicator{position:absolute;inset-inline-end:.75em}&:has(>input[type=date]){& :where(input[type=date]){-webkit-appearance:none;appearance:none;display:inline-flex}& input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;width:1em;height:1em;position:absolute;inset-inline-end:.75em}}}}.xl\:input-ghost{@layer daisyui.modifier{&{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.modifier{&,&:focus,&:focus-within{--input-color:var(--color-neutral)}}}.xl\:input-primary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-primary)}}}.xl\:input-secondary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-secondary)}}}.xl\:input-accent{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-accent)}}}.xl\:input-info{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-info)}}}.xl\:input-success{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-success)}}}.xl\:input-warning{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-warning)}}}.xl\:input-error{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-error)}}}.xl\:input-xs{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*6);font-size:max(var(--font-size,.6875rem),.6875rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.25rem;margin-inline-end:-.75rem}}}}.xl\:input-sm{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*8);font-size:max(var(--font-size,.75rem),.75rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.5rem;margin-inline-end:-.75rem}}}}.xl\:input-md{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*10);font-size:max(var(--font-size,.875rem),.875rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}}}}.xl\:input-lg{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*12);font-size:max(var(--font-size,1.125rem),1.125rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}}}}.xl\:input-xl{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*14);font-size:max(var(--font-size,1.375rem),1.375rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-1rem;margin-inline-end:-.75rem}}}}}@media (width>=1536px){.\32 xl\:input{@layer daisyui.component{&{cursor:text;border:var(--border)solid #0000;appearance:none;background-color:var(--color-base-100);vertical-align:middle;white-space:nowrap;width:clamp(3rem,20rem,100%);height:var(--size);font-size:max(var(--font-size,.875rem),.875rem);touch-action:manipulation;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));flex-shrink:1;align-items:center;gap:.5rem;padding-inline:.75rem;display:inline-flex;position:relative}&:where(input){display:inline-flex}& :where(input){appearance:none;background-color:#0000;border:none;width:100%;height:100%;display:inline-flex;&:focus,&:focus-within{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){&{outline-offset:2px;outline:2px solid #0000}}}}& :where(input[type=url]),& :where(input[type=email]){direction:ltr}& :where(input[type=date]){display:inline-flex}&: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;z-index:1}@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);color:color-mix(in oklab,var(--color-base-content)40%,transparent);box-shadow:none;&::placeholder{color:color-mix(in oklab,var(--color-base-content)20%,transparent)}}&:has(>input[disabled])>input[disabled]{cursor:not-allowed}&::-webkit-date-and-time-value{text-align:inherit}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}}&::-webkit-calendar-picker-indicator{position:absolute;inset-inline-end:.75em}&:has(>input[type=date]){& :where(input[type=date]){-webkit-appearance:none;appearance:none;display:inline-flex}& input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;width:1em;height:1em;position:absolute;inset-inline-end:.75em}}}}.\32 xl\:input-ghost{@layer daisyui.modifier{&{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.modifier{&,&:focus,&:focus-within{--input-color:var(--color-neutral)}}}.\32 xl\:input-primary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-primary)}}}.\32 xl\:input-secondary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-secondary)}}}.\32 xl\:input-accent{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-accent)}}}.\32 xl\:input-info{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-info)}}}.\32 xl\:input-success{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-success)}}}.\32 xl\:input-warning{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-warning)}}}.\32 xl\:input-error{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-error)}}}.\32 xl\:input-xs{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*6);font-size:max(var(--font-size,.6875rem),.6875rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.25rem;margin-inline-end:-.75rem}}}}.\32 xl\:input-sm{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*8);font-size:max(var(--font-size,.75rem),.75rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.5rem;margin-inline-end:-.75rem}}}}.\32 xl\:input-md{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*10);font-size:max(var(--font-size,.875rem),.875rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}}}}.\32 xl\:input-lg{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*12);font-size:max(var(--font-size,1.125rem),1.125rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}}}}.\32 xl\:input-xl{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*14);font-size:max(var(--font-size,1.375rem),1.375rem)}&[type=number]{&::-webkit-inner-spin-button{margin-block:-1rem;margin-inline-end:-.75rem}}}}}}