.sx-alert-card {
  display: block;
}

.sx-alert-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.sx-alert-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
}

.sx-alert-icon svg {
  width: 19px;
  height: 19px;
}

.sx-alert-card.success .sx-alert-icon {
  color: var(--color-success);
  background: rgba(34, 197, 94, 0.13);
}

.sx-alert-card.warning .sx-alert-icon {
  color: var(--color-warning);
  background: rgba(245, 158, 11, 0.13);
}

.sx-alert-card.danger .sx-alert-icon {
  color: var(--color-danger);
  background: rgba(239, 68, 68, 0.13);
}

.sx-alert-card.info .sx-alert-icon {
  color: var(--color-info);
  background: rgba(96, 165, 250, 0.13);
}

.sx-alert-content strong {
  font-size: 13px;
}

.sx-alert-content p {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.sx-alert-content small {
  display: block;
  margin-top: 7px;
  color: var(--color-text-muted);
  font-size: 10px;
}