.container {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: var(--spacing-xxs);
  color: var(--color-fg-subtle);
  font-size: var(--font-size-sm);
}

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

.icon {
  display: flex;
}

.icon svg {
  height: var(--icon-size-md);
  width: auto;
}

.container[data-size='xs'] .icon svg {
  height: var(--icon-size-sm);
}

.success {
  color: var(--color-status-success);
}

.error {
  color: var(--color-status-error);
}

.warning {
  color: var(--color-status-warning);
}

.info {
  color: var(--color-status-info);
}

.brand {
  color: var(--color-fg-on-brand);
}

.accent {
  color: var(--color-accent);
}