/**
 * FileUploadTray Reference Stylesheet & Theming Guide
 *
 * <file-upload-tray> uses Shadow DOM encapsulation and supports:
 *   1. CSS Custom Properties (Variables) with light-dark() support
 *   2. CSS ::part() Pseudo-Element Selectors for deep styling
 */

file-upload-tray {
    /* Dimensions & Positioning */
    --tray-position-bottom: 1.25rem;
    --tray-position-right: 1.25rem;
    --tray-width: 24rem;
    --tray-minimized-width: 20rem;
    --tray-z-index: 9999;
    --tray-radius: 0.75rem;
    --tray-shadow: light-dark(0 10px 25px -5px rgba(28, 25, 23, 0.08), 0 12px 28px -4px rgba(0, 0, 0, 0.5));

    /* Backgrounds & Borders */
    --tray-bg: light-dark(#ffffff, #1a1a1e);
    --tray-border-color: light-dark(#e7e5e4, #27272e);
    --tray-body-bg: light-dark(#f5f5f4, #141416);
    --tray-body-max-height: 18rem;

    /* Header */
    --tray-header-bg: light-dark(#292524, #222228);
    --tray-header-text: light-dark(#ffffff, #f4f4f6);
    --tray-header-btn-border: light-dark(rgba(255, 255, 255, 0.25), #383842);
    --tray-header-btn-text: light-dark(#ffffff, #e2e2e5);
    --tray-header-btn-hover: light-dark(rgba(255, 255, 255, 0.15), #282830);

    /* Status Icons */
    --tray-icon-spinning-bg: light-dark(#2563eb, #60a5fa);
    --tray-icon-done-bg: light-dark(#065f46, #0d5c35);
    --tray-icon-color: #ffffff;

    /* Progress Bars */
    --tray-overall-progress-track: light-dark(#e7e5e4, #1f1f24);
    --tray-progress-fill: light-dark(linear-gradient(90deg, #2563eb, #60a5fa), linear-gradient(90deg, #2563eb, #60a5fa));
    --tray-item-progress-track: light-dark(#e7e5e4, #27272e);

    /* Items */
    --tray-item-bg: light-dark(#ffffff, #1a1a1e);
    --tray-item-border: light-dark(#f5f5f4, #1f1f24);
    --tray-item-title-color: light-dark(#292524, #e2e2e5);
    --tray-item-meta-color: light-dark(#57534e, #a1a1aa);
    --tray-item-btn-color: light-dark(#78716c, #71717a);
    --tray-item-btn-hover-color: light-dark(#991b1b, #fca5a5);
    --tray-item-btn-hover-bg: light-dark(#fef2f2, #360c0c);

    /* Status Text Colors */
    --tray-status-completed: light-dark(#065f46, #6ee7b7);
    --tray-status-failed: light-dark(#991b1b, #fca5a5);
    --tray-status-canceled: light-dark(#78716c, #71717a);
}

/* ::part() Selectors for Deep Customization */
file-upload-tray::part(tray) {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

file-upload-tray::part(header) {
    font-weight: 600;
}

file-upload-tray::part(title) {
    letter-spacing: -0.01em;
}

file-upload-tray::part(icon) {
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
}

file-upload-tray::part(action-btn) {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
}

file-upload-tray::part(toggle-btn) {
    font-size: 1.1rem;
}

file-upload-tray::part(overall-progress) {
    height: 5px;
}

file-upload-tray::part(progress-fill) {
    border-radius: 0 2px 2px 0;
}

file-upload-tray::part(body) {
    scrollbar-width: thin;
}

file-upload-tray::part(item) {
    transition: background 0.15s ease;
}

file-upload-tray::part(item):hover {
    filter: brightness(0.98);
}

file-upload-tray::part(item-filename) {
    font-family: ui-monospace, monospace;
}

file-upload-tray::part(item-meta) {
    font-variant-numeric: tabular-nums;
}

file-upload-tray::part(item-progress) {
    height: 3px;
}

file-upload-tray::part(item-progress-fill) {
    background: var(--brand-primary);
}

file-upload-tray::part(item-cancel-btn),
file-upload-tray::part(item-remove-btn) {
    font-weight: 700;
}