:host {
  --size: 40px;
  --_font-size: calc(var(--size) * 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: calc(var(--size) * 0.15);
  isolation: isolate;
  vertical-align: middle;
  flex-shrink: 0;
  color: var(--l-color-text-secondary);
}

:host([size='xs']) {
  --size: 24px;
  --_font-size: 0.75rem;
}
:host([size='sm']) {
  --size: 32px;
  --_font-size: 0.875rem;
}
:host([size='lg']) {
  --size: 48px;
  --_font-size: 1.25rem;
}
:host([size='xl']) {
  --size: 56px;
  --_font-size: 1.25rem;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.initials {
  margin: auto;
}

.icon {
  width: 60%;
  height: 60%;
  color: currentColor;
}

.badge {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  height: 12px;
  min-width: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 2px;
  border-radius: 3px;
  box-shadow: 0 0 0 2px var(--l-color-surface);
  background-color: var(--l-color-surface);
  font-size: 0.625rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--l-color-text-primary);
  overflow: hidden;
}

/*
 * Inset ring via ::after so it renders on top of the <img>.
 * A box-shadow on :host would be covered by the image since
 * it fills the entire element with object-fit: cover.
 */
.base::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px light-dark(oklch(0 0 0 / 7%), oklch(100% 0 0 / 10%));
  pointer-events: none;
}

.base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: calc(var(--size) * 0.15);
  background-color: var(--color, var(--l-color-bg-fill-neutral-soft));
  /*
   * Text over --color, decided by the background's own luminance — never the
   * document mode, since --color is consumer-set and ignores light/dark.
   * The contrast-color() block below is the primary path (Baseline 2026); this
   * --_on calc() is the fallback for browsers predating it (Chrome ≤146,
   * Safari <26, Firefox <146). It approximates WCAG relative luminance with
   * squared sRGB channels (a cheap linearization, Rec. 709 weights) and flips at
   * 0.2, just above the black/white crossover (~0.179) to offset squaring
   * underestimating mid-tones — holding AA across saturated brand colors where an
   * OKLCH-lightness threshold collapses to ≈1:1 (OKLCH L tracks hue, not
   * luminance: a mid red reads "light" yet needs white text). --text-color lets
   * consumers force a specific brand text color, overriding both paths.
   */
  --_on: calc(
    255 *
      (
        1 -
          sign(
            0.2126 * (r / 255) * (r / 255) + 0.7152 * (g / 255) * (g / 255) + 0.0722 * (b / 255) *
              (b / 255) - 0.2
          )
      ) /
      2
  );
  color: var(--text-color, rgb(from var(--color) var(--_on) var(--_on) var(--_on)));
  font-size: var(--_font-size);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  padding: 0;
  cursor: inherit;
}

/* Primary path: native, guaranteed-contrast black/white. contrast-color() is
 * Baseline Newly Available (2026) — Safari 26+, Firefox 146+, Chrome/Edge 147+ —
 * and supersedes the luminance approximation above where supported. @supports (not
 * declaration order) is required: the value contains var(), so a non-supporting
 * browser would treat contrast-color() as invalid-at-computed-value-time and reset
 * to `inherit` rather than falling back to the calc() line. No bg fallback inside,
 * so a bare avatar (no --color) keeps inheriting --l-color-text-secondary.
 * --text-color still wins here, overriding contrast-color()'s choice.
 * (The earlier `… vs black, white to AA` extended syntax was dropped from the spec.) */
@supports (color: contrast-color(red)) {
  .base {
    color: var(--text-color, contrast-color(var(--color)));
  }
}

button.base {
  cursor: pointer;
}

button.base:focus-visible {
  outline: 2px solid var(--l-focus-ring);
  outline-offset: 2px;
}

button.base:hover {
  box-shadow: inset 0 0 0 1.5px var(--l-color-border-interactive);
}

@container style(--appearance: circle) {
  .base {
    border-radius: 50%;
  }
}