.svg-parent {
	overflow-x: scroll;
	overflow-y: clip;

	label {
		display: inline-flex;
		gap: 10px;
		cursor: pointer;
	}

	>svg {
		height: inherit;
		transition: height .2s;

		@media (prefers-color-scheme: light) {
			filter: invert(100);
		}
	}

	pre {
		display: none;
		color: #f8f8f2;
		background-color: #272822;
		-moz-tab-size: 4;
		-o-tab-size: 4;
		tab-size: 4;
	}

	label {
		input {
			display: none;
		}

		&:has(:checked) {
			.on {
				display: inline;
			}

			.off {
				display: none;
			}
		}

		&:not(:has(:checked)) {
			.on {
				display: none;
			}

			.off {
				display: inline;
			}
		}
	}

	&:has(.toggle-mermaid:checked) {
		>svg {
			display: none;
		}

		pre {
			display: inline-block;
		}
	}
}