.banner {
  padding: 0.75rem 1rem;
  border: 1px solid light-dark(var(--color-gray-200), var(--color-zinc-700));
  border-radius: 8px;

  background: linear-gradient(
    to bottom,
    light-dark(var(--color-gray-100), var(--color-zinc-800)) 0%,
    light-dark(var(--color-gray-50), var(--color-zinc-900)) 100%
  );
  box-shadow: 0 1px 1px
      light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.1)) inset,
    0 1px 3px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
  color: light-dark(var(--color-gray-800), var(--color-zinc-200));
  font-size: 13px;
  line-height: 1.4;
}

.banner--flat {
  background: light-dark(var(--color-gray-50), var(--color-zinc-900));
  box-shadow: none;
  border-color: light-dark(var(--color-gray-300), var(--color-zinc-700));
}

.banner--danger {
  background: light-dark(var(--color-red-300), var(--color-red-200));
  color: light-dark(var(--color-red-600), var(--color-red-900));
}