/* A capped, overlapping set of marks. The hairline is translucent ink, since a page-coloured ring haloes
   on a washed row; a shadow, since a border grows the box. The ring follows the mark's silhouette; the
   remainder follows the set's. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-mark-stack {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Holds its width in a narrow cell rather than clipping. */
    flex-shrink: 0;
    min-width: 0;
  }

  /* A set of files that opens where it stands: a real button, its user-agent paint taken off. */
  .lotics-mark-stack[data-pressable] {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--lotics-radius-control);
    background: transparent;
    font: inherit;
    color: inherit;
    appearance: none;
    cursor: pointer;
  }

  .lotics-mark-stack[data-pressable]:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: var(--lotics-space-2);
  }

  /* The dot rides the corner the next mark would cover and the tuck is already 0, so the run takes a
     gutter. */
  .lotics-mark-stack[data-spread] {
    gap: var(--lotics-space-4);
  }

  .lotics-mark-stack__mark,
  .lotics-mark-stack__more {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* `z-index` needs a positioned box, or the remainder covers a subject it counts. */
    position: relative;
    margin-left: calc(-1 * var(--lotics-mark-stack-tuck));
    border-radius: var(--lotics-radius-full);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--lotics-shadow-color) 12%, transparent);
  }

  .lotics-mark-stack__mark {
    z-index: var(--lotics-mark-stack-depth);
  }

  .lotics-mark-stack__mark[data-first],
  .lotics-mark-stack__more[data-first] {
    margin-left: 0;
  }

  /* Round is for a person's face; everything else corners like other control-sized boxes. */
  .lotics-mark-stack__mark[data-kind="group"],
  .lotics-mark-stack__mark[data-kind="thing"],
  .lotics-mark-stack__mark[data-face="brand"],
  .lotics-mark-stack__mark[data-face="file"],
  .lotics-mark-stack__more[data-kind="thing"] {
    border-radius: var(--lotics-radius-control);
  }

  /* A face with no box of its own (a picture, a brand, a file tile) is the rung, the ground showing until
     drawn. An `Avatar` sizes itself, so no `letters` here. */
  .lotics-mark-stack__mark[data-kind="thing"],
  .lotics-mark-stack__mark[data-face="brand"],
  .lotics-mark-stack__mark[data-face="file"] {
    width: var(--lotics-mark-stack-size);
    height: var(--lotics-mark-stack-size);
    background: var(--muted);
    --lotics-icon-color: var(--lotics-ink-inactive);
  }

  /* A document's mark is its type — its badge, its glyph on a line, its tile in a lead — and a thing's picture not
     held its placeholder: each draws its own ground, in no ring. */
  .lotics-mark-stack__mark[data-paper],
  .lotics-mark-stack__mark[data-face="ghost"] {
    background: none;
    box-shadow: none;
  }

  /* A DOCUMENT'S CHIP, a document alone: its badge and its filename at the rung's height, the name cut at its
     widest (`fileChipWidth`) — the badge still says its type. */
  .lotics-mark-stack__chip {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
    height: var(--lotics-mark-stack-size);
    gap: var(--lotics-space-6);
  }

  .lotics-mark-stack__chip > .lotics-mark-stack__name {
    min-width: 0;
    max-width: var(--lotics-mark-stack-chip-name);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* How many a set holding a document holds: words a mark's gap off its marks, never cut. */
  .lotics-mark-stack__count {
    flex-shrink: 0;
    margin-inline-start: var(--lotics-space-6);
    white-space: nowrap;
  }

  /* The clip is the picture's: `overflow: hidden` on the slot would cut the state dot off. */
  .lotics-mark-stack__image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--lotics-radius-control);
    object-fit: cover;
  }

  /* Ringed in the canvas to separate from what is under it; sized as a fraction of the rung. */
  .lotics-mark-stack__dot {
    position: absolute;
    right: calc(var(--lotics-space-2) * -1);
    bottom: calc(var(--lotics-space-2) * -1);
    width: calc(var(--lotics-mark-stack-size) * 0.32);
    height: calc(var(--lotics-mark-stack-size) * 0.32);
    border-radius: var(--lotics-radius-full);
    box-shadow: 0 0 0 1px var(--background);
    background-color: var(--lotics-ink-muted);
  }

  .lotics-mark-stack__dot[data-tone="info"] {
    background-color: var(--lotics-accent);
  }
  .lotics-mark-stack__dot[data-tone="success"] {
    background-color: var(--lotics-ink-success);
  }
  .lotics-mark-stack__dot[data-tone="warning"] {
    background-color: var(--lotics-ink-warning);
  }
  .lotics-mark-stack__dot[data-tone="error"] {
    background-color: var(--lotics-ink-danger);
  }

  /* A neutral ground, since it is no subject, and no depth rung, keeping it under every mark. */
  .lotics-mark-stack__more {
    width: var(--lotics-mark-stack-size);
    height: var(--lotics-mark-stack-size);
    background: var(--muted);
  }

  .lotics-mark-stack__mark[data-size="xs"],
  .lotics-mark-stack__more[data-size="xs"],
  .lotics-mark-stack__chip[data-size="xs"] {
    --lotics-mark-stack-size: var(--lotics-mark-xs);
  }
  .lotics-mark-stack__mark[data-size="sm"],
  .lotics-mark-stack__more[data-size="sm"],
  .lotics-mark-stack__chip[data-size="sm"] {
    --lotics-mark-stack-size: var(--lotics-mark-sm);
  }
  .lotics-mark-stack__mark[data-size="md"],
  .lotics-mark-stack__more[data-size="md"],
  .lotics-mark-stack__chip[data-size="md"] {
    --lotics-mark-stack-size: var(--lotics-mark-md);
  }
  .lotics-mark-stack__mark[data-size="lg"],
  .lotics-mark-stack__more[data-size="lg"],
  .lotics-mark-stack__chip[data-size="lg"] {
    --lotics-mark-stack-size: var(--lotics-mark-lg);
  }
  .lotics-mark-stack__mark[data-size="xl"],
  .lotics-mark-stack__more[data-size="xl"],
  .lotics-mark-stack__chip[data-size="xl"] {
    --lotics-mark-stack-size: var(--lotics-mark-xl);
  }
  .lotics-mark-stack__mark[data-size="xxl"],
  .lotics-mark-stack__more[data-size="xxl"],
  .lotics-mark-stack__chip[data-size="xxl"] {
    --lotics-mark-stack-size: var(--lotics-mark-xxl);
  }
}