/*
 * A PARAMETRIC DRAWING: every measure is a rounded fraction of the width, computed as a custom
 * property (§5 rule 11), since a fractional 1.5px renders as a smear. A page prints its type at its
 * own size, decided by the component: a rung from the ramp's floor up, a small label under it, and
 * none on a page too small for letters, whose band is its type's colour alone.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-file-badge {
    --lotics-file-badge-tracking: 0.3px;
    --lotics-file-badge-stamp-tracking: 0.2px;
    /* Translucent over the shadow token, so a theme moves both. */
    --lotics-file-badge-hairline: color-mix(in srgb, var(--lotics-shadow-color) 8%, transparent);
  }

  /* THE PAGE — the root, or the part a tile holds. */
  .lotics-file-badge:not([data-tile]),
  .lotics-file-badge__page {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    width: var(--lotics-file-badge-w);
    height: var(--lotics-file-badge-h);
    border-radius: var(--lotics-file-badge-radius);
    overflow: hidden;
    box-shadow: 0 1px 3px var(--lotics-file-badge-hairline);
  }

  /*
   * The drawing is the button, so UA chrome comes off. A file's face is content, so no pointer
   * change (as `DocumentCard`).
   */
  .lotics-file-badge[data-pressable] {
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    appearance: none;
    cursor: default;
  }

  /*
   * The picture tile's scrim (`file_thumbnail.css`), so a mixed strip reads as one control; on top,
   * since the badge paints its own grounds.
   */
  .lotics-file-badge[data-pressable]::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-badge[data-pressable]:hover::after {
    background-color: var(--lotics-scrim-hover);
  }

  .lotics-file-badge[data-pressable]:active::after {
    background-color: var(--lotics-scrim-press);
  }

  .lotics-file-badge[data-pressable]:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  /* A DOCUMENT'S TILE — a picture's frame on the quiet ground a picture's own box shows until drawn, the page inset in
     it (`tileBadge`), so a paper stands beside pictures and faces as one of them. */
  .lotics-file-badge[data-tile] {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--lotics-file-badge-tile);
    height: var(--lotics-file-badge-tile);
    border-radius: var(--lotics-radius-control);
    overflow: hidden;
    background-color: var(--muted);
  }

  /* A file not held: the tile dashed, on no ground. */
  .lotics-file-badge[data-tile][data-placeholder] {
    border: var(--lotics-file-badge-border) dashed var(--input);
    background-color: transparent;
  }

  /* A page too small to print its type: its glyph in its type's ink, centred in the page's footprint, no paper. */
  .lotics-file-badge:not([data-tile])[data-glyph],
  .lotics-file-badge__page[data-glyph] {
    align-items: center;
    justify-content: center;
    overflow: visible;
    box-shadow: none;
    --lotics-icon-color: var(--lotics-file-badge-ink);
  }

  .lotics-file-badge__glyph {
    flex: none;
  }

  /* A ghost at the badge's footprint, so a pending row lines up. */
  .lotics-file-badge:not([data-tile])[data-placeholder],
  .lotics-file-badge__page[data-placeholder] {
    align-items: center;
    justify-content: center;
    border-width: var(--lotics-file-badge-border);
    border-style: dashed;
    border-color: var(--input);
    background-color: var(--muted);
    box-shadow: none;
    --lotics-icon-color: var(--lotics-ink-inactive);
  }

  /* In a dashed tile the ghost is the page's quiet silhouette: a dashed page in a dashed square reads as noise. */
  .lotics-file-badge__page[data-placeholder] {
    border-color: transparent;
  }

  .lotics-file-badge__sheet {
    /* The stamp centres on the paper, not the band. */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding-top: var(--lotics-file-badge-pad-y);
    padding-inline: var(--lotics-file-badge-pad-x);
    gap: var(--lotics-file-badge-line-gap);
    border-width: 1px 1px 0;
    border-style: solid;
    border-color: var(--lotics-file-badge-hairline);
    border-start-start-radius: var(--lotics-file-badge-radius);
    border-start-end-radius: var(--lotics-file-badge-radius);
    background-color: var(--card);
  }

  /* A video has no ruled lines: the paper takes the type's colour and one glyph. */
  .lotics-file-badge__sheet[data-media] {
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-inline: 0;
    gap: 0;
    background-color: var(--lotics-file-badge-ink);
    --lotics-icon-color: var(--lotics-white);
  }

  .lotics-file-badge__rule {
    display: block;
    height: var(--lotics-file-badge-rule-h);
    /* The pill rung clamps to a round cap on a 1.5px line. */
    border-radius: var(--lotics-radius-full);
    background-color: var(--lotics-file-badge-hairline);
  }

  .lotics-file-badge__rule[data-last] {
    width: 60%;
  }

  .lotics-file-badge__band {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: var(--lotics-file-badge-band-h);
    background-color: var(--lotics-file-badge-ink);
    border-end-start-radius: var(--lotics-file-badge-radius);
    border-end-end-radius: var(--lotics-file-badge-radius);
  }

  .lotics-file-badge__label {
    white-space: nowrap;
    font-family: var(--font-sans);
    font-size: var(--lotics-file-badge-label-size);
    line-height: var(--lotics-file-badge-label-leading);
    letter-spacing: var(--lotics-file-badge-tracking);
    font-weight: var(--lotics-weight-semibold);
    /* White: the band keeps its colour in a dark theme. */
    color: var(--lotics-white);
  }

  /* `inset: 0` + `margin: auto` centres without knowing the chip's size. */
  .lotics-file-badge__stamp {
    position: absolute;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-inline: var(--lotics-file-badge-stamp-pad-x);
    padding-block: var(--lotics-file-badge-stamp-pad-y);
    border-radius: var(--lotics-file-badge-stamp-radius);
    background-color: var(--lotics-white);
    font-family: var(--font-sans);
    font-size: var(--lotics-file-badge-stamp-size);
    line-height: normal;
    letter-spacing: var(--lotics-file-badge-stamp-tracking);
    font-weight: var(--lotics-weight-semibold);
    color: var(--lotics-ink-default);
    box-shadow: 0 0.5px 1px color-mix(in srgb, var(--lotics-shadow-color) 10%, transparent);
  }
}