.container {
  display: flex;
  align-items: center;
  gap: map.get($spacing-scale, 'sm');
  padding: map.get($spacing-scale, 'sm') map.get($spacing-scale, 'md');
  border-radius: map.get($radius, 'md');
  @include body-small-regular;

  svg {
    flex-shrink: 0;
  }
}

.info {
  background-color: rgba(59, 130, 246, 0.06);
  color: var(--color-text-secondary);

  svg {
    color: var(--color-semantic-info);
  }
}

.warning {
  background-color: rgba(245, 158, 11, 0.06);
  color: var(--color-text-secondary);

  svg {
    color: var(--color-semantic-warning);
  }
}

.danger {
  background-color: rgba(239, 68, 68, 0.06);
  color: var(--color-text-secondary);

  svg {
    color: var(--color-semantic-danger);
  }
}