/*
 * ONE BOX, seven contents. `data-kind` says which engine is drawing, and every
 * branch fills the caller's frame rather than carrying a size.
 *
 * The parts are the same three wherever they exist: the `scroll` port, the `body`
 * inside it, and the `overlay` that says loading or failed. A video, an image and
 * a spreadsheet need none of them — the engine IS the content.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-file-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    min-height: 0;
  }

  /* A photograph is read against a dark ground, not against the page. */
  .lotics-file-preview[data-kind="image"] {
    background-color: var(--lotics-scrim-viewer);
  }

  .lotics-file-preview[data-kind="pdf"],
  .lotics-file-preview[data-kind="document"] {
    background-color: var(--muted);
  }

  .lotics-file-preview[data-kind="audio"],
  .lotics-file-preview[data-kind="none"] {
    align-items: center;
    justify-content: center;
  }

  .lotics-file-preview[data-kind="audio"] {
    gap: var(--lotics-space-24);
    padding: var(--lotics-space-48);
  }

  /* The empty state's glyph and its caption are further apart than a preview's
     rows: nothing here is a list, so the pair reads as one block. */
  .lotics-file-preview[data-kind="none"] {
    gap: var(--lotics-space-24);
  }

  .lotics-file-preview__scroll {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .lotics-file-preview__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lotics-space-16);
    padding: var(--lotics-space-16);
  }

  /* A Word page is a FIXED WIDTH the engine decides, so the scroller offers both
     axes; a PDF page is fitted to the port, so it does not. */
  .lotics-file-preview[data-kind="document"] .lotics-file-preview__scroll {
    overflow: auto;
  }

  /* A Word document is one flowing column the engine sizes itself — no centring
     and no gutter, or its pagination lands off its own page. */
  .lotics-file-preview[data-kind="document"] .lotics-file-preview__body {
    display: block;
    min-height: 100%;
    gap: 0;
    padding: 0;
  }

  /* An audio file has nothing to look at, so the transport is bounded rather
     than stretched across the whole frame. */
  .lotics-file-preview[data-kind="audio"] .lotics-file-preview__body {
    width: min(480px, 100%);
    gap: 0;
    padding: 0;
  }

  .lotics-file-preview__body[hidden] {
    display: none;
  }

  .lotics-file-preview__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--lotics-space-12);
    pointer-events: none;
  }

  /* The overlay never takes the pointer, but the download it offers must. */
  .lotics-file-preview__overlay[data-interactive] {
    pointer-events: auto;
  }

  /* ONE PAGE of a PDF — created by the render loop rather than by JSX, so it is
     classed rather than styled inline. */
  .lotics-file-preview__page {
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-8));
    background-color: var(--lotics-white);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--lotics-shadow-color) 18%, transparent);
  }
}