/*
 * Printing a tool page.
 *
 * What a person prints one of these for is the output: the generated config, the snippet, the table of
 * results. Everything that exists to navigate or to interact is noise on paper, and a dark terminal
 * panel is a page of wasted ink, so the output prints as black text on white with its border kept.
 *
 * Links print with their destination after them, because a printed link that only says "the docs" is
 * a dead end.
 */

@media print {
	/* Navigation, controls and anything that only does something when clicked. */
	.bwp-toolbar,
	.bwp-share,
	.bwp-theme-toggle,
	.bwp-spotlight,
	.bwp-newsletter,
	.bwp-tool__form,
	.bwp-playground__actions,
	.bwp-playground__frame,
	.bwp-term-btn,
	.bwp-terminal__actions,
	.bwp-btn,
	.bwp-doc-feedback,
	.bwp-category-pills,
	.wp-block-bucketwp-site-header,
	.wp-block-bucketwp-site-footer,
	.bwp-skip-link {
		display: none !important;
	}

	:root,
	body {
		background: #fff !important;
		color: #000 !important;
	}

	/* The output panel is the reason the page is being printed. */
	.bwp-output,
	.bwp-terminal {
		background: #fff !important;
		border: 1px solid #999 !important;
		color: #000 !important;
	}

	.bwp-output__code,
	.bwp-output__code code,
	.bwp-terminal__tab {
		background: transparent !important;
		color: #000 !important;
		max-height: none !important;
		overflow: visible !important;
		white-space: pre-wrap !important;
		word-break: break-word;
	}

	/* A printed link has to carry its destination, except where the text already is one. */
	main a[href^="http"]::after {
		content: " (" attr( href ) ")";
		font-size: 11px;
		word-break: break-all;
	}

	main a[href^="#"]::after,
	main a[href^="mailto:"]::after {
		content: "";
	}

	/* Keep a heading with what it introduces, and never break inside a snippet. */
	h1, h2, h3 {
		break-after: avoid-page;
	}

	pre, figure, table {
		break-inside: avoid;
	}

	@page {
		margin: 16mm;
	}
}