/*
 * A CAPPED, OVERLAPPING SET OF MARKS — parties or things, one engine.
 *
 * The separating hairline is TRANSLUCENT INK, never the surface colour: a ring
 * in the page background is a halo on a row that washes on hover, on open and
 * while pressed, while a translucent dark edge DARKENS whatever is behind it. A
 * shadow rather than a border, because a border grows the box.
 *
 * The ring follows the mark's own silhouette: a square team mark ringed as a
 * circle shows the ring cutting its corners off. The remainder follows the
 * SET's, because it is a statement about the set rather than a member of it.
 */
@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;
    /* A stack in a narrow cell holds its width rather than clipping the marks it
       exists to show. */
    flex-shrink: 0;
    min-width: 0;
  }

  .lotics-mark-stack__mark,
  .lotics-mark-stack__more {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* A positioned box is what `z-index` needs to take effect; without it the
       marks stack in DOM order and 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 the shape the kit spends on a person's face; everything else
     corners where every other control-sized box on the page does. */
  .lotics-mark-stack__mark[data-kind="group"],
  .lotics-mark-stack__mark[data-kind="thing"],
  .lotics-mark-stack__more[data-kind="thing"] {
    border-radius: var(--lotics-radius-control);
  }

  /* A thing's slot is the picture's own box — the ground is what shows through
     while there is no picture. */
  .lotics-mark-stack__mark[data-kind="thing"] {
    width: var(--lotics-mark-stack-size);
    height: var(--lotics-mark-stack-size);
    overflow: hidden;
    background: var(--muted);
    --lotics-icon-color: var(--lotics-ink-inactive);
  }

  .lotics-mark-stack__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* A ground of its own, and a NEUTRAL one: the remainder is the only mark in
     the stack that is not a subject. It takes no depth rung either, which keeps
     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="sm"],
  .lotics-mark-stack__more[data-size="sm"] {
    --lotics-mark-stack-size: var(--lotics-avatar-sm);
  }
  .lotics-mark-stack__mark[data-size="md"],
  .lotics-mark-stack__more[data-size="md"] {
    --lotics-mark-stack-size: var(--lotics-avatar-md);
  }
  .lotics-mark-stack__mark[data-size="lg"],
  .lotics-mark-stack__more[data-size="lg"] {
    --lotics-mark-stack-size: var(--lotics-avatar-lg);
  }
  .lotics-mark-stack__mark[data-size="xl"],
  .lotics-mark-stack__more[data-size="xl"] {
    --lotics-mark-stack-size: var(--lotics-avatar-xl);
  }
}