.dx-avatar-group {
  display: inline-flex;
  align-items: center;
  -webkit-padding-end: 0.5rem;
          padding-inline-end: 0.5rem;
}

.dx-avatar-group .dx-avatar {
  -webkit-margin-end: -0.5rem;
          margin-inline-end: -0.5rem;
}

.dx-avatar-group .dx-avatar[size="0"], .dx-avatar-group .dx-avatar[size="px"], .dx-avatar-group .dx-avatar[size="0.5"], .dx-avatar-group .dx-avatar[size="1"], .dx-avatar-group .dx-avatar[size="1.5"], .dx-avatar-group .dx-avatar[size="2"], .dx-avatar-group .dx-avatar[size="2.5"] {
  -webkit-margin-end: -0.25rem;
          margin-inline-end: -0.25rem;
}

dx-avatar {
  display: contents;
}

.dx-avatar {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.dx-avatar .dx-avatar__frame {
  background-color: var(--surface-bg);
  block-size: 100%;
  inline-size: 100%;
}

.dx-avatar .dx-avatar__frame, .dx-avatar .dx-avatar__ring {
  border-radius: 9999px;
}

.dx-avatar[data-variant="square"] .dx-avatar__frame, .dx-avatar[data-variant="square"] .dx-avatar__ring {
  border-radius: 0.25rem;
}

.dx-avatar .dx-avatar__status-icon {
  position: absolute;
  inset-block-end: 0px;
  inset-inline-end: 0px;
}

.dx-avatar .dx-avatar__ring {
  position: absolute;
  inset: 0px;
  border-width: var(--dx-line-2);
  border-color: var(--surface-bg);
}

.dx-avatar[data-status="current"] .dx-avatar__ring {
  border-color: var(--dx-currentCursor);
}

.dx-avatar[data-status="active"] .dx-avatar__ring {
  border-color: var(--dx-successCursor);
}

.dx-avatar[data-status="error"] .dx-avatar__ring {
  border-color: var(--dx-errorCursor);
}

.dx-avatar[data-status="warning"] .dx-avatar__ring {
  border-color: var(--dx-warningCursor);
}

.dx-avatar[data-status="internal"] .dx-avatar__ring {
  border-color: var(--dx-internalCursor);
}

.dx-avatar[data-status="inactive"] .dx-avatar__ring {
  border-color: var(--dx-separator);
}

@keyframes halo-pulse {

  0% {
    opacity: 0.3;
  }

  5% {
    opacity: 1;
  }

  100% {
    opacity: 0.3;
  }
}

.dx-avatar[data-animation="pulse"] .dx-avatar__ring {
  animation: halo-pulse 2s ease-out infinite;
}

.dx-avatar[data-state-loading-status="loaded"] .dx-avatar__fallback-text, .dx-avatar[data-state-loading-status="loaded"] .dx-avatar__status-icon {
  display: none;
}