/* ==========================================================================
   Avatar Subcomponent: Fallback
   ========================================================================== */

.c-avatar__fallback {
  align-items: center;
  background-color: var(--surface-hover);
  color: var(--text-color);
  display: flex;
  font-weight: var(--font-weight-medium);
  height: 100%;
  justify-content: center;
  line-height: 1;
  text-transform: uppercase;
  width: 100%;
}

/* Size-specific font sizes */
.c-avatar__fallback--xs {
  font-size: var(--font-size-xs);
}

.c-avatar__fallback--sm {
  font-size: var(--font-size-sm);
}

.c-avatar__fallback--md {
  font-size: var(--font-size-base);
}

.c-avatar__fallback--lg {
  font-size: var(--font-size-lg);
}

.c-avatar__fallback--xl {
  font-size: var(--font-size-2xl);
}