@layer components {
  .avatar {
    --avatar-size: 2rem;

    flex: none;
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--avatar-size) * 0.38);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.03em;
    box-shadow: var(--bevel-inset);
  }

  .avatar-stack {
    --avatar-stack-ring: var(--color-white);

    display: flex;
    flex-shrink: 0;

    & > .avatar {
      box-shadow: 0 0 0 2px var(--avatar-stack-ring), var(--bevel-inset);
    }

    & > .avatar + .avatar {
      margin-inline-start: calc(var(--avatar-size) * -0.15);
    }
  }

  .avatar--blue {
    background-image: linear-gradient(to bottom right, var(--color-blue-100), var(--color-blue-50));
    color: var(--color-blue-700);
  }

  .avatar--emerald {
    background-image: linear-gradient(to bottom right, var(--color-emerald-100), var(--color-emerald-50));
    color: var(--color-emerald-700);
  }

  .avatar--amber {
    background-image: linear-gradient(to bottom right, var(--color-amber-100), var(--color-amber-50));
    color: var(--color-amber-700);
  }

  .avatar--gray {
    background-image: linear-gradient(to bottom right, var(--color-gray-100), var(--color-gray-50));
    color: var(--color-gray-500);
  }

  .avatar--rose {
    background-image: linear-gradient(to bottom right, var(--color-rose-100), var(--color-rose-50));
    color: var(--color-rose-600);
  }
}