dees-catalog/ts_web/elements/dees-pdf-preview/styles.ts

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

export const previewStyles = [
  cssManager.defaultStyles,
  css`
    :host {
      display: inline-block;
      position: relative;
    }

    .preview-container {
      position: relative;
      width: 200px;
      height: 260px;
      background: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(215 20% 14%)')};
      border-radius: 4px;
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 1px 3px ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(0, 0, 0, 0.24)')};
    }

    .preview-container.clickable {
      cursor: pointer;
    }

    .preview-container.clickable:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(0, 0, 0, 0.3)')};
    }

    .preview-container.clickable:hover .preview-overlay {
      opacity: 1;
    }

    .preview-stack {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      overflow: hidden;
    }

    .preview-stack.non-a4 {
      padding: 12px;
    }

    .preview-canvas {
      position: relative;
      background: white;
      display: block;
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      image-rendering: auto;
      -webkit-font-smoothing: antialiased;
      box-shadow: 0 1px 3px ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.3)')};
    }

    .non-a4 .preview-canvas {
      border: 1px solid ${cssManager.bdTheme('hsl(214 31% 92%)', 'hsl(217 25% 24%)')};
      border-radius: 4px;
    }

    .preview-info {
      position: absolute;
      bottom: 8px;
      left: 8px;
      right: 8px;
      padding: 6px 10px;
      background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.92)', 'hsl(215 20% 12% / 0.92)')};
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
      backdrop-filter: blur(12px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      z-index: 10;
    }

    .preview-info dees-icon {
      font-size: 13px;
      color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
    }

    .preview-pages {
      font-weight: 500;
      font-size: 11px;
    }

    .preview-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(0, 0, 0, 0.8)')};
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      opacity: 0;
      transition: opacity 0.2s ease;
      z-index: 20;
    }

    .preview-overlay dees-icon {
      font-size: 24px;
      color: white;
    }

    .preview-overlay span {
      font-size: 14px;
      font-weight: 500;
      color: white;
    }

    .preview-loading,
    .preview-error {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
    }

    .preview-loading {
      background: ${cssManager.bdTheme('hsl(0 0% 99%)', 'hsl(215 20% 14%)')};
    }

    .preview-error {
      background: ${cssManager.bdTheme('hsl(0 72% 98%)', 'hsl(0 62% 20%)')};
      color: ${cssManager.bdTheme('hsl(0 72% 40%)', 'hsl(0 70% 68%)')};
    }

    .preview-spinner {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid ${cssManager.bdTheme('hsl(214 31% 86%)', 'hsl(217 25% 28%)')};
      border-top-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .preview-text {
      font-size: 13px;
      font-weight: 500;
    }

    .preview-error dees-icon {
      font-size: 32px;
    }

    .preview-page-indicator {
      position: absolute;
      top: 8px;
      left: 8px;
      right: 8px;
      padding: 5px 8px;
      background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.7)', 'hsl(0 0% 100% / 0.9)')};
      color: ${cssManager.bdTheme('white', 'hsl(215 20% 12%)')};
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      text-align: center;
      backdrop-filter: blur(12px);
      z-index: 15;
      pointer-events: none;
      animation: fadeIn 0.2s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-4px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Responsive sizes */
    :host([size="small"]) .preview-container {
      width: 150px;
      height: 195px;
    }

    :host([size="large"]) .preview-container {
      width: 250px;
      height: 325px;
    }

    /* Grid optimizations */
    :host([grid-mode]) .preview-container {
      will-change: auto;
    }

    :host([grid-mode]) .preview-canvas {
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
    }
  `,
];