/* Hallmark · component: profile picture picker · genre: modern-minimal · theme: locked Plumbing
 * states: default · hover · focus · active · disabled · loading · error · success
 * pre-emit critique: P5 H5 E5 S5 R5 V4 */
:root {
  --af-avatar-ink: var(--color-plumbing-ink, #173747);
  --af-avatar-muted: var(--color-plumbing-muted, #526B79);
  --af-avatar-accent: var(--color-plumbing-accent, #087AA1);
  --af-avatar-surface: var(--color-plumbing-soft, #EDF4F7);
  --af-avatar-paper: var(--color-plumbing-paper, #F5FAFC);
  --af-avatar-error: var(--color-error, #A63838);
  --af-avatar-clear: transparent;
}
#wpforo #wpforo-wrap .af-avatar-picker,
.af-avatar-picker {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  max-width: 28rem;
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  border: 0;
  color: var(--af-avatar-ink);
  font-family: var(--font-ex-body, inherit);
}
#wpforo #wpforo-wrap .af-avatar-picker legend,
.af-avatar-picker legend {
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--af-avatar-ink);
  font-family: var(--font-ex-body, inherit);
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
}
#wpforo #wpforo-wrap .af-avatar-picker__hint,
.af-avatar-picker__hint {
  margin: .4rem 0 .75rem;
  color: var(--af-avatar-muted);
  font-size: .875rem;
  line-height: 1.5;
}
.af-avatar-picker__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
#wpforo #wpforo-wrap .af-avatar-picker__option,
.af-avatar-picker__option { display: block; position: relative; min-width: 0; margin: 0; cursor: pointer; }
.af-avatar-picker__option > input { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; opacity: 0; }
#wpforo #wpforo-wrap .af-avatar-picker .af-avatar-picker__picture,
.af-avatar-picker .af-avatar-picker__picture {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  aspect-ratio: 1;
  padding: .3rem;
  border: 2px solid var(--af-avatar-clear);
  border-radius: .65rem;
  background: var(--af-avatar-surface);
}
#wpforo #wpforo-wrap .af-avatar-picker__picture img,
.af-avatar-picker__picture img { display: block; width: 100%; height: auto; max-width: 4rem; max-height: 4rem; aspect-ratio: 1; margin: 0; padding: 0; border: 0; border-radius: 50%; object-fit: cover; object-position: center; }
#wpforo #wpforo-wrap .af-avatar-picker .af-avatar-picker__check,
.af-avatar-picker .af-avatar-picker__check { display: none; position: absolute; right: 0; bottom: 0; width: 1.125rem; height: 1.125rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--af-avatar-accent); color: var(--af-avatar-paper); font-size: .75rem; font-weight: 700; line-height: 1; }
#wpforo #wpforo-wrap .af-avatar-picker .af-avatar-picker__option > input:checked + .af-avatar-picker__picture,
.af-avatar-picker__option > input:checked + .af-avatar-picker__picture { border-color: var(--af-avatar-accent); }
#wpforo #wpforo-wrap .af-avatar-picker .af-avatar-picker__option > input:checked + .af-avatar-picker__picture .af-avatar-picker__check,
.af-avatar-picker__option > input:checked + .af-avatar-picker__picture .af-avatar-picker__check { display: flex; }
.af-avatar-picker__option > input:focus-visible + .af-avatar-picker__picture,
.af-avatar-picker__option.is-focus .af-avatar-picker__picture { outline: 2px solid var(--af-avatar-accent); outline-offset: 3px; }
.af-avatar-picker__option:active .af-avatar-picker__picture,
.af-avatar-picker__option.is-active .af-avatar-picker__picture { transform: translateY(1px); }
.af-avatar-picker__option > input:disabled + .af-avatar-picker__picture,
.af-avatar-picker__option.is-disabled .af-avatar-picker__picture,
.af-avatar-picker:disabled { opacity: .5; cursor: not-allowed; }
#wpforo #wpforo-wrap .af-avatar-picker__native,
.af-avatar-picker__native { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; margin: .75rem 0 0; color: var(--af-avatar-ink); font-size: .875rem; line-height: 1.3; cursor: pointer; }
.af-avatar-picker__native input { accent-color: var(--af-avatar-accent); flex: 0 0 auto; margin: 0; }
.af-avatar-picker__native input:focus-visible { outline: 2px solid var(--af-avatar-accent); outline-offset: 3px; }
#wpforo #wpforo-wrap .af-avatar-picker__selection,
.af-avatar-picker__selection { min-height: 1.5em; margin: .6rem 0 0; color: var(--af-avatar-muted); font-size: .875rem; line-height: 1.5; }
.af-avatar-picker[data-state="loading"] .af-avatar-picker__grid { opacity: .65; }
.af-avatar-picker[data-state="error"] .af-avatar-picker__selection { color: var(--af-avatar-error); }
.af-avatar-picker[data-state="error"] .af-avatar-picker__grid { outline: 2px solid var(--af-avatar-error); outline-offset: 3px; border-radius: .65rem; }
.af-avatar-picker[data-state="success"] .af-avatar-picker__selection { color: var(--af-avatar-ink); }
@media (hover: hover) {
  .af-avatar-picker__option:hover .af-avatar-picker__picture,
  .af-avatar-picker__option.is-hover .af-avatar-picker__picture { background: var(--af-avatar-paper); }
}