daisyui/components/fileinput.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.7.17 - MIT License */ @layer utilities{@layer daisyui.l1.l2.l3{.file-input{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-input::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}.file-input: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}.file-input:has(>input[disabled]),.file-input: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}}}@layer daisyui.l1.l2{.file-input-ghost{box-shadow:none;background-color:#0000;border-color:#0000;transition:background-color .2s}.file-input-ghost::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}.file-input-ghost:focus,.file-input-ghost:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}.file-input-neutral{--btn-color:var(--color-neutral)}.file-input-neutral::file-selector-button{color:var(--color-neutral-content)}.file-input-neutral,.file-input-neutral:focus,.file-input-neutral:focus-within{--input-color:var(--color-neutral)}.file-input-primary{--btn-color:var(--color-primary)}.file-input-primary::file-selector-button{color:var(--color-primary-content)}.file-input-primary,.file-input-primary:focus,.file-input-primary:focus-within{--input-color:var(--color-primary)}.file-input-secondary{--btn-color:var(--color-secondary)}.file-input-secondary::file-selector-button{color:var(--color-secondary-content)}.file-input-secondary,.file-input-secondary:focus,.file-input-secondary:focus-within{--input-color:var(--color-secondary)}.file-input-accent{--btn-color:var(--color-accent)}.file-input-accent::file-selector-button{color:var(--color-accent-content)}.file-input-accent,.file-input-accent:focus,.file-input-accent:focus-within{--input-color:var(--color-accent)}.file-input-info{--btn-color:var(--color-info)}.file-input-info::file-selector-button{color:var(--color-info-content)}.file-input-info,.file-input-info:focus,.file-input-info:focus-within{--input-color:var(--color-info)}.file-input-success{--btn-color:var(--color-success)}.file-input-success::file-selector-button{color:var(--color-success-content)}.file-input-success,.file-input-success:focus,.file-input-success:focus-within{--input-color:var(--color-success)}.file-input-warning{--btn-color:var(--color-warning)}.file-input-warning::file-selector-button{color:var(--color-warning-content)}.file-input-warning,.file-input-warning:focus,.file-input-warning:focus-within{--input-color:var(--color-warning)}.file-input-error{--btn-color:var(--color-error)}.file-input-error::file-selector-button{color:var(--color-error-content)}.file-input-error,.file-input-error:focus,.file-input-error:focus-within{--input-color:var(--color-error)}.file-input-xs{--size:calc(var(--size-field,.25rem) * 6);font-size:.6875rem;line-height:1rem}.file-input-xs::file-selector-button{font-size:.6875rem}.file-input-sm{--size:calc(var(--size-field,.25rem) * 8);font-size:.75rem;line-height:1.5rem}.file-input-sm::file-selector-button{font-size:.75rem}.file-input-md{--size:calc(var(--size-field,.25rem) * 10);font-size:.875rem;line-height:2}.file-input-md::file-selector-button{font-size:.875rem}.file-input-lg{--size:calc(var(--size-field,.25rem) * 12);font-size:1.125rem;line-height:2.5rem}.file-input-lg::file-selector-button{font-size:1.125rem}.file-input-xl{--size:calc(var(--size-field,.25rem) * 14);padding-inline-end:1.5rem;font-size:1.125rem;line-height:3rem}.file-input-xl::file-selector-button{font-size:1.375rem}}@media (width>=640px){@layer daisyui.l1.l2.l3{.sm\:file-input{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}.sm\:file-input::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}.sm\:file-input: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}.sm\:file-input:has(>input[disabled]),.sm\:file-input: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}}}@layer daisyui.l1.l2{.sm\:file-input-ghost{box-shadow:none;background-color:#0000;border-color:#0000;transition:background-color .2s}.sm\:file-input-ghost::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}.sm\:file-input-ghost:focus,.sm\:file-input-ghost:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}.sm\:file-input-neutral{--btn-color:var(--color-neutral)}.sm\:file-input-neutral::file-selector-button{color:var(--color-neutral-content)}.file-input-neutral,.sm\:file-input-neutral:focus,.sm\:file-input-neutral:focus-within{--input-color:var(--color-neutral)}.sm\:file-input-primary{--btn-color:var(--color-primary)}.sm\:file-input-primary::file-selector-button{color:var(--color-primary-content)}.file-input-primary,.sm\:file-input-primary:focus,.sm\:file-input-primary:focus-within{--input-color:var(--color-primary)}.sm\:file-input-secondary{--btn-color:var(--color-secondary)}.sm\:file-input-secondary::file-selector-button{color:var(--color-secondary-content)}.file-input-secondary,.sm\:file-input-secondary:focus,.sm\:file-input-secondary:focus-within{--input-color:var(--color-secondary)}.sm\:file-input-accent{--btn-color:var(--color-accent)}.sm\:file-input-accent::file-selector-button{color:var(--color-accent-content)}.file-input-accent,.sm\:file-input-accent:focus,.sm\:file-input-accent:focus-within{--input-color:var(--color-accent)}.sm\:file-input-info{--btn-color:var(--color-info)}.sm\:file-input-info::file-selector-button{color:var(--color-info-content)}.file-input-info,.sm\:file-input-info:focus,.sm\:file-input-info:focus-within{--input-color:var(--color-info)}.sm\:file-input-success{--btn-color:var(--color-success)}.sm\:file-input-success::file-selector-button{color:var(--color-success-content)}.file-input-success,.sm\:file-input-success:focus,.sm\:file-input-success:focus-within{--input-color:var(--color-success)}.sm\:file-input-warning{--btn-color:var(--color-warning)}.sm\:file-input-warning::file-selector-button{color:var(--color-warning-content)}.file-input-warning,.sm\:file-input-warning:focus,.sm\:file-input-warning:focus-within{--input-color:var(--color-warning)}.sm\:file-input-error{--btn-color:var(--color-error)}.sm\:file-input-error::file-selector-button{color:var(--color-error-content)}.file-input-error,.sm\:file-input-error:focus,.sm\:file-input-error:focus-within{--input-color:var(--color-error)}.sm\:file-input-xs{--size:calc(var(--size-field,.25rem) * 6);font-size:.6875rem;line-height:1rem}.sm\:file-input-xs::file-selector-button{font-size:.6875rem}.sm\:file-input-sm{--size:calc(var(--size-field,.25rem) * 8);font-size:.75rem;line-height:1.5rem}.sm\:file-input-sm::file-selector-button{font-size:.75rem}.sm\:file-input-md{--size:calc(var(--size-field,.25rem) * 10);font-size:.875rem;line-height:2}.sm\:file-input-md::file-selector-button{font-size:.875rem}.sm\:file-input-lg{--size:calc(var(--size-field,.25rem) * 12);font-size:1.125rem;line-height:2.5rem}.sm\:file-input-lg::file-selector-button{font-size:1.125rem}.sm\:file-input-xl{--size:calc(var(--size-field,.25rem) * 14);padding-inline-end:1.5rem;font-size:1.125rem;line-height:3rem}.sm\:file-input-xl::file-selector-button{font-size:1.375rem}}}@media (width>=768px){@layer daisyui.l1.l2.l3{.md\:file-input{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}.md\:file-input::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}.md\:file-input: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}.md\:file-input:has(>input[disabled]),.md\:file-input: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}}}@layer daisyui.l1.l2{.md\:file-input-ghost{box-shadow:none;background-color:#0000;border-color:#0000;transition:background-color .2s}.md\:file-input-ghost::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}.md\:file-input-ghost:focus,.md\:file-input-ghost:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}.md\:file-input-neutral{--btn-color:var(--color-neutral)}.md\:file-input-neutral::file-selector-button{color:var(--color-neutral-content)}.file-input-neutral,.md\:file-input-neutral:focus,.md\:file-input-neutral:focus-within{--input-color:var(--color-neutral)}.md\:file-input-primary{--btn-color:var(--color-primary)}.md\:file-input-primary::file-selector-button{color:var(--color-primary-content)}.file-input-primary,.md\:file-input-primary:focus,.md\:file-input-primary:focus-within{--input-color:var(--color-primary)}.md\:file-input-secondary{--btn-color:var(--color-secondary)}.md\:file-input-secondary::file-selector-button{color:var(--color-secondary-content)}.file-input-secondary,.md\:file-input-secondary:focus,.md\:file-input-secondary:focus-within{--input-color:var(--color-secondary)}.md\:file-input-accent{--btn-color:var(--color-accent)}.md\:file-input-accent::file-selector-button{color:var(--color-accent-content)}.file-input-accent,.md\:file-input-accent:focus,.md\:file-input-accent:focus-within{--input-color:var(--color-accent)}.md\:file-input-info{--btn-color:var(--color-info)}.md\:file-input-info::file-selector-button{color:var(--color-info-content)}.file-input-info,.md\:file-input-info:focus,.md\:file-input-info:focus-within{--input-color:var(--color-info)}.md\:file-input-success{--btn-color:var(--color-success)}.md\:file-input-success::file-selector-button{color:var(--color-success-content)}.file-input-success,.md\:file-input-success:focus,.md\:file-input-success:focus-within{--input-color:var(--color-success)}.md\:file-input-warning{--btn-color:var(--color-warning)}.md\:file-input-warning::file-selector-button{color:var(--color-warning-content)}.file-input-warning,.md\:file-input-warning:focus,.md\:file-input-warning:focus-within{--input-color:var(--color-warning)}.md\:file-input-error{--btn-color:var(--color-error)}.md\:file-input-error::file-selector-button{color:var(--color-error-content)}.file-input-error,.md\:file-input-error:focus,.md\:file-input-error:focus-within{--input-color:var(--color-error)}.md\:file-input-xs{--size:calc(var(--size-field,.25rem) * 6);font-size:.6875rem;line-height:1rem}.md\:file-input-xs::file-selector-button{font-size:.6875rem}.md\:file-input-sm{--size:calc(var(--size-field,.25rem) * 8);font-size:.75rem;line-height:1.5rem}.md\:file-input-sm::file-selector-button{font-size:.75rem}.md\:file-input-md{--size:calc(var(--size-field,.25rem) * 10);font-size:.875rem;line-height:2}.md\:file-input-md::file-selector-button{font-size:.875rem}.md\:file-input-lg{--size:calc(var(--size-field,.25rem) * 12);font-size:1.125rem;line-height:2.5rem}.md\:file-input-lg::file-selector-button{font-size:1.125rem}.md\:file-input-xl{--size:calc(var(--size-field,.25rem) * 14);padding-inline-end:1.5rem;font-size:1.125rem;line-height:3rem}.md\:file-input-xl::file-selector-button{font-size:1.375rem}}}@media (width>=1024px){@layer daisyui.l1.l2.l3{.lg\:file-input{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}.lg\:file-input::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}.lg\:file-input: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}.lg\:file-input:has(>input[disabled]),.lg\:file-input: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}}}@layer daisyui.l1.l2{.lg\:file-input-ghost{box-shadow:none;background-color:#0000;border-color:#0000;transition:background-color .2s}.lg\:file-input-ghost::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}.lg\:file-input-ghost:focus,.lg\:file-input-ghost:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}.lg\:file-input-neutral{--btn-color:var(--color-neutral)}.lg\:file-input-neutral::file-selector-button{color:var(--color-neutral-content)}.file-input-neutral,.lg\:file-input-neutral:focus,.lg\:file-input-neutral:focus-within{--input-color:var(--color-neutral)}.lg\:file-input-primary{--btn-color:var(--color-primary)}.lg\:file-input-primary::file-selector-button{color:var(--color-primary-content)}.file-input-primary,.lg\:file-input-primary:focus,.lg\:file-input-primary:focus-within{--input-color:var(--color-primary)}.lg\:file-input-secondary{--btn-color:var(--color-secondary)}.lg\:file-input-secondary::file-selector-button{color:var(--color-secondary-content)}.file-input-secondary,.lg\:file-input-secondary:focus,.lg\:file-input-secondary:focus-within{--input-color:var(--color-secondary)}.lg\:file-input-accent{--btn-color:var(--color-accent)}.lg\:file-input-accent::file-selector-button{color:var(--color-accent-content)}.file-input-accent,.lg\:file-input-accent:focus,.lg\:file-input-accent:focus-within{--input-color:var(--color-accent)}.lg\:file-input-info{--btn-color:var(--color-info)}.lg\:file-input-info::file-selector-button{color:var(--color-info-content)}.file-input-info,.lg\:file-input-info:focus,.lg\:file-input-info:focus-within{--input-color:var(--color-info)}.lg\:file-input-success{--btn-color:var(--color-success)}.lg\:file-input-success::file-selector-button{color:var(--color-success-content)}.file-input-success,.lg\:file-input-success:focus,.lg\:file-input-success:focus-within{--input-color:var(--color-success)}.lg\:file-input-warning{--btn-color:var(--color-warning)}.lg\:file-input-warning::file-selector-button{color:var(--color-warning-content)}.file-input-warning,.lg\:file-input-warning:focus,.lg\:file-input-warning:focus-within{--input-color:var(--color-warning)}.lg\:file-input-error{--btn-color:var(--color-error)}.lg\:file-input-error::file-selector-button{color:var(--color-error-content)}.file-input-error,.lg\:file-input-error:focus,.lg\:file-input-error:focus-within{--input-color:var(--color-error)}.lg\:file-input-xs{--size:calc(var(--size-field,.25rem) * 6);font-size:.6875rem;line-height:1rem}.lg\:file-input-xs::file-selector-button{font-size:.6875rem}.lg\:file-input-sm{--size:calc(var(--size-field,.25rem) * 8);font-size:.75rem;line-height:1.5rem}.lg\:file-input-sm::file-selector-button{font-size:.75rem}.lg\:file-input-md{--size:calc(var(--size-field,.25rem) * 10);font-size:.875rem;line-height:2}.lg\:file-input-md::file-selector-button{font-size:.875rem}.lg\:file-input-lg{--size:calc(var(--size-field,.25rem) * 12);font-size:1.125rem;line-height:2.5rem}.lg\:file-input-lg::file-selector-button{font-size:1.125rem}.lg\:file-input-xl{--size:calc(var(--size-field,.25rem) * 14);padding-inline-end:1.5rem;font-size:1.125rem;line-height:3rem}.lg\:file-input-xl::file-selector-button{font-size:1.375rem}}}@media (width>=1280px){@layer daisyui.l1.l2.l3{.xl\:file-input{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}.xl\:file-input::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}.xl\:file-input: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}.xl\:file-input:has(>input[disabled]),.xl\:file-input: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}}}@layer daisyui.l1.l2{.xl\:file-input-ghost{box-shadow:none;background-color:#0000;border-color:#0000;transition:background-color .2s}.xl\:file-input-ghost::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}.xl\:file-input-ghost:focus,.xl\:file-input-ghost:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}.xl\:file-input-neutral{--btn-color:var(--color-neutral)}.xl\:file-input-neutral::file-selector-button{color:var(--color-neutral-content)}.file-input-neutral,.xl\:file-input-neutral:focus,.xl\:file-input-neutral:focus-within{--input-color:var(--color-neutral)}.xl\:file-input-primary{--btn-color:var(--color-primary)}.xl\:file-input-primary::file-selector-button{color:var(--color-primary-content)}.file-input-primary,.xl\:file-input-primary:focus,.xl\:file-input-primary:focus-within{--input-color:var(--color-primary)}.xl\:file-input-secondary{--btn-color:var(--color-secondary)}.xl\:file-input-secondary::file-selector-button{color:var(--color-secondary-content)}.file-input-secondary,.xl\:file-input-secondary:focus,.xl\:file-input-secondary:focus-within{--input-color:var(--color-secondary)}.xl\:file-input-accent{--btn-color:var(--color-accent)}.xl\:file-input-accent::file-selector-button{color:var(--color-accent-content)}.file-input-accent,.xl\:file-input-accent:focus,.xl\:file-input-accent:focus-within{--input-color:var(--color-accent)}.xl\:file-input-info{--btn-color:var(--color-info)}.xl\:file-input-info::file-selector-button{color:var(--color-info-content)}.file-input-info,.xl\:file-input-info:focus,.xl\:file-input-info:focus-within{--input-color:var(--color-info)}.xl\:file-input-success{--btn-color:var(--color-success)}.xl\:file-input-success::file-selector-button{color:var(--color-success-content)}.file-input-success,.xl\:file-input-success:focus,.xl\:file-input-success:focus-within{--input-color:var(--color-success)}.xl\:file-input-warning{--btn-color:var(--color-warning)}.xl\:file-input-warning::file-selector-button{color:var(--color-warning-content)}.file-input-warning,.xl\:file-input-warning:focus,.xl\:file-input-warning:focus-within{--input-color:var(--color-warning)}.xl\:file-input-error{--btn-color:var(--color-error)}.xl\:file-input-error::file-selector-button{color:var(--color-error-content)}.file-input-error,.xl\:file-input-error:focus,.xl\:file-input-error:focus-within{--input-color:var(--color-error)}.xl\:file-input-xs{--size:calc(var(--size-field,.25rem) * 6);font-size:.6875rem;line-height:1rem}.xl\:file-input-xs::file-selector-button{font-size:.6875rem}.xl\:file-input-sm{--size:calc(var(--size-field,.25rem) * 8);font-size:.75rem;line-height:1.5rem}.xl\:file-input-sm::file-selector-button{font-size:.75rem}.xl\:file-input-md{--size:calc(var(--size-field,.25rem) * 10);font-size:.875rem;line-height:2}.xl\:file-input-md::file-selector-button{font-size:.875rem}.xl\:file-input-lg{--size:calc(var(--size-field,.25rem) * 12);font-size:1.125rem;line-height:2.5rem}.xl\:file-input-lg::file-selector-button{font-size:1.125rem}.xl\:file-input-xl{--size:calc(var(--size-field,.25rem) * 14);padding-inline-end:1.5rem;font-size:1.125rem;line-height:3rem}.xl\:file-input-xl::file-selector-button{font-size:1.375rem}}}@media (width>=1536px){@layer daisyui.l1.l2.l3{.\32 xl\:file-input{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}.\32 xl\:file-input::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}.\32 xl\:file-input: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}.\32 xl\:file-input:has(>input[disabled]),.\32 xl\:file-input: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}}}@layer daisyui.l1.l2{.\32 xl\:file-input-ghost{box-shadow:none;background-color:#0000;border-color:#0000;transition:background-color .2s}.\32 xl\:file-input-ghost::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}.\32 xl\:file-input-ghost:focus,.\32 xl\:file-input-ghost:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}.\32 xl\:file-input-neutral{--btn-color:var(--color-neutral)}.\32 xl\:file-input-neutral::file-selector-button{color:var(--color-neutral-content)}.file-input-neutral,.\32 xl\:file-input-neutral:focus,.\32 xl\:file-input-neutral:focus-within{--input-color:var(--color-neutral)}.\32 xl\:file-input-primary{--btn-color:var(--color-primary)}.\32 xl\:file-input-primary::file-selector-button{color:var(--color-primary-content)}.file-input-primary,.\32 xl\:file-input-primary:focus,.\32 xl\:file-input-primary:focus-within{--input-color:var(--color-primary)}.\32 xl\:file-input-secondary{--btn-color:var(--color-secondary)}.\32 xl\:file-input-secondary::file-selector-button{color:var(--color-secondary-content)}.file-input-secondary,.\32 xl\:file-input-secondary:focus,.\32 xl\:file-input-secondary:focus-within{--input-color:var(--color-secondary)}.\32 xl\:file-input-accent{--btn-color:var(--color-accent)}.\32 xl\:file-input-accent::file-selector-button{color:var(--color-accent-content)}.file-input-accent,.\32 xl\:file-input-accent:focus,.\32 xl\:file-input-accent:focus-within{--input-color:var(--color-accent)}.\32 xl\:file-input-info{--btn-color:var(--color-info)}.\32 xl\:file-input-info::file-selector-button{color:var(--color-info-content)}.file-input-info,.\32 xl\:file-input-info:focus,.\32 xl\:file-input-info:focus-within{--input-color:var(--color-info)}.\32 xl\:file-input-success{--btn-color:var(--color-success)}.\32 xl\:file-input-success::file-selector-button{color:var(--color-success-content)}.file-input-success,.\32 xl\:file-input-success:focus,.\32 xl\:file-input-success:focus-within{--input-color:var(--color-success)}.\32 xl\:file-input-warning{--btn-color:var(--color-warning)}.\32 xl\:file-input-warning::file-selector-button{color:var(--color-warning-content)}.file-input-warning,.\32 xl\:file-input-warning:focus,.\32 xl\:file-input-warning:focus-within{--input-color:var(--color-warning)}.\32 xl\:file-input-error{--btn-color:var(--color-error)}.\32 xl\:file-input-error::file-selector-button{color:var(--color-error-content)}.file-input-error,.\32 xl\:file-input-error:focus,.\32 xl\:file-input-error:focus-within{--input-color:var(--color-error)}.\32 xl\:file-input-xs{--size:calc(var(--size-field,.25rem) * 6);font-size:.6875rem;line-height:1rem}.\32 xl\:file-input-xs::file-selector-button{font-size:.6875rem}.\32 xl\:file-input-sm{--size:calc(var(--size-field,.25rem) * 8);font-size:.75rem;line-height:1.5rem}.\32 xl\:file-input-sm::file-selector-button{font-size:.75rem}.\32 xl\:file-input-md{--size:calc(var(--size-field,.25rem) * 10);font-size:.875rem;line-height:2}.\32 xl\:file-input-md::file-selector-button{font-size:.875rem}.\32 xl\:file-input-lg{--size:calc(var(--size-field,.25rem) * 12);font-size:1.125rem;line-height:2.5rem}.\32 xl\:file-input-lg::file-selector-button{font-size:1.125rem}.\32 xl\:file-input-xl{--size:calc(var(--size-field,.25rem) * 14);padding-inline-end:1.5rem;font-size:1.125rem;line-height:3rem}.\32 xl\:file-input-xl::file-selector-button{font-size:1.375rem}}}}