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

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

export const viewerStyles = [
  cssManager.defaultStyles,
  css`
    :host {
      display: block;
      width: 100%;
      height: 600px;
      position: relative;
      font-family: 'Geist Sans', sans-serif;
    }

    .pdf-viewer {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(215 20% 10%)')};
    }

    .toolbar {
      height: 48px;
      background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 15%)')};
      border-bottom: 1px solid ${cssManager.bdTheme('hsl(214 31% 91%)', 'hsl(217 25% 22%)')};
      display: flex;
      align-items: center;
      padding: 0 16px;
      gap: 16px;
      flex-shrink: 0;
    }

    .toolbar-group {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .toolbar-group--end {
      margin-left: auto;
    }

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

    .toolbar-button:hover:not(:disabled) {
      background: ${cssManager.bdTheme('hsl(214 31% 92%)', 'hsl(217 25% 22%)')};
    }

    .toolbar-button:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .toolbar-button dees-icon {
      font-size: 16px;
    }

    .page-info {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 8px;
      font-size: 14px;
      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
    }

    .page-input {
      width: 48px;
      height: 28px;
      border-radius: 4px;
      border: 1px solid ${cssManager.bdTheme('hsl(214 31% 86%)', 'hsl(217 25% 28%)')};
      background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 12%)')};
      color: ${cssManager.bdTheme('hsl(222 47% 11%)', 'hsl(210 20% 96%)')};
      text-align: center;
      font-size: 14px;
      font-family: inherit;
      outline: none;
    }

    .page-input:focus {
      border-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
    }

    .page-separator {
      color: ${cssManager.bdTheme('hsl(215 16% 60%)', 'hsl(215 16% 50%)')};
    }

    .zoom-level {
      font-size: 13px;
      font-weight: 500;
      min-width: 48px;
      text-align: center;
    }

    .viewer-container {
      flex: 1;
      display: flex;
      overflow: hidden;
      position: relative;
    }

    .sidebar {
      width: 200px;
      background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 15%)')};
      border-right: 1px solid ${cssManager.bdTheme('hsl(214 31% 91%)', 'hsl(217 25% 22%)')};
      display: flex;
      flex-direction: column;
    }

    .sidebar-header {
      height: 40px;
      padding: 0 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid ${cssManager.bdTheme('hsl(214 31% 91%)', 'hsl(217 25% 22%)')};
      font-size: 13px;
      font-weight: 600;
      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
    }

    .sidebar-close {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
      transition: background 0.15s ease;
    }

    .sidebar-close:hover {
      background: ${cssManager.bdTheme('hsl(214 31% 92%)', 'hsl(217 25% 22%)')};
    }

    .sidebar-close dees-icon {
      font-size: 14px;
    }

    .sidebar-content {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .thumbnail {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      border: 2px solid transparent;
      transition: border-color 0.15s ease;
      background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 18%)')};
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100px;
    }

    .thumbnail:hover {
      border-color: ${cssManager.bdTheme('hsl(214 31% 86%)', 'hsl(217 25% 35%)')};
    }

    .thumbnail.active {
      border-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
    }

    .thumbnail-canvas {
      display: block;
      max-width: 100%;
      height: auto;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
    }

    .thumbnail-number {
      position: absolute;
      bottom: 4px;
      right: 4px;
      background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(0, 0, 0, 0.8)')};
      color: white;
      font-size: 11px;
      font-weight: 500;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .viewer-main {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: auto;
      padding: 20px;
    }

    .loading-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 75%)')};
    }

    .loading-spinner {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 3px 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);
      }
    }

    .loading-text {
      font-size: 14px;
      font-weight: 500;
    }

    .canvas-container {
      background: white;
      box-shadow: 0 2px 12px ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.3)')};
      border-radius: 4px;
      overflow: hidden;
      display: inline-block;
    }

    #pdf-canvas {
      display: block;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
    }

    .pdf-viewer.with-sidebar .viewer-main {
      margin-left: 0;
    }
  `,
];