@layer env.components {
  @property --env-avatar-container {
    syntax: '*';
    inherits: false;
  }
  @property --env-avatar-content {
    syntax: '*';
    inherits: false;
  }
  .env-avatar {
    --env-avatar-size: var(--env-picture-size-md);
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: var(--env-avatar-size);
    block-size: var(--env-avatar-size);
    border-radius: 50%;
    --env-avatar-container-default: var(--env-color-bg-avatar);
    --env-avatar-content-default: var(--env-color-fg-avatar);
    --env-avatar-fill: var(--env-avatar-container, var(--env-avatar-container-default));
    --env-avatar-figure-color: var(--env-avatar-content, var(--env-avatar-content-default));
    background: var(--env-avatar-fill);
    background-image: linear-gradient(
      oklch(from var(--env-avatar-fill) l 0 h / calc(var(--env-avatar-dense, 0) * 0.5)) 0 0
    );
    color: var(--env-avatar-content, var(--env-avatar-content-default));
    font: var(--env-font-weight-semibold)
      min(
        max(var(--env-font-size-caption), calc(var(--env-avatar-size) * 0.38)),
        max(
          calc(0 * var(--env-avatar-size)),
          calc((var(--env-avatar-size) - 0.96 * var(--env-picture-size-sm)) * 1000)
        )
      ) /
      1 var(--env-font-family);
    letter-spacing: 0.01em;
    user-select: none;
    --env-avatar-shadow: var(
      --env-avatar-group-ring-layers,
      0 1px 2px
        oklch(
          from var(--env-surface-color, var(--env-color-bg-page)) calc(l * 0.3) calc(c * 0.5) h /
            calc(
              (0.26 - l * 0.15) * (1 - max(var(--env-avatar-dense, 0), var(--env-avatar-small, 0)))
            )
        )
    );
    box-shadow: var(--env-avatar-shadow);
  }
  .env-avatar[data-hue='seafoam'] {
    --env-avatar-container-default: var(--env-color-bg-avatar-seafoam);
    --env-avatar-content-default: var(--env-color-fg-avatar-seafoam);
  }
  .env-avatar[data-hue='sage'] {
    --env-avatar-container-default: var(--env-color-bg-avatar-sage);
    --env-avatar-content-default: var(--env-color-fg-avatar-sage);
  }
  .env-avatar[data-hue='butter'] {
    --env-avatar-container-default: var(--env-color-bg-avatar-butter);
    --env-avatar-content-default: var(--env-color-fg-avatar-butter);
  }
  .env-avatar[data-hue='blush'] {
    --env-avatar-container-default: var(--env-color-bg-avatar-blush);
    --env-avatar-content-default: var(--env-color-fg-avatar-blush);
  }
  .env-avatar[data-hue='periwinkle'] {
    --env-avatar-container-default: var(--env-color-bg-avatar-periwinkle);
    --env-avatar-content-default: var(--env-color-fg-avatar-periwinkle);
  }
  .env-avatar[data-hue='orchid'] {
    --env-avatar-container-default: var(--env-color-bg-avatar-orchid);
    --env-avatar-content-default: var(--env-color-fg-avatar-orchid);
  }
  .env-avatar[data-hue='oat'] {
    --env-avatar-container-default: var(--env-color-bg-avatar-oat);
    --env-avatar-content-default: var(--env-color-fg-avatar-oat);
  }
  .env-avatar[data-size='sm'] {
    --env-avatar-size: var(--env-picture-size-sm);
    --env-avatar-small: 1;
  }
  .env-avatar[data-size='lg'] {
    --env-avatar-size: var(--env-picture-size-lg);
  }
  .env-avatar[data-size='xl'] {
    --env-avatar-size: var(--env-picture-size-xl);
  }
  .env-avatar-fallback {
    display: contents;
  }
  .env-avatar[data-selected] {
    --env-avatar-selected-gap: var(
      --env-avatar-group-ring-color,
      var(--env-surface-color, var(--env-color-bg-page))
    );
    box-shadow:
      0 0 0 2px var(--env-avatar-group-ring-tint, transparent),
      0 0 0 2px var(--env-avatar-selected-gap),
      0 0 0 4px var(--env-color-bg-primary-emphasis);
  }
  .env-avatar-check {
    position: absolute;
    inset-block-end: calc(var(--env-avatar-size) * -0.08);
    inset-inline-end: calc(var(--env-avatar-size) * -0.08);
    z-index: var(--env-z-raised);
    display: grid;
    place-items: center;
    box-sizing: border-box;
    inline-size: max(var(--env-icon-size-sm), calc(var(--env-avatar-size) * 0.36));
    block-size: max(var(--env-icon-size-sm), calc(var(--env-avatar-size) * 0.36));
    border-radius: 50%;
    background: var(--env-color-bg-primary-emphasis);
    color: var(--env-color-fg-on-emphasis);
    box-shadow: 0 0 0 2px var(--env-avatar-selected-gap);
  }
  .env-avatar-check .env-icon,
  .env-avatar-check svg {
    inline-size: 75%;
    block-size: 75%;
  }
  @media (forced-colors: active) {
    .env-avatar[data-selected] {
      outline: 2px solid Highlight;
      outline-offset: 2px;
    }
    .env-avatar-check {
      forced-color-adjust: none;
      background: Highlight;
      color: HighlightText;
    }
  }
  .env-avatar:has(.env-avatar-fallback-person) {
    background: none;
  }
  .env-avatar-person {
    display: block;
    border-radius: inherit;
    inline-size: 100%;
    block-size: 100%;
  }
  .env-avatar-person-background {
    fill: var(--env-avatar-fill);
  }
  .env-avatar-person-figure {
    fill: var(--env-avatar-figure-color);
  }
  .env-avatar-image {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    animation: env-motion-fade-in var(--env-motion-duration-slow) var(--env-motion-ease-enter);
  }
  [data-env-skeleton] .env-avatar {
    forced-color-adjust: none;
    border-color: transparent;
    box-shadow: none;
    --env-skeleton-shape: 1;
    background: var(--env-skeleton-paint);
  }
  [data-env-skeleton] .env-avatar * {
    visibility: hidden;
  }
}