/* Avatars
 * Circular avatar component with size variants and initials fallback.
 * Used in chat, map pins, member lists, profile pages.
 */

@layer components {
  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    vertical-align: middle;
    flex-shrink: 0;
  }

  /* Size variants */
  .avatar--sm {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  .avatar--md {
    width: 40px;
    height: 40px;
    font-size: 0.875rem;
  }

  .avatar--lg {
    width: 80px;
    height: 80px;
    font-size: 1.5rem;
  }

  .avatar--xl {
    width: 120px;
    height: 120px;
    font-size: 2rem;
  }

  /* Initials fallback */
  .avatar__initials {
    background: color-mix(in oklch, var(--color-accent) 20%, var(--color-surface));
    color: var(--color-accent);
    font-weight: 600;
    letter-spacing: 0.02em;
    user-select: none;
  }

  /* Grid-sized avatar (matches preset image dimensions) */
  .avatar--grid {
    width: 56px;
    height: 56px;
    font-size: 1rem;
  }

  /* Preset avatar grid for selection */
  .avatar-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space);
    margin-block: var(--block-space);
  }

  .avatar-grid label {
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid transparent;
    transition: border-color 100ms ease;
    margin: 0;

    &:has(input:checked) {
      border-color: var(--color-link);
    }

    & input[type="radio"] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    & img {
      display: block;
      width: 56px;
      height: 56px;
      border-radius: 50%;
    }
  }
}