.container {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-xs);
  white-space: nowrap;
  font-family: var(--font-family);
  color: inherit;
  line-height: 1;
}

.container[data-size='2xs'] {
  gap: var(--spacing-xxs);
  font-size: var(--font-size-xs);
}

.container[data-size='xs'] {
  gap: var(--spacing-xxs);
}

.circle {
  position: relative;
  display: inline-block;
  inline-size: var(--component-size-sm);
  block-size: var(--component-size-sm);
  border-radius: var(--border-radius-round);
  flex-shrink: 0;
  transition:
    background-color var(--transition-fast) var(--ease-standard),
    box-shadow var(--transition-fast) var(--ease-standard),
    opacity var(--transition-normal) var(--ease-standard);
}

/* Density modifier (optional) */
.container[data-density='compact'] .circle {
  inline-size: calc(var(--component-size-xs) - 4px);
  block-size: calc(var(--component-size-xs) - 4px);
}

/* Status variants */
.neutral {
  background-color: var(--color-neutral);
}
.brand {
  background-color: var(--color-brand);
}
.accent {
  background-color: var(--color-accent);
}
.success {
  background-color: var(--color-status-success);
}
.warning {
  background-color: var(--color-status-warning);
}
.error {
  background-color: var(--color-status-error);
}
.info {
  background-color: var(--color-status-info);
}

.brand[data-glow='true'] {
  box-shadow: 0 0 0 2px var(--color-bg-selected);
}

.accent[data-glow='true'] {
  box-shadow: 0 0 0 2px var(--color-accent-bg);
}

.success[data-glow='true'] {
  box-shadow: 0 0 0 2px var(--color-status-success-bg);
}
.warning[data-glow='true'] {
  box-shadow: 0 0 0 2px var(--color-status-warning-bg);
}
.error[data-glow='true'] {
  box-shadow: 0 0 0 2px var(--color-status-error-bg);
}
.info[data-glow='true'] {
  box-shadow: 0 0 0 2px var(--color-status-info-bg);
}

.circle[data-size='2xs'] {
  inline-size: var(--component-size-2xs);
  block-size: var(--component-size-2xs);
}

.circle[data-size='xs'] {
  inline-size: var(--component-size-xxs);
  block-size: var(--component-size-xxs);
}

.circle[data-size='sm'] {
  inline-size: 14px;
  block-size: 14px;
}

.circle[data-size='md'] {
  inline-size: 18px;
  block-size: 18px;
}

.circle[data-muted='true'] {
  opacity: 0.4;
}

.circle[data-size='lg'] {
  inline-size: 22px;
  block-size: 22px;
}

.circle[data-pulse='true']::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: inherit;
  animation: circle-pulse 1.6s ease-out infinite;
  pointer-events: none;
}

@keyframes circle-pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  60% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .circle[data-pulse='true']::after {
    animation: none;
  }
}