.avatar {
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  font-weight: medium;
  text-align: center;
  text-transform: uppercase;
}
.avatar__container {
}
.avatar__excessLabel {
}
.avatar__label {
  width: 50px;
  height: 50px;
  background-color: var(--colors-gray-100);
  font-size: 24px;
  line-height: 50px;
  text-align: center;
}

/* container: { */
/*   width: size, */
/*   height: size, */
/*   fontSize: `calc(${themeSize ?? size} / 2.5)`, */
/* }, */
/* excessLabel: { */
/*   width: size, */
/*   height: size, */
/* }, */
/* label: { */
/*   fontSize: `calc(${themeSize ?? size} / 2.5)`, */
/*   lineHeight: size !== "100%" ? themeSize ?? size : undefined, */
/* }, */
/*  */

.icon {
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-width: 0;
  border-color: white;
  background-color: var(--colors-gray-400);
  color: white;
  font-weight: medium;
  text-align: center;
  text-transform: uppercase;
  vertical-align: "top";
}
.icon.showBorder {
  border-width: 2px;
}

.icon.sm {
  width: 6px;
  height: 6px;
  font-size: var(--fontSizes-xs);
  line-height: var(--space-6);
}

.icon.sm {
  width: 8px;
  height: 8px;
  font-size: var(--fontSizes-sm);
  line-height: var(--space-8);
}

.icon.md {
  width: 12px;
  height: 12px;
  font-size: var(--fontSizes-md);
  line-height: var(--space-12);
}

.icon.lg {
  width: 16px;
  height: 16px;
  font-size: var(--fontSizes-lg);
  line-height: var(--space-16);
}

.icon.xl {
  width: 24px;
  height: 24px;
  font-size: var(--fontSizes-xl);
  line-height: var(--space-24);
}

.icon.2xl {
  width: 32px;
  height: 32px;
  font-size: var(--fontSizes-2xl);
  line-height: var(--space-32);
}

.rounded,
.rounded img {
  border-radius: var(--border-radius-md);
}
.circle,
.circle img {
  border-radius: full;
}
.square,
.square img {
  border-radius: 0;
}

.chakra-avatar__badge {
  display: flex;
  position: absolute;
  bottom: 0;
  align-items: center;
  justify-content: center;
  inset-block-end: 0;
  inset-inline-end: 0;
}