.alert {
  border-radius: var(--border-radius-sm);
  margin-bottom: 2rem;
  padding: 1rem;
}

.alert-content {
  display: flex;
  gap: 10px;

  b {
    font-weight: 600;
  }
}

.alert-content-text {
  text-box: trim-both text;
}

.alert-content-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;

  svg {
    width: 100%;
    height: 100%;
  }
}

.alert-error {
  background-color: var(--error-color-100);
  color: var(--error-color);
  display: none;
}

.alert-success {
  background-color: var(--success-color-100);
  color: var(--success-color);
  display: none;
}

.alert-info {
  background-color: var(--info-color-100);
  color: var(--info-color);
}

.alert-warning {
  background-color: var(--warning-color-100);
  color: var(--warning-color);
}

.alert-danger {
  background-color: var(--danger-color-100);
  color: var(--danger-color);
}

.summary {
  padding: 32px;
  border-radius: var(--border-radius-sm);

  /* background:
    radial-gradient(
      circle at 70% 120%,
      rgba(0, 255, 158, 0.1),
      transparent 60%
    ),
    linear-gradient(
      to top,
      rgba(14, 113, 228, 0.1) 0%,
      rgba(14, 113, 228, 0.1) 100%
    ); */
  background:
    radial-gradient(
      circle at 70% 120%,
      rgba(2, 253, 157, 0.1),
      transparent 60%
    ),
    linear-gradient(to top, rgb(235 240 248) 0%, rgb(235 240 248) 100%);
  margin-bottom: var(--block-space-sm);

  .summary-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 16px;
  }

  .summary-list {
    margin-left: 18px;
  }
}