@layer env.components {
  .env-avatar-group {
    --env-avatar-group-size: var(--env-picture-size-md);
    --env-avatar-group-gap: calc(var(--env-avatar-group-size) * 0.15);
    --env-avatar-group-pitch: calc(
      var(--env-avatar-group-size) * (0.6 + 0.1 * var(--env-avatar-dense, 0))
    );
    --env-avatar-group-lean: calc(1 - var(--env-avatar-dense, 0));
    --env-avatar-group-tuck: calc(var(--env-avatar-group-size) * 0.25);
    --env-avatar-group-slot: var(--env-avatar-group-size);
    --env-avatar-group-spread: 0;
    --env-avatar-group-gather: 0;
    --env-avatar-group-inline: 1;
    --env-avatar-group-settle: 0s;
    --env-avatar-group-ring-color: var(
      --env-avatar-group-ring,
      var(--env-surface-color, var(--env-color-bg-page))
    );
    --env-avatar-group-ring-width: 0.125rem;
    --env-avatar-group-ring-layers:
      0 0 0 var(--env-avatar-group-ring-width) var(--env-avatar-group-ring-tint, transparent),
      0 0 0 var(--env-avatar-group-ring-width) var(--env-avatar-group-ring-color);
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    vertical-align: middle;
    isolation: isolate;
  }
  .env-avatar-group[data-size='sm'] {
    --env-avatar-group-size: var(--env-picture-size-sm);
    --env-avatar-dense: 1;
  }
  .env-avatar-group[data-size='lg'] {
    --env-avatar-group-size: var(--env-picture-size-lg);
  }
  .env-avatar-group[data-size='xl'] {
    --env-avatar-group-size: var(--env-picture-size-xl);
  }
  .env-avatar-group:has(.env-avatar-fallback-initials) {
    --env-avatar-group-pitch: calc(
      (var(--env-avatar-group-size) * 0.84 + var(--env-avatar-group-ring-width)) *
        (1 - var(--env-avatar-dense, 0)) + var(--env-avatar-group-size) * var(--env-avatar-dense, 0)
    );
    --env-avatar-group-lean: 0;
  }
  .env-avatar-group[data-align='end'] {
    --env-avatar-group-gather: 1;
  }
  .env-avatar-group:dir(rtl) {
    --env-avatar-group-inline: -1;
  }
  @media (hover: hover) {
    .env-avatar-group:hover {
      --env-avatar-group-spread: 1;
    }
  }
  .env-avatar-group:is([data-spread], :has(:focus-visible)) {
    --env-avatar-group-spread: 1;
    --env-avatar-group-cover: hidden;
    --env-avatar-group-cover-transition: visibility 0s linear var(--env-avatar-group-settle);
    --env-avatar-group-items-pointer: auto;
  }
  .env-avatar-group::before {
    content: '';
    position: absolute;
    inset: calc(var(--env-avatar-group-size) * -0.06);
    z-index: calc(var(--env-z-raised) + 1);
    visibility: var(--env-avatar-group-cover, visible);
    transition: var(--env-avatar-group-cover-transition, none);
  }
  @media (hover: hover) {
    .env-avatar-group:hover::before {
      visibility: hidden;
      transition: visibility 0s linear var(--env-avatar-group-settle);
    }
  }
  @media (hover: hover) {
    .env-avatar-group:hover > * {
      pointer-events: auto;
    }
  }
  .env-avatar-group > * {
    --env-avatar-group-padding: 0rem;
    --env-avatar-group-nudge: 0rem;
    --env-avatar-group-rest-lift: 0rem;
    --env-avatar-group-rest-turn: 0deg;
    --env-avatar-group-arc-lift: 0rem;
    --env-avatar-group-arc-turn: 0deg;
    --env-avatar-group-step: calc(
      var(--env-avatar-group-slot) + var(--env-avatar-group-gap) - var(--env-avatar-group-pitch)
    );
    --env-avatar-group-count-step: calc(
      (var(--env-avatar-group-slot) - var(--env-avatar-group-size)) / 2 +
        var(--env-avatar-group-gap) + var(--env-avatar-group-tuck)
    );
    --env-avatar-group-shift: calc(
      var(--env-avatar-group-gather) *
        (
          var(--env-avatar-group-after, 0) * var(--env-avatar-group-step) +
            var(--env-avatar-group-count-after, 0) * var(--env-avatar-group-count-step)
        ) -
        (1 - var(--env-avatar-group-gather)) *
        (
          var(--env-avatar-group-before, 0) * var(--env-avatar-group-step) +
            var(--env-avatar-group-count-before, 0) * var(--env-avatar-group-count-step)
        )
    );
    position: relative;
    flex: 0 0 auto;
    margin-inline: var(--env-avatar-group-padding);
    pointer-events: var(--env-avatar-group-items-pointer, none);
    translate: calc(
        (var(--env-avatar-group-shift) + var(--env-avatar-group-nudge)) *
          (1 - var(--env-avatar-group-spread)) * var(--env-avatar-group-inline)
      )
      calc(
        var(--env-avatar-group-rest-lift) * (1 - var(--env-avatar-group-spread)) +
          var(--env-avatar-group-arc-lift) * var(--env-avatar-group-spread)
      );
  }
  .env-avatar-group > * + * {
    margin-inline-start: calc(var(--env-avatar-group-gap) + var(--env-avatar-group-padding));
  }
  .env-avatar-group > :not(.env-avatar-group-overflow) {
    rotate: calc(
      (
          var(--env-avatar-group-rest-turn) * (1 - var(--env-avatar-group-spread)) +
            var(--env-avatar-group-arc-turn) * var(--env-avatar-group-spread)
        ) *
        var(--env-avatar-group-inline)
    );
  }
  .env-avatar-group > :nth-child(3n + 1) {
    --env-avatar-group-rest-lift: calc(
      var(--env-avatar-group-size) * -0.04 * var(--env-avatar-group-lean)
    );
    --env-avatar-group-rest-turn: calc(-6deg * var(--env-avatar-group-lean));
  }
  .env-avatar-group > :nth-child(3n + 2) {
    --env-avatar-group-nudge: calc(
      var(--env-avatar-group-size) * 0.03 * var(--env-avatar-group-lean)
    );
    --env-avatar-group-rest-lift: calc(
      var(--env-avatar-group-size) * 0.05 * var(--env-avatar-group-lean)
    );
    --env-avatar-group-rest-turn: calc(5deg * var(--env-avatar-group-lean));
  }
  .env-avatar-group > :nth-child(3n) {
    --env-avatar-group-nudge: calc(
      var(--env-avatar-group-size) * -0.02 * var(--env-avatar-group-lean)
    );
    --env-avatar-group-rest-lift: calc(
      var(--env-avatar-group-size) * -0.01 * var(--env-avatar-group-lean)
    );
    --env-avatar-group-rest-turn: calc(-2deg * var(--env-avatar-group-lean));
  }
  .env-avatar-group > .env-avatar-group-overflow {
    --env-avatar-group-nudge: 0rem;
    z-index: calc(-1 * var(--env-z-raised));
  }
  .env-avatar-group > :is(:nth-child(2), :nth-last-child(2)) {
    --env-avatar-group-arc-lift: calc(var(--env-avatar-group-size) * 0.05);
  }
  .env-avatar-group > :nth-child(2) {
    --env-avatar-group-arc-turn: -3deg;
  }
  .env-avatar-group > :nth-last-child(2) {
    --env-avatar-group-arc-turn: 3deg;
  }
  .env-avatar-group > :is(:first-child, :last-child) {
    --env-avatar-group-arc-lift: calc(var(--env-avatar-group-size) * 0.14);
  }
  .env-avatar-group > :first-child {
    --env-avatar-group-arc-turn: -8deg;
  }
  .env-avatar-group > :last-child {
    --env-avatar-group-arc-turn: 8deg;
  }
  .env-avatar-group > :only-child {
    --env-avatar-group-arc-lift: 0rem;
    --env-avatar-group-arc-turn: 0deg;
  }
  .env-avatar-group-item {
    display: inline-flex;
    margin-block: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }
  .env-avatar-group-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    transition: background-color var(--env-motion-duration-fast) var(--env-motion-ease-enter);
  }
  .env-avatar-group-item:hover::after {
    background: var(--env-color-bg-neutral-subtle-hover);
  }
  .env-avatar-group-item:active::after {
    background: var(--env-color-bg-neutral-subtle-pressed);
  }
  .env-avatar-group > .env-avatar-group-item:is(:hover, :focus-visible),
  .env-avatar-group > .env-avatar-group-overflow:focus-visible,
  .env-avatar-group > :is([data-selected], :has([data-selected])) {
    z-index: var(--env-z-raised);
  }
  .env-avatar-group-item:focus-visible,
  .env-avatar-group-overflow:focus-visible {
    outline: 2px solid var(--env-color-border-focus);
    outline-offset: 2px;
  }
  .env-avatar-group-overflow {
    box-sizing: border-box;
    display: inline-grid;
    place-items: center;
    min-inline-size: var(--env-avatar-group-size);
    block-size: var(--env-avatar-group-size);
    padding-inline: calc(var(--env-avatar-group-size) / 6);
    border-radius: calc(var(--env-avatar-group-size) / 2);
    background: var(--env-color-bg-neutral-muted);
    color: var(--env-color-fg-default);
    font: var(--env-font-weight-semibold) calc(var(--env-avatar-group-size) * 0.38) / 1
      var(--env-font-family);
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: default;
    user-select: none;
  }
  .env-avatar-group-overflow > span {
    translate: calc(
      var(--env-avatar-group-tuck) / 2 * (1 - var(--env-avatar-group-spread)) *
        var(--env-avatar-group-inline)
    );
  }
  .env-avatar-group-tooltip {
    display: grid;
  }
  @media (pointer: coarse) {
    .env-avatar-group[data-interactive] {
      --env-avatar-group-slot: max(var(--env-avatar-group-size), var(--env-control-height-touch));
      --env-avatar-group-gap: max(
        0rem,
        calc(
          var(--env-avatar-group-size) * 0.15 - var(--env-avatar-group-slot) +
            var(--env-avatar-group-size)
        )
      );
    }
    .env-avatar-group[data-interactive] > :not(.env-avatar-group-item, .env-avatar-group-overflow) {
      --env-avatar-group-padding: calc(
        (var(--env-avatar-group-slot) - var(--env-avatar-group-size)) / 2
      );
    }
    .env-avatar-group-item {
      justify-content: center;
      align-items: center;
      min-inline-size: var(--env-control-height-touch);
      min-block-size: var(--env-control-height-touch);
    }
    .env-avatar-group-item::after {
      inset: calc((100% - var(--env-avatar-group-size)) / 2);
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .env-avatar-group-item {
      transition: transform var(--env-motion-duration-fast) var(--env-motion-ease);
    }
    .env-avatar-group-item:active {
      transform: scale(0.97);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .env-avatar-group-item::after {
      transition: none;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .env-avatar-group {
      --env-avatar-group-settle: var(--env-motion-duration-medium);
    }
    .env-avatar-group > *,
    .env-avatar-group-overflow > span {
      transition-property: translate, rotate, transform;
      transition-duration: var(--env-motion-duration-medium);
      transition-timing-function: var(--env-motion-ease);
    }
  }
}