/*
 * THE TILE'S BOX — the size, the overlays and the corner mark. Its side is a
 * datum, arriving as `--lotics-file-thumbnail-size`, and the aspect ratio does the
 * rest: one declaration for the fixed and the filling case.
 *
 * Press feedback on the picture is a scrim ON TOP, never a ground behind it — a
 * background wash under a photograph is invisible.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-file-thumbnail {
    position: relative;
    display: block;
    /* A tile in a row is an identity mark: it holds its size rather than
       squashing. */
    flex-shrink: 0;
    width: var(--lotics-file-thumbnail-size, 100%);
    aspect-ratio: 1;
  }

  /* The BODY carries the removed-fade, never the root: `opacity` cascades to the
     whole subtree, so on the root it would dim the corner mark too — at exactly
     the moment the mark has the most to say. */
  .lotics-file-thumbnail__body {
    display: block;
    width: 100%;
    height: 100%;
  }

  .lotics-file-thumbnail[data-diff="removed"] .lotics-file-thumbnail__body {
    opacity: 0.45;
  }

  /* A BADGE IS NOT SQUARE and the slot is: the compact face is 26 × 32, so
     left-aligned it leaves dead edge on one side. Centred on both axes a mixed
     strip keeps one beat and one baseline. */
  .lotics-file-thumbnail[data-compact] .lotics-file-thumbnail__body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  /* THE IMAGE TILE — the picture is the content, so the press feedback is a
     scrim over it rather than a ground behind it. */
  .lotics-file-thumbnail__image {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0 solid var(--border);
    border-radius: var(--lotics-radius-control);
    background: transparent;
    overflow: hidden;
    appearance: none;
    cursor: default;
  }

  .lotics-file-thumbnail__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: transparent;
    pointer-events: none;
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-file-thumbnail__image:hover::after {
    background-color: var(--lotics-scrim-hover);
  }

  .lotics-file-thumbnail__image:active::after {
    background-color: var(--lotics-scrim-press);
  }

  .lotics-file-thumbnail__image:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  .lotics-file-thumbnail__picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* THE SCRIM WHILE THE BYTES ARE STILL GOING UP, dark enough that a white word
     and an elevated control stay legible over whatever picture is underneath.
     `pointer-events: none` so the remove control stays clickable, while the STACK
     takes them back wherever it holds a control. */
  .lotics-file-thumbnail__uploading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--lotics-space-8);
    border-radius: var(--lotics-radius-control);
    background-color: var(--lotics-scrim-strong);
    pointer-events: none;
    --lotics-icon-color: var(--lotics-white);
  }

  /* The at-a-glance "this didn't work" signal. */
  .lotics-file-thumbnail__uploading[data-tone="error"] {
    background-color: var(--lotics-scrim-danger);
  }

  .lotics-file-thumbnail__uploading[data-interactive] .lotics-file-thumbnail__stack {
    pointer-events: auto;
  }

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

  .lotics-file-thumbnail__label {
    text-align: center;
  }

  .lotics-file-thumbnail__remove {
    position: absolute;
    top: calc(var(--lotics-space-8) * -1);
    right: calc(var(--lotics-space-8) * -1);
    z-index: var(--lotics-z-row-content);
  }

  .lotics-file-thumbnail__selection {
    position: absolute;
    inset: 0;
    border-radius: var(--lotics-radius-control);
    z-index: var(--lotics-z-row-content);
    pointer-events: none;
  }

  .lotics-file-thumbnail__selection[data-selected] {
    background-color: color-mix(in srgb, var(--lotics-shadow-color) 15%, transparent);
  }

  .lotics-file-thumbnail__check {
    position: absolute;
    bottom: var(--lotics-space-4);
    right: var(--lotics-space-4);
  }

  /* A TILE THAT PRINTS ITS FILENAME has no free corner along the bottom, and the
     top two are spoken for (remove top-right, the diff disc top-left), so the
     glyph moves to the middle of the right edge. Centred by spanning the tile, so
     the rule states an edge rather than a percentage off the scale. */
  .lotics-file-thumbnail__check[data-shape="document"],
  .lotics-file-thumbnail__check[data-shape="media"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    top: 0;
    bottom: 0;
  }

  /* The tile's diff disc rides a white RING: a tile's ground is an arbitrary
     photograph, and a pale tint over a pale scan is a smudge, not a mark. */
  .lotics-file-thumbnail__mark {
    position: absolute;
    top: var(--lotics-space-4);
    left: var(--lotics-space-4);
    z-index: var(--lotics-z-sticky-column);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--lotics-space-2);
    border-radius: var(--lotics-radius-full);
    background-color: var(--lotics-white);
    pointer-events: none;
  }
}