/*
 * THE TILE'S BOX — size, overlays, corner mark. The side arrives as a property and the aspect ratio
 * does the rest. Press feedback is a scrim on top, since a 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;
    /* An identity mark holds its size. */
    flex-shrink: 0;
    width: var(--lotics-file-thumbnail-size, 100%);
    aspect-ratio: 1;
  }

  /* On the body: `opacity` cascades, and on the root it would dim the corner mark. */
  .lotics-file-thumbnail__body {
    display: block;
    width: 100%;
    height: 100%;
  }

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

  /* The 26 × 32 badge centred in the square keeps a mixed strip on one beat. */
  .lotics-file-thumbnail[data-compact] .lotics-file-thumbnail__body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  /* A scrim over the picture, not a ground behind. */
  .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;
  }

  /*
   * `inset: 0` + `margin: auto` centres without a transform that could drift. Its own scrim, since
   * the frame is arbitrary. Takes no pointers.
   */
  .lotics-file-thumbnail__play {
    position: absolute;
    inset: 0;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--lotics-file-thumbnail-play);
    height: var(--lotics-file-thumbnail-play);
    border-radius: var(--lotics-radius-full);
    background-color: var(--lotics-scrim-strong);
    pointer-events: none;
  }

  /*
   * Dark enough for white text over any picture; lets presses through except where the stack 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);
  }

  .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);
  }

  /* The file's ⋯, inside its corner, over the picture. */
  .lotics-file-thumbnail__acts {
    position: absolute;
    top: var(--lotics-space-4);
    right: var(--lotics-space-4);
    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 named tile's bottom is taken and the top corners are spoken for, so the glyph centres on the
   * right edge.
   */
  .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;
  }

  /* A white ring, since a pale tint over a pale scan is a smudge. */
  .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;
  }
}