/* V7 avatar contract. Future components use am-avatar and the size modifiers. */
:where(.am-v7, .am-asset-dialog) {
  --am-avatar-sm: 32px;
  --am-avatar-md: 40px;
  --am-avatar-lg: 48px;
  --am-avatar-editor: 80px;
}
:is(.am-v7, .am-asset-dialog) :is(.am-avatar, .avatar, .table-avatar, .inventory-avatar, .asset-preview-avatar, .asset-label-assignee-avatar) {
  --am-avatar-size: var(--am-avatar-sm);
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  width: var(--am-avatar-size);
  height: var(--am-avatar-size);
  min-width: var(--am-avatar-size);
  min-height: var(--am-avatar-size);
  max-height: var(--am-avatar-size);
  max-width: var(--am-avatar-size);
  flex: 0 0 var(--am-avatar-size);
  align-self: var(--am-avatar-align, center);
  aspect-ratio: 1;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: #e9eef6;
  color: #385277;
  font: 500 calc(var(--am-avatar-size) * .35)/1 system-ui, sans-serif;
  text-align: center;
  vertical-align: middle;
}
:is(.am-v7, .am-asset-dialog) :is(.am-avatar--md, .topbar-user .avatar, .user-menu-head .avatar) { --am-avatar-size: var(--am-avatar-md); }
:is(.am-v7, .am-asset-dialog) :is(.am-avatar--lg, .avatar.lg, .asset-preview-avatar-lg, .single-flow-selected-person .avatar) { --am-avatar-size: var(--am-avatar-lg); }
:is(.am-v7, .am-asset-dialog) .am-avatar--editor { --am-avatar-size: var(--am-avatar-editor); }
:is(.am-v7, .am-asset-dialog) :is(.am-avatar, .avatar, .table-avatar, .inventory-avatar, .asset-preview-avatar, .asset-label-assignee-avatar) > img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
}