/* ==========================================================================
   Component: Avatar
   ========================================================================== */

/* Import subcomponents */
@import "image.css";
@import "fallback.css";
@import "status.css";

/* Base Avatar Container */
.c-avatar {
  display: inline-flex;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

/* Size Variants */
.c-avatar--xs {
  height: 24px;
  width: 24px;
}

.c-avatar--sm {
  height: 32px;
  width: 32px;
}

.c-avatar--md {
  height: 40px;
  width: 40px;
}

.c-avatar--lg {
  height: 56px;
  width: 56px;
}

.c-avatar--xl {
  height: 80px;
  width: 80px;
}

/* Shape Variants */
.c-avatar--circle {
  border-radius: var(--radius-full);
}

.c-avatar--square {
  border-radius: 0;
}

.c-avatar--rounded {
  border-radius: var(--radius-md);
}

/* Ring Variant */
.c-avatar--ring {
  box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--color-primary);
}