@layer components {
  .blitz-avatar {
    --avatar-size: 2.25rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 999px;
    background: #6b7280;
    color: #fff;
    font-size: calc(var(--avatar-size) * 0.38);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
  }

  .blitz-avatar--sm { --avatar-size: 1.75rem; }
  .blitz-avatar--lg { --avatar-size: 2.75rem; }
  .blitz-avatar--xl { --avatar-size: 5rem; }

  /* An uploaded picture: same circle, the image fills it. */
  .blitz-avatar--picture {
    object-fit: cover;
  }

  /* Profile form: current picture beside the upload control. */
  .blitz-avatar-field {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }

  .blitz-avatar-field-controls {
    flex: 1 1 auto;
    min-width: 0;
  }

  .blitz-avatar-field-controls .blitz-form-field {
    margin-bottom: 0.5rem;
  }

  .blitz-avatar-field-controls .blitz-form-check {
    margin-top: 0.75rem;
  }
}