/*
 * THE DISC IS THE SUBJECT'S FAMILY, SOLID — `avatar.tsx` deals the family and
 * this sheet only spends the pair it hands over. Opaque rather than a wash of
 * the hue: a mark shares a row with tonal status pills, and at a wash strength
 * the two are the same object drawn at two diameters.
 *
 * The ring is an INSET hairline, not a border and not a shadow: `inset` keeps it
 * INSIDE the box, so the mark's measured size is unchanged and every layout that
 * budgeted a rung still fits — an outset border would grow every disc by 2px and
 * push the name beside it. It is what edges a loaded PHOTO against the canvas.
 *
 * The ground sits on the FALLBACK rather than the root, so a loaded image is
 * drawn on nothing — a `contain` fit shows the surface through, as it did.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    width: var(--lotics-avatar-size);
    height: var(--lotics-avatar-size);
    border-radius: var(--lotics-radius-full);
    user-select: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lotics-shadow-color) 8%, transparent);
    /* A SUBJECT WITH NO NAME TO HASH: quiet, because not knowing who someone is
       is not a colour to remember them by. */
    --lotics-avatar-hue: var(--muted);
    --lotics-avatar-ink: var(--lotics-ink-default);
    /* `md` IS the resting rung, declared here rather than as a fifth rule: a
       size only the rungs below set INHERITS into any mark that matched none of
       them. */
    --lotics-avatar-size: var(--lotics-avatar-md);
  }

  .lotics-avatar[data-size="sm"] {
    --lotics-avatar-size: var(--lotics-avatar-sm);
  }
  .lotics-avatar[data-size="lg"] {
    --lotics-avatar-size: var(--lotics-avatar-lg);
  }
  .lotics-avatar[data-size="xl"] {
    --lotics-avatar-size: var(--lotics-avatar-xl);
  }

  /* THE AGENT is the product acting rather than one of a set of people to be
     told apart, so it wears the product's own hue and every surface draws the
     same one. The accent has no rung ladder under it, so the light rung a family
     reads off the palette is mixed here instead — toward the canvas, so the pair
     inverts with the theme exactly as a family's does. */
  .lotics-avatar[data-subject="agent"] {
    --lotics-avatar-hue: color-mix(in srgb, var(--lotics-accent) 40%, var(--background));
  }

  /* An organization corners like every other control-sized box on the page,
     rather than at a fraction of its own rung — a proportion is what a box sized
     by DATA gets (constitution.md §5), and four fixed rungs are not data. */
  .lotics-avatar[data-subject="organization"] {
    border-radius: var(--lotics-radius-control);
  }

  .lotics-avatar__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--lotics-avatar-hue);
    --lotics-icon-color: var(--lotics-avatar-ink);
  }

  /* Two classes, so the ink outranks `.lotics-text`'s own rule instead of tying
     with it and resolving on whichever sheet a bundler emitted last. */
  .lotics-avatar .lotics-avatar__initials {
    color: var(--lotics-avatar-ink);
  }

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

  .lotics-avatar__image[data-fit="contain"] {
    object-fit: contain;
  }
}