{"version":3,"file":"file-input.css.cjs","names":[],"sources":["../../../src/inputs/file-input/file-input.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_font-size: var(--file-input-font-size, var(--text-sm));\n    --_radius: var(--file-input-radius, var(--rounded-lg));\n    --_bg: var(--file-input-bg, var(--color-contrast-100));\n    --_border-color: var(--file-input-border-color, var(--color-contrast-300));\n    --_min-height: var(--file-input-min-height, var(--size-36));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .file-input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    width: 100%;\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label-outside {\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-none);\n    color: var(--color-contrast-500);\n    cursor: default;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* ========================================\n       Dropzone\n       ======================================== */\n\n  .dropzone {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: center;\n    min-height: var(--_min-height);\n    padding: var(--size-6) var(--size-4);\n    text-align: center;\n    cursor: pointer;\n    outline: none;\n    background: var(--_bg);\n    border: var(--border-2) dashed var(--_border-color);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  .dropzone-content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    pointer-events: none;\n  }\n\n  .dropzone-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n    transition:\n      color var(--transition-fast),\n      transform var(--transition-fast);\n  }\n\n  .dropzone-title {\n    font-size: var(--_font-size);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-snug);\n    color: var(--color-contrast-700);\n  }\n\n  .dropzone-title u {\n    color: var(--_theme-focus, var(--color-primary));\n    text-decoration: underline;\n    text-decoration-color: transparent;\n    text-underline-offset: 2px;\n    transition: text-decoration-color var(--transition-fast);\n  }\n\n  /* Signal 01: the copy itself during an active drag, not just the border/glow. */\n  .dropzone-title-active {\n    color: var(--_theme-focus, var(--color-primary));\n  }\n\n  .dropzone-hint {\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n  }\n\n  /* ========================================\n       Helper Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  /* ========================================\n       File List\n       ======================================== */\n\n  .file-list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .file-item {\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-3);\n    align-items: center;\n    padding: var(--size-2) var(--size-3);\n    background: var(--color-contrast-50);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n    transition: background var(--transition-fast);\n  }\n\n  .file-item:hover {\n    background: var(--color-contrast-100);\n  }\n\n  .file-icon {\n    flex-shrink: 0;\n    color: var(--_theme-focus, var(--color-primary));\n  }\n\n  .file-meta {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n  }\n\n  .file-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n    white-space: nowrap;\n  }\n\n  .file-size {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .file-actions {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-0-5);\n  }\n\n  .file-remove,\n  .file-action {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-1);\n    color: var(--color-contrast-400);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  .file-remove:hover {\n    color: var(--color-error);\n    background: var(--color-error-backdrop, color-mix(in oklch, var(--color-error) 12%, transparent));\n  }\n\n  /* Signal 03/04: retry and replace share one neutral-hover treatment — distinct from remove's\n     error-red hover so the destructive action doesn't blend in with the recovery ones. */\n  .file-action:hover {\n    color: var(--_theme-focus, var(--color-primary));\n    background: var(--_theme-backdrop, color-mix(in oklch, var(--color-primary) 12%, transparent));\n  }\n\n  /* ========================================\n       Upload Status (Signals 02, 03, 04)\n       ======================================== */\n\n  .file-progress-meta {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .file-error-text {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--color-error);\n    white-space: nowrap;\n  }\n\n  .file-item[data-status='success'] .file-icon {\n    color: var(--color-success);\n  }\n\n  .file-item[data-status='error'] .file-icon {\n    color: var(--color-error);\n  }\n\n  .file-item[data-status='error'] {\n    border-color: color-mix(in oklch, var(--color-error) 40%, var(--color-contrast-200));\n  }\n\n  /* ========================================\n       File Gallery (preview grid)\n       ======================================== */\n\n  .file-grid {\n    --_thumb-size: var(--file-input-thumb-size, var(--size-24));\n\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(var(--_thumb-size), 1fr));\n    gap: var(--size-2);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .file-card {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n  }\n\n  .file-thumb-frame {\n    position: relative;\n    display: block;\n  }\n\n  .file-thumb {\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    aspect-ratio: 1;\n    object-fit: cover;\n    background: var(--color-contrast-100);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n  }\n\n  .file-thumb-generic {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n  }\n\n  .file-card[data-status='uploading'] .file-thumb {\n    opacity: 0.6;\n  }\n\n  .file-card[data-status='error'] .file-thumb {\n    border-color: color-mix(in oklch, var(--color-error) 50%, var(--color-contrast-200));\n  }\n\n  .file-card-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    color: var(--color-contrast-600);\n    text-align: center;\n    white-space: nowrap;\n  }\n\n  /* Signal 04: a small badge over the thumbnail corner — an explicit success/error indicator\n     next to the visual proof itself, not just a caption line below it. */\n  .file-status-badge {\n    position: absolute;\n    top: var(--size-1);\n    left: var(--size-1);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n    color: var(--color-canvas);\n    border-radius: var(--rounded-full);\n  }\n\n  .file-status-badge-success {\n    background: var(--color-success);\n  }\n\n  .file-status-badge-error {\n    background: var(--color-error);\n  }\n\n  .file-card-actions {\n    position: absolute;\n    top: var(--size-1);\n    right: var(--size-1);\n    display: flex;\n    gap: var(--size-0-5);\n  }\n\n  .file-card-action {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n    padding: 0;\n    color: var(--color-contrast-50);\n    cursor: pointer;\n    background: color-mix(in oklch, var(--color-contrast-900) 55%, transparent);\n    border: none;\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .file-card-remove:hover {\n    color: var(--color-canvas);\n    background: var(--color-error);\n  }\n\n  .file-card-action:not(.file-card-remove):hover {\n    color: var(--color-canvas);\n    background: var(--color-primary);\n  }\n\n  .file-card .file-progress-meta,\n  .file-card .file-error-text {\n    text-align: center;\n    white-space: normal;\n  }\n\n  /* ========================================\n       Hover & Focus\n       ======================================== */\n\n  :host(:not([disabled])) .dropzone:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled])) .dropzone:hover .dropzone-title u {\n    text-decoration-color: var(--_theme-focus, var(--color-primary));\n  }\n\n  :host(:not([disabled])) .dropzone:focus-visible {\n    border-color: var(--_theme-focus, var(--color-primary));\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host(:not([disabled])) .dropzone:hover .dropzone-icon,\n  :host(:not([disabled])) .dropzone:focus-visible .dropzone-icon {\n    color: var(--_theme-focus, var(--color-primary));\n    transform: translateY(-1px);\n  }\n\n  /* ========================================\n       Drag-Over State\n       ======================================== */\n\n  :host([drag-over]) .dropzone {\n    background: color-mix(in oklch, var(--_theme-base, var(--color-primary)) 8%, transparent);\n    border-color: var(--_theme-focus, var(--color-primary));\n    border-style: solid;\n\n    /* A genuine glow (not the same subtle ring `:focus-visible` uses above) — a soft inner\n       ring plus a wider, brighter halo, so an active drag reads unmistakably differently from\n       a merely-focused, idle dropzone. */\n    box-shadow:\n      0 0 0 3px color-mix(in oklch, var(--_theme-focus, var(--color-primary)) 25%, transparent),\n      0 0 20px 2px color-mix(in oklch, var(--_theme-focus, var(--color-primary)) 45%, transparent);\n  }\n\n  :host([drag-over]) .dropzone .dropzone-icon {\n    color: var(--_theme-focus, var(--color-primary));\n    transform: translateY(-2px) scale(1.05);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\n  :host([invalid]) .dropzone {\n    border-color: var(--color-error);\n  }\n\n  :host([invalid]) .label-outside {\n    color: var(--color-error);\n  }\n\n  /* Signal 03: an in-field icon alongside the border shift — never color alone. */\n  .dropzone-icon[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Error Text\n       ======================================== */\n\n  .helper-text-error {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--file-input-bg, var(--color-contrast-50));\n    --_border-color: var(--file-input-border-color, var(--color-contrast-300));\n  }\n\n  /* Flat — a near-invisible border, deliberately weaker than bordered's\n     70%-focus border (matches button.css's flat/bordered split) so the two\n     don't read as the same box at a glance. */\n  :host([variant='flat']) {\n    --_bg: var(--file-input-bg, var(--color-contrast-100));\n    --_border-color: var(--file-input-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n  }\n\n  :host([variant='flat']) .dropzone:hover {\n    background: var(--file-input-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n    border-color: var(\n      --file-input-hover-border-color,\n      color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n    );\n  }\n\n  :host([variant='flat']) .dropzone:focus-visible,\n  :host([variant='flat'][drag-over]) .dropzone {\n    background: var(--file-input-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n    border-color: var(--file-input-focus-border-color, color-mix(in oklch, var(--_theme-focus) 60%, transparent));\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--file-input-bg, var(--_theme-backdrop));\n    --_border-color: var(--file-input-border-color, color-mix(in oklch, var(--_theme-focus) 70%, transparent));\n  }\n\n  :host([variant='bordered']) .dropzone:hover {\n    border-color: var(--file-input-hover-border-color, var(--_theme-focus));\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--file-input-bg, transparent);\n  }\n\n  /* Ghost */\n\n  /* Borderless at rest — only reveals a border on hover (the border-*width* stays reserved via\n     a transparent color, not `none`, so revealing it on hover never shifts layout). Focus\n     already gets its own themed border + glow from the generic `:focus-visible` rule above,\n     regardless of variant, so it needs no ghost-specific override here. */\n  :host([variant='ghost']) {\n    --_bg: var(--file-input-bg, transparent);\n    --_border-color: var(--file-input-border-color, transparent);\n  }\n\n  :host(:not([disabled])[variant='ghost']) .dropzone:hover {\n    background: var(--file-input-hover-bg, var(--color-contrast-100));\n    border-color: var(--file-input-hover-border-color, var(--color-contrast-200));\n  }\n}\n\n@layer refine.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n\n/* ========================================\n     Disabled State — intentionally unlayered\n     ======================================== */\n\n/*\n * The shared `disabledLoadingMixin` (pulled in via `fieldMixins`) dims `:host([disabled])`\n * with `opacity: 0.5` as bare, unlayered CSS. Cascade layers always lose to unlayered rules\n * regardless of source order or specificity, so overriding that from inside any `@layer`\n * block in this file (including `refine.overrides`) would be a no-op — this has to stay\n * unlayered too, to actually win. See `ore-input`'s `input.css` for the same pattern.\n *\n * Per the field-state UX review: opacity-based dimming reads as a washed-out/loading look\n * and can mimic reduced-contrast content for low-vision users, rather than a clearly locked\n * field. Swapped for an explicit grayscale surface + `not-allowed` cursor (the cursor already\n * comes from the shared mixin, left untouched here).\n */\n:host([disabled]) {\n  opacity: 1;\n}\n\n:host([disabled]) .dropzone {\n  background: var(--color-contrast-100);\n  border-color: var(--color-contrast-200);\n}\n\n:host([disabled]) .dropzone-icon,\n:host([disabled]) .dropzone-title,\n:host([disabled]) .dropzone-hint,\n:host([disabled]) .dropzone-title u {\n  color: var(--color-contrast-400);\n}\n\n:host([disabled]) .label-outside {\n  color: var(--color-contrast-400);\n}\n"],"mappings":""}