/*
 * ONE BOX, seven contents, by `data-kind`; every branch fills the caller's frame. The `scroll`,
 * `body` and `overlay` parts exist wherever an engine needs them.
 */
@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 reads against a dark ground. */
  .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);
  }

  /* Not a list, so glyph and caption read 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 has an engine-decided width, so both axes scroll; a PDF page fits the port. */
  .lotics-file-preview[data-kind="document"] .lotics-file-preview__scroll {
    overflow: auto;
  }

  /* No centring or gutter, or pagination lands off its page. */
  .lotics-file-preview[data-kind="document"] .lotics-file-preview__body {
    display: block;
    min-height: 100%;
    gap: 0;
    padding: 0;
  }

  /* Nothing to look at, so the transport is bounded. */
  .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 download inside must take the pointer. */
  .lotics-file-preview__overlay[data-interactive] {
    pointer-events: auto;
  }

  /* Created by the render loop, so classed rather than inline-styled. */
  .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);
  }
}