/*
 * The DOCUMENT TILE: a white card with the type badge centred over the filename.
 * It washes its OWN ground on hover — a card is a surface, unlike an image tile,
 * where the feedback has to be a scrim on top.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-document-card {
    /* THE TILE MEASURES ITSELF: how many lines its name may take is a question
       about the TILE's width, never the window's. Safe to contain, because that
       width is the size it is given or the cell it fills — never its contents. */
    container: lotics-document-card / inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--lotics-document-card-size, 100%);
    height: var(--lotics-document-card-size, 100%);
    gap: var(--lotics-space-8);
    padding-inline: var(--lotics-space-8);
    padding-block: var(--lotics-space-10);
    border: 1px solid var(--border);
    border-radius: var(--lotics-radius-control);
    background-color: var(--card);
    overflow: hidden;
    appearance: none;
    cursor: default;
  }

  /* THE WASH LAYERS OVER THE GROUND rather than replacing it (`button.css`'s
     idiom): an opaque hover on a `--card` ground turns near-white in a dark
     theme. */
  .lotics-document-card:hover {
    background-image: linear-gradient(0deg, var(--lotics-wash-hover), var(--lotics-wash-hover));
  }

  .lotics-document-card:active {
    background-image: linear-gradient(0deg, var(--lotics-wash-selected), var(--lotics-wash-selected));
  }

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

  /*
   * THE NAME TAKES THE LINES THE TILE AFFORDS, and the TILE states how many — at
   * one line a 30-character filename loses its own extension.
   *
   * THE ROOM IS ARITHMETIC: 20px of padding and an 8px gap, then the badge at 40%
   * of the tile up to its 60px ceiling, and what is left is the name's at 18px an
   * `xs` line. So 88px holds one line, 120 two, 150 three. A clamp is a CEILING
   * and not a reservation, so no tile grows.
   */
  .lotics-document-card__name {
    align-self: stretch;
    text-align: center;
    --lotics-text-lines: 1;
  }

  @container lotics-document-card (width >= 120px) {
    .lotics-document-card__name {
      --lotics-text-lines: 2;
    }
  }

  @container lotics-document-card (width >= 150px) {
    .lotics-document-card__name {
      --lotics-text-lines: 3;
    }
  }
}