/* ==========================================================================
   Shared Public Avatars
   ========================================================================== */

/* ==========================================================================
   Avatar Structure
   ========================================================================== */

/* One owner for public avatar structure and image fitting. */
.persona_avatar_frame.avatar {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  overflow: visible;
  place-items: stretch;
}

.persona_avatar_frame.avatar > .persona_avatar_shape {
  z-index: 1;
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.persona_avatar_frame.avatar > .persona_avatar_shape > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Every shared avatar can receive the displayed Persona owner's frame image. */
.persona_avatar_frame.avatar::after {
  position: absolute;
  z-index: 2;
  inset: var(--persona-avatar-frame-inset, -8%);
  grid-area: 1 / 1;
  content: "";
  background-image: var(--persona-owner-avatar-frame-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateY(2.4%);
  pointer-events: none;
}

.persona_avatar_frame.avatar.persona_portrait_frame::after {
  background-image: var(--persona-owner-portrait-frame-image);
}

/* ==========================================================================
   Avatar Shapes
   ========================================================================== */

.persona_avatar_shape_oval,
.persona_avatar_shape_circle {
  border-radius: 50%;
}

.persona_avatar_shape_rounded_square {
  border-radius: 22%;
}

.persona_avatar_shape_square {
  border-radius: 0;
}

.persona_avatar_shape_hexagon {
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
}

.persona_avatar_shape_shield {
  clip-path: polygon(50% 0, 92% 14%, 86% 68%, 50% 100%, 14% 68%, 8% 14%);
}

.persona_avatar_shape_star {
  clip-path: polygon(
    50% 2%,
    61% 35%,
    96% 35%,
    68% 55%,
    79% 90%,
    50% 69%,
    21% 90%,
    32% 55%,
    4% 35%,
    39% 35%
  );
}

.persona_avatar_shape_heart {
  border-radius: 0;
  clip-path: none !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='black' d='M50 91C43 83 8 62 8 34C8 17 19 8 33 8C42 8 48 13 50 20C52 13 58 8 67 8C81 8 92 17 92 34C92 62 57 83 50 91Z'/%3E%3C/svg%3E")
    center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='black' d='M50 91C43 83 8 62 8 34C8 17 19 8 33 8C42 8 48 13 50 20C52 13 58 8 67 8C81 8 92 17 92 34C92 62 57 83 50 91Z'/%3E%3C/svg%3E")
    center / contain no-repeat !important;
}

/* ==========================================================================
   Avatar Sizes
   ========================================================================== */

.avatar_xs {
  width: 1.5rem !important;
  min-width: 1.5rem !important;
  height: 1.5rem !important;
  min-height: 1.5rem !important;
}

.avatar_sm {
  width: 2rem !important;
  min-width: 2rem !important;
  height: 2rem !important;
  min-height: 2rem !important;
}

.avatar_medium {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  height: 4.5rem !important;
  min-height: 4.5rem !important;
}

.avatar_large {
  width: 5rem !important;
  min-width: 5rem !important;
  height: 5rem !important;
  min-height: 5rem !important;
}

.avatar_xl {
  width: 6.5rem !important;
  min-width: 6.5rem !important;
  height: 6.5rem !important;
  min-height: 6.5rem !important;
}

/* Named Persona presentation variants. */
.avatar_persona_mini {
  width: 4rem !important;
  min-width: 4rem !important;
  height: 4rem !important;
  min-height: 4rem !important;
}

.avatar_persona_full {
  width: 6rem !important;
  min-width: 6rem !important;
  height: 6rem !important;
  min-height: 6rem !important;
}

/* RETIRED 2026-08-28: special is not an accepted Persona avatar renderer size.
.avatar_special {
  width: 6.5rem !important;
  min-width: 6.5rem !important;
  height: 6.5rem !important;
  min-height: 6.5rem !important;
}
*/

/* Fluid Full Persona portrait; its Widget owns the available dimensions. */
.avatar_portrait {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
}

/* ==========================================================================
   Avatar Context Sizes
   ========================================================================== */

/* The header uses the shared medium avatar component at header scale. */
.site_header .persona_avatar_frame.avatar_medium {
  width: 3rem;
  height: 3rem;
}