dees-catalog/ts_web/elements/dees-input-fileupload/styles.ts

import { css, cssManager } from '@design.estate/dees-element';
import { DeesInputBase } from '../dees-input-base.js';

export const fileuploadStyles = [
  cssManager.defaultStyles,
  ...DeesInputBase.baseStyles,
  css`
    :host {
      position: relative;
      display: block;
    }


    .input-wrapper {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .dropzone {
      position: relative;
      padding: 20px;
      border-radius: 12px;
      border: 1.5px dashed ${cssManager.bdTheme('hsl(215 16% 80%)', 'hsl(217 20% 25%)')};
      background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 12%)')};
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
      cursor: pointer;
      outline: none;
    }

    .dropzone:focus-visible {
      box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 12%)')},
        0 0 0 4px ${cssManager.bdTheme('hsl(217 91% 60% / 0.5)', 'hsl(213 93% 68% / 0.4)')};
      border-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
    }

    .dropzone--active {
      border-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
      box-shadow: 0 12px 32px ${cssManager.bdTheme('rgba(15, 23, 42, 0.12)', 'rgba(0, 0, 0, 0.35)')};
      background: ${cssManager.bdTheme('hsl(217 91% 60% / 0.06)', 'hsl(213 93% 68% / 0.12)')};
    }

    .dropzone--has-files {
      background: ${cssManager.bdTheme('hsl(0 0% 99%)', 'hsl(215 20% 11%)')};
    }

    .dropzone--disabled {
      opacity: 0.6;
      pointer-events: none;
      cursor: not-allowed;
    }

    .dropzone__body {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .dropzone__icon {
      width: 48px;
      height: 48px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
      background: ${cssManager.bdTheme('hsl(217 91% 60% / 0.12)', 'hsl(213 93% 68% / 0.12)')};
      position: relative;
      flex-shrink: 0;
    }

    .dropzone__icon dees-icon {
      font-size: 22px;
    }

    .dropzone__loader {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      border: 2px solid ${cssManager.bdTheme('rgba(15, 23, 42, 0.15)', 'rgba(255, 255, 255, 0.15)')};
      border-top-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
      animation: loader-spin 0.6s linear infinite;
    }

    .dropzone__content {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .dropzone__headline {
      font-size: 15px;
      font-weight: 600;
      color: ${cssManager.bdTheme('hsl(222 47% 11%)', 'hsl(210 20% 96%)')};
    }

    .dropzone__subline {
      font-size: 13px;
      color: ${cssManager.bdTheme('hsl(215 16% 46%)', 'hsl(215 16% 70%)')};
    }

    .dropzone__browse {
      appearance: none;
      border: none;
      background: none;
      padding: 0;
      margin-left: 4px;
      color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
    }

    .dropzone__browse:hover {
      text-decoration: underline;
    }

    .dropzone__browse:disabled {
      cursor: not-allowed;
      opacity: 0.6;
    }

    .dropzone__meta {
      margin-top: 14px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 12px;
      color: ${cssManager.bdTheme('hsl(215 16% 50%)', 'hsl(215 16% 72%)')};
    }

    .dropzone__meta span {
      padding: 4px 10px;
      border-radius: 999px;
      background: ${cssManager.bdTheme('hsl(217 91% 95%)', 'hsl(213 93% 18%)')};
      border: 1px solid ${cssManager.bdTheme('hsl(217 91% 90%)', 'hsl(213 93% 24%)')};
    }

    .file-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid ${cssManager.bdTheme('hsl(217 91% 90%)', 'hsl(213 93% 24%)')};
    }

    .file-list__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 500;
      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 68%)')};
    }

    .file-list__clear {
      appearance: none;
      border: none;
      background: none;
      color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
      cursor: pointer;
      font-weight: 500;
      font-size: 13px;
      padding: 0;
    }

    .file-list__clear:hover {
      text-decoration: underline;
    }

    .file-list__items {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .file-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.5)', 'hsl(215 20% 16% / 0.5)')};
      border: 1px solid ${cssManager.bdTheme('hsl(213 27% 92%)', 'hsl(217 25% 26%)')};
      border-radius: 8px;
      transition: background 0.15s ease;
    }

    .file-row:hover {
      background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.8)', 'hsl(215 20% 16% / 0.8)')};
    }

    .file-thumb {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: ${cssManager.bdTheme('hsl(214 31% 92%)', 'hsl(217 32% 18%)')};
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
    }

    .file-thumb dees-icon {
      font-size: 18px;
      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 70%)')};
      display: block;
      width: 18px;
      height: 18px;
      line-height: 1;
      flex-shrink: 0;
    }


    .thumb-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .file-meta {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .file-name {
      font-weight: 600;
      font-size: 14px;
      color: ${cssManager.bdTheme('hsl(222 47% 11%)', 'hsl(210 20% 96%)')};
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .file-details {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      font-size: 12px;
      color: ${cssManager.bdTheme('hsl(215 16% 46%)', 'hsl(215 16% 70%)')};
    }

    .file-size {
      font-variant-numeric: tabular-nums;
    }

    .file-type {
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid ${cssManager.bdTheme('hsl(214 31% 86%)', 'hsl(217 32% 28%)')};
      color: ${cssManager.bdTheme('hsl(215 16% 46%)', 'hsl(215 16% 70%)')};
      text-transform: uppercase;
      letter-spacing: 0.08em;
      line-height: 1;
    }

    .file-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
    }

    .remove-button {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
      color: ${cssManager.bdTheme('hsl(215 16% 52%)', 'hsl(215 16% 68%)')};
    }

    .remove-button:hover {
      background: ${cssManager.bdTheme('hsl(0 72% 50% / 0.08)', 'hsl(0 62% 32% / 0.15)')};
      color: ${cssManager.bdTheme('hsl(0 72% 46%)', 'hsl(0 70% 70%)')};
    }

    .remove-button:active {
      transform: scale(0.96);
    }

    .remove-button dees-icon {
      display: block;
      width: 14px;
      height: 14px;
      font-size: 14px;
      line-height: 1;
      flex-shrink: 0;
    }

    .validation-message {
      font-size: 13px;
      color: ${cssManager.bdTheme('hsl(0 72% 40%)', 'hsl(0 70% 68%)')};
      line-height: 1.5;
    }

    @keyframes loader-spin {
      to {
        transform: rotate(360deg);
      }
    }
  `,
];