@layer design-system.components{.vds-file-upload{--vds-file-upload-gap:var(--vds-space-3,.75rem);--vds-file-upload-dropzone-border:2px dashed var(--vds-color-border-interactive,#6b7280);--vds-file-upload-dropzone-border-active:2px dashed var(--vds-color-primary-solid,#6366f1);--vds-file-upload-dropzone-border-reject:2px dashed var(--vds-color-danger-solid,#dc2626);--vds-file-upload-dropzone-bg:var(--vds-color-surface-sunken,#f9fafb);--vds-file-upload-dropzone-bg-active:var(--vds-color-primary-bg,#eef2ff);--vds-file-upload-dropzone-bg-reject:var(--vds-color-danger-bg,#fef2f2);--vds-file-upload-dropzone-radius:var(--vds-radius-file-upload-dropzone,.75rem);--vds-file-upload-dropzone-padding:var(--vds-space-6,1.5rem);--vds-file-upload-dropzone-color-muted:var(--vds-color-text-muted,#6b7280);--vds-file-upload-item-gap:var(--vds-space-3,.75rem);--vds-file-upload-item-padding-inline:var(--vds-space-3,.75rem);--vds-file-upload-item-padding-block:var(--vds-space-2,.5rem);--vds-file-upload-item-radius:var(--vds-radius-card,.75rem);--vds-file-upload-item-bg:var(--vds-surface-bg,var(--vds-color-surface,#fff));--vds-file-upload-item-border:1px solid var(--vds-color-border,#e5e7eb);--vds-file-upload-preview-size:2.5rem;--vds-file-upload-preview-radius:var(--vds-radius-file-upload-preview,.25rem);--vds-file-upload-remove-color:var(--vds-color-text-muted,#6b7280);--vds-file-upload-remove-color-hover:var(--vds-color-danger-solid,#dc2626);--vds-file-upload-remove-bg-hover:var(--vds-color-surface-hover,#f3f4f6);--vds-file-upload-remove-size:1.75rem;--vds-file-upload-remove-radius:var(--vds-radius-file-upload-remove,.25rem);--vds-file-upload-size-color:var(--vds-color-text-muted,#6b7280);--vds-file-upload-size-font-size:var(--vds-text-xs,.75rem);--vds-file-upload-focus-ring-width:var(--vds-focus-ring-width,2px);--vds-file-upload-focus-ring-color:var(--vds-color-ring,#6366f1);--vds-file-upload-transition-duration:.15s;--vds-file-upload-transition-easing:cubic-bezier(.4, 0, .2, 1);--vds-file-upload-input-border:1px solid var(--vds-color-border-interactive,#6b7280);--vds-file-upload-input-radius:var(--vds-radius-input,var(--vds-radius-element,.5rem));--vds-file-upload-input-bg:var(--vds-field-bg,var(--vds-color-surface,#fff));--vds-file-upload-input-font-size:var(--vds-text-sm,.875rem);--vds-file-upload-input-btn-bg:var(--vds-color-surface-sunken,#f9fafb);--vds-file-upload-input-btn-bg-hover:var(--vds-color-surface-hover,#f3f4f6);--vds-file-upload-input-btn-color:var(--vds-color-text,#111827);--vds-file-upload-input-btn-padding-inline:var(--vds-space-3,.75rem);--vds-file-upload-input-btn-padding-block:var(--vds-space-2,.5rem);--vds-file-upload-input-label-color:var(--vds-color-text-muted,#6b7280);--vds-file-upload-input-label-padding-inline:var(--vds-space-3,.75rem);gap:var(--vds-file-upload-gap);flex-direction:column;display:flex}.vds-file-upload-dropzone{justify-content:center;align-items:center;gap:var(--vds-space-2,.5rem);padding:var(--vds-file-upload-dropzone-padding);border:var(--vds-file-upload-dropzone-border);border-radius:var(--vds-file-upload-dropzone-radius);background-color:var(--vds-file-upload-dropzone-bg);color:var(--vds-file-upload-dropzone-color-muted);text-align:center;cursor:pointer;transition:background-color var(--vds-file-upload-transition-duration) var(--vds-file-upload-transition-easing), border-color var(--vds-file-upload-transition-duration) var(--vds-file-upload-transition-easing), box-shadow .18s ease-out;flex-direction:column;display:flex}@media (prefers-reduced-motion:reduce){.vds-file-upload-dropzone{transition-duration:0s}}.vds-file-upload-dropzone[data-drag-active]{border:var(--vds-file-upload-dropzone-border-active);background-color:var(--vds-file-upload-dropzone-bg-active)}.vds-file-upload-dropzone[data-drag-reject]{border:var(--vds-file-upload-dropzone-border-reject);background-color:var(--vds-file-upload-dropzone-bg-reject)}.vds-file-upload-dropzone[data-disabled]{opacity:var(--vds-opacity-disabled,.5);cursor:not-allowed}.vds-file-upload-dropzone:focus-visible{box-shadow:0 0 0 4px var(--vds-color-primary-a4), 0 0 12px 2px var(--vds-color-primary-a2);outline:none}@media (forced-colors:active){.vds-file-upload-dropzone:focus-visible{outline-offset:2px;box-shadow:none;outline:2px solid highlight}}.vds-file-upload-list{gap:var(--vds-space-2,.5rem);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.vds-file-upload-item{align-items:center;gap:var(--vds-file-upload-item-gap);padding-inline:var(--vds-file-upload-item-padding-inline);padding-block:var(--vds-file-upload-item-padding-block);background-color:var(--vds-file-upload-item-bg);border:var(--vds-file-upload-item-border);border-radius:var(--vds-file-upload-item-radius);min-inline-size:0;display:flex}.vds-file-upload-item-name{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-inline-size:0;overflow:hidden}.vds-file-upload-item-size{color:var(--vds-file-upload-size-color);font-size:var(--vds-file-upload-size-font-size);white-space:nowrap;flex-shrink:0}.vds-file-upload-item-progress{flex:0 0 6rem}.vds-file-upload-item-remove{all:unset;inline-size:var(--vds-file-upload-remove-size);block-size:var(--vds-file-upload-remove-size);border-radius:var(--vds-file-upload-remove-radius);color:var(--vds-file-upload-remove-color);cursor:pointer;transition:background-color var(--vds-file-upload-transition-duration) var(--vds-file-upload-transition-easing), color var(--vds-file-upload-transition-duration) var(--vds-file-upload-transition-easing), box-shadow .18s ease-out;flex-shrink:0;justify-content:center;align-items:center;margin-inline-start:auto;display:inline-flex}@media (prefers-reduced-motion:reduce){.vds-file-upload-item-remove{transition-duration:0s}}.vds-file-upload-item-remove:hover{color:var(--vds-file-upload-remove-color-hover);background-color:var(--vds-file-upload-remove-bg-hover)}.vds-file-upload-item-remove:focus-visible{box-shadow:0 0 0 4px var(--vds-color-primary-a4), 0 0 12px 2px var(--vds-color-primary-a2);outline:none}@media (forced-colors:active){.vds-file-upload-item-remove:focus-visible{outline-offset:2px;box-shadow:none;outline:2px solid highlight}}.vds-file-upload-input{border:var(--vds-file-upload-input-border);border-radius:var(--vds-file-upload-input-radius);background-color:var(--vds-file-upload-input-bg);cursor:pointer;inline-size:100%;transition:border-color var(--vds-file-upload-transition-duration) var(--vds-file-upload-transition-easing), box-shadow .18s ease-out;--vds-radius-host-r:var(--vds-file-upload-input-radius);--vds-radius-host-b:1px;--vds-radius-host-p:0px;align-items:stretch;display:inline-flex;position:relative}@media (prefers-reduced-motion:reduce){.vds-file-upload-input{transition-duration:0s}}.vds-file-upload-input[data-disabled]{opacity:var(--vds-opacity-disabled,.5);cursor:not-allowed;pointer-events:none}.vds-file-upload-input:focus-within{box-shadow:0 0 0 4px var(--vds-color-primary-a4), 0 0 12px 2px var(--vds-color-primary-a2);outline:none}@media (forced-colors:active){.vds-file-upload-input:focus-within{outline-offset:2px;box-shadow:none;outline:2px solid highlight}}.vds-file-upload-input-native{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.vds-file-upload-input-btn{padding-inline:var(--vds-file-upload-input-btn-padding-inline);padding-block:var(--vds-file-upload-input-btn-padding-block);background-color:var(--vds-file-upload-input-btn-bg);color:var(--vds-file-upload-input-btn-color);font-size:var(--vds-file-upload-input-font-size);border-inline-end:var(--vds-file-upload-input-border);white-space:nowrap;transition:background-color var(--vds-file-upload-transition-duration) var(--vds-file-upload-transition-easing);border-start-start-radius:var(--vds-radius-flush);border-end-start-radius:var(--vds-radius-flush);flex-shrink:0;align-items:center;display:inline-flex}.vds-file-upload-input:hover:not([data-disabled]) .vds-file-upload-input-btn{background-color:var(--vds-file-upload-input-btn-bg-hover)}.vds-file-upload-input-label{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;padding-inline:var(--vds-file-upload-input-label-padding-inline);font-size:var(--vds-file-upload-input-font-size);color:var(--vds-file-upload-input-label-color);flex:auto;align-self:center;overflow:hidden}.vds-file-upload-preview{inline-size:var(--vds-file-upload-preview-size);block-size:var(--vds-file-upload-preview-size);object-fit:cover;border-radius:var(--vds-file-upload-preview-radius);flex-shrink:0}}