.ui-alert {
  display: grid;
  gap: var(--space-1);
  border: var(--border-width) solid var(--color-info-border);
  border-radius: var(--radius-md);
  background: var(--color-info-bg);
  color: #173f66;
  padding: var(--space-4);

  .ui-alert__title {
    font-size: var(--font-size-sm);
    font-weight: 700;
  }

  .ui-alert__body {
    color: inherit;
    font-size: var(--font-size-sm);
  }

  &.ui-alert--success {
    border-color: var(--color-success-border);
    background: var(--color-success-bg);
    color: var(--color-success);
  }

  &.ui-alert--warning {
    border-color: var(--color-warning-border);
    background: var(--color-warning-bg);
    color: var(--color-warning);
  }

  &.ui-alert--error {
    border-color: var(--color-error-border);
    background: var(--color-error-bg);
    color: var(--color-error);
  }
}