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

  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--warning {
  background: light-dark(
    var(--color-amber-50),
    color-mix(in oklab, var(--color-amber-950) 68%, var(--color-zinc-900))
  );
  color: light-dark(var(--color-amber-700), var(--color-amber-200));
  border-color: light-dark(var(--color-amber-200), var(--color-amber-900));
}

.banner--warning .link {
  color: light-dark(var(--color-amber-800), var(--color-amber-100));
  text-decoration: underline;
  text-underline-offset: 2px;

  &:hover {
    color: light-dark(var(--color-amber-900), var(--color-amber-50));
  }
}

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

.banner--danger .link {
  color: light-dark(var(--color-red-700), var(--color-red-100));
  text-decoration: underline;
  text-underline-offset: 2px;

  &:hover {
    color: light-dark(var(--color-red-800), var(--color-red-50));
  }
}

.banner__title {
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: light-dark(var(--color-gray-500), var(--color-zinc-300));
  letter-spacing: 0.025em;
  font-weight: 500;
}

.banner__title--danger {
  color: light-dark(var(--color-red-600), var(--color-red-200));
}