@layer demo, meta;


@font-palette-values --kung-fury {
  font-family: "Monaspace";
  override-colors:
    0 hsl(225 100% 40%), /* curlies and tags */
    1 hsl(250 100% 80%), /* ? */
    2 hsl(225 100% 40%), /* function */
    3 hsl(225 100% 40%), /* ? */
    4 hsl(270 50% 40%),  /* () */
    5 hsl(210 40% 2%),   /* property name */ 
    6 hsl(210 10% 30%),  /* ? */
    7 hsl(327 100% 54%)  /* numbers */
  ;
}

@layer meta {
	@layer metabox {
		#metabox {
			position: fixed;
			bottom: 1rem;
			right: 1rem;

			display: flex;
			flex-direction: column;
			gap: 1rem;
			font-size: 1.2rem;
			z-index: 2147483647;
		}

		/* Hide all but infobox when embedded */
		.is-embed #metabox :is(#version-selector, #version-selector-popover, .button[href="/"]) {
			display: none;
		}

		#metabox :is(button, .button) {
			font-size: 2.5rem;
			line-height: 1;
			display: block;

			border: 0;
			background: transparent;
			padding: 0;
			cursor: pointer;

			opacity: 0.7;
			transition: opacity 0.25s ease-in-out;
			border-radius: 0.25rem;
			text-decoration: none;
		}

		#metabox :is(button, .button):active,
		#metabox :is(button, .button):focus {
			outline: 2px dashed rgb(0 0 0 / 0.5);
			outline-offset: 0.25rem;
		}

		#metabox > :is(button, .button):hover {
			opacity: 1 !important;
		}

		@keyframes pulsate {
			80% {
				opacity: 1;
			}
			85% {
				opacity: 1;
			}
			90% {
				opacity: 0;
			}
			95% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}

		#metabox > button.animated {
			animation: 5s pulsate ease-in alternate infinite;
		}

		#metabox > button.animated:hover,
		#metabox > button.animated:focus,
		#metabox:has(dialog[open]) > button.animated {
			animation: none;
		}

		#metabox > button[disabled] {
			cursor: not-allowed;
			outline: none !important;
		}
	}

	@layer infobox {
		@layer ui {
			#infobox[open] {
				box-sizing: border-box;
				margin: 10vh auto;
				width: 80vw;
				max-width: 90ch;
				max-height: 80vh;
				padding: 2rem;
				overscroll-behavior: contain;

				background: #eee;
				border: 0.25rem solid lightblue;
				overflow: auto;

				position: fixed;
			}

			#infobox::backdrop {
				background-color: rgb(0 0 0 / 0.5);
			}

			#infobox > :first-child {
				margin-top: 0;
			}
			#infobox > :last-child {
				margin-bottom: 0;
			}

			#infobox-close {
				/* Also inherits from `#metabox > button` */
				position: absolute;
				right: 0.5rem;
				top: 0.5rem;

				filter: grayscale();
			}
			#infobox-close:hover,
			#infobox-close:focus {
				filter: none;
			}
		}

		@layer code {
			#infobox pre {
				border: 1px solid #dedede;
				padding: 1em;
				background: #f7f7f7;
				font-family: "Monaspace", monospace;
			  font-palette: --kung-fury;
				overflow-x: auto;
				border-left: 0.4em solid cornflowerblue;
				tab-size: 2;
			}

			#infobox code {
				font-family: "Monaspace", monospace;
			  font-palette: --kung-fury;
			}

			#infobox code:not(pre code),
			#infobox output:not(code:has(output) output) {
				background: #f7f7f7;
				border: 1px solid rgb(0 0 0 / 0.2);
				padding: 0.1rem 0.3rem;
				margin: 0.1rem 0;
				border-radius: 0.2rem;
				display: inline-block;
			}
		}
	}

	@layer popover {
		[popovertarget][data-activeversion] {
			position: relative;
		}
		[popovertarget][data-activeversion]::after {
			content: attr(data-activeversion);
			position: absolute;
			bottom: 0;
			right: 0;
			z-index: 2;
			font-size: 0.8rem;
			font-weight: bold;
			padding: 0.1em;
			background-color: #1874bc;
			color: white;
			font-family: 'Courier New', Courier, monospace;
			font-variant-numeric: tabular-nums;
			display: block;
			min-width: 2ex;
			line-height: 1;
		}
		[popovertarget][data-activeversion][data-activelang="js"]::after {
			background-color: #f7df1e;
			color: #333;
		}
		[popovertarget] {
			anchor-name: --my-anchor-popover;
		}
		[popover] {
			inset: auto;
			width: auto;
			padding: 1rem 1rem 2rem 1rem;
			overflow: unset;
			bottom: calc(anchor(top) - 3rem);
			right: calc(anchor(right) + 3rem);
		}

		.no-anchor [popover] {
			min-width: 20rem;
			/* transform: translate(calc(-100% - 1rem), calc(-100% + 1rem)); */
			z-index: 2147483647;
			bottom: 10rem;
			right: 4.5rem;
		}

		[popover] > :first-child {
			margin-top: 0;
		}
		[popover] > :last-child {
			margin-bottom: 0;
		}

		[popover] [data-lang]::before {
			content: attr(data-lang);
			font-size: 0.8rem;
			font-weight: bold;
			padding: 0.1em;
			background-color: blue;
			color: white;
			font-family: 'Courier New', Courier, monospace;
			font-variant-numeric: tabular-nums;
			background-color: #1874bc;
			display: inline-block;
			width: 2rem;
			text-align: center;
			vertical-align: middle;
			margin-right: 0.2rem;
		}
		[popover] [data-lang="js"]::before {
			background-color: #f7df1e;
			color: #333;
		}

		[popover] [data-selected] {
			font-weight: 700;
		}
	}

	@layer warning {
		.warning {
			box-sizing: border-box;
			padding: 1em;
			margin: 1em 0;
			border: 1px solid #ccc;
			background: rgba(255 255 205 / 0.8);
		}

		.warning > :first-child {
			margin-top: 0;
		}

		.warning > :last-child {
			margin-bottom: 0;
		}

		.warning a {
			color: blue;
		}
		.warning--info {
			border: 1px solid #123456;
			background: rgb(205 230 255 / 0.8);
		}
		.warning--alarm {
			border: 1px solid red;
			background: #ff000010;
		}

		@supports (animation-timeline: view()) {
			.warning:not([data-bug]) {
				display: none;
			}
		}

		@supports(animation-range: 0vh 90vh) {
			.warning[data-bug="1427062"] {
				display: none;
			}
		}
	}
}