/*
 * The DOCUMENT TILE: a white card with the type badge centred over the filename. A surface, so it
 * washes its own ground on hover.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-document-card {
    /*
     * Its line count depends on its own width; safe to contain, since that width is given, never
     * content-sized.
     */
    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;
  }

  /* Over the ground, so a dark theme's `--card` does not turn near-white (`button.css`'s idiom). */
  .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;
  }

  /*
   * At one line a long filename loses its extension. The room is arithmetic (padding, gap, a badge
   * at 40% up to 60px), so 88px holds one line, 120 two, 150 three. A clamp is a ceiling, 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;
    }
  }
}