/*
 * THE DISC IS THE SUBJECT'S FAMILY, SOLID — opaque, so a mark never reads as a tonal pill at
 * another size. The ring is an inset hairline so the measured size is unchanged; the ground sits on
 * the fallback, so a loaded image draws on nothing.
 */
@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);
    /* 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);
    /* Declared here so an unmatched mark inherits `md`. */
    --lotics-avatar-size: var(--lotics-mark-md);
  }

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

  /*
   * The agent is the product acting, so it wears the accent; the accent has no rung ladder, so its
   * light rung is mixed toward the canvas and inverts with the theme.
   */
  .lotics-avatar[data-subject="agent"] {
    --lotics-avatar-hue: color-mix(in srgb, var(--lotics-accent) 40%, var(--background));
  }

  /* A proportion is for boxes sized by data (constitution.md §5); four fixed rungs are not. A thing's picture
     is a picture, never a face's disc. */
  .lotics-avatar[data-subject="organization"],
  .lotics-avatar[data-picture] {
    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` rather than tying on emit order. */
  .lotics-avatar .lotics-avatar__initials {
    color: var(--lotics-avatar-ink);
  }

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

  /* A picture that is a file — a video's frame — fills the mark, clipped to its silhouette; a document's badge
     centres in it. */
  .lotics-avatar__file {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
  }

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