/* pi-demos/assets/css/demo-browser.css */

/* The demo browser on the front page: the demo plays in the stage; the list beside it picks
   which one */
.demo-browser {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 220px;
	gap: var( --pi-space-lg );
	align-items: start;
	margin: var( --pi-space-lg ) 0;
}

/* The demo runs in its own document and letterboxes itself inside this frame. The frame and the
   bars beside the demo (demo-embed.css) take the colour of the page, so only the demo stands
   out. */
.demo-browser__frame {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	border: 0;
	background: var( --pi-color-panel );
}

/* Holds the frame and the hint drawn over it */
.demo-browser__screen {
	position: relative;
}

/* The demo has the keyboard: keys go to it and not to the page. The outline is a blue halfway
   between the two accent blues: the light one glares and the dark one does not show on the
   panel. A browser without color-mix keeps the light one. */
.demo-browser__screen--playing .demo-browser__frame {
	outline: 2px solid var( --pi-accent-blue );
	outline: 2px solid color-mix(
		in srgb, var( --pi-accent-blue ), var( --pi-accent-blue-dark )
	);
	outline-offset: 2px;
}

/* Dims the demo until it has the keyboard. A click goes through it to the demo, which is what
   gives the demo the keyboard. A browser without color-mix gets the darker shadow colour. */
.demo-browser__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --pi-color-shadow );
	background: color-mix( in srgb, var( --pi-color-bg ) 75%, transparent );
	pointer-events: none;
}

/* Setting display would otherwise show the hidden overlay */
.demo-browser__overlay[hidden] {
	display: none;
}

/* The demo shows through the label too; its text stays solid so it can be read. A browser
   without color-mix gets a solid label. */
.demo-browser__hint {
	margin: 0;
	padding: var( --pi-space-sm ) var( --pi-space-md );
	background: var( --pi-accent-red );
	background: color-mix( in srgb, var( --pi-accent-red ) 50%, transparent );
	color: var( --pi-color-text-bright );
	font-weight: bold;
	white-space: nowrap;
}

/* Takes the place of the list on a narrow screen */
.demo-browser__picker {
	display: none;
}

.demo-browser__select {
	display: block;
	width: 100%;
	padding: var( --pi-space-sm ) var( --pi-space-md );
	border: 0;
	border-left: var( --pi-space-xs ) solid var( --pi-nav-active );
	background: var( --pi-accent-red );
	color: var( --pi-color-text-bright );
	font-family: var( --pi-font-family );
	font-size: var( --pi-font-size );
	font-weight: bold;
	cursor: pointer;
}

.demo-browser__select:focus-visible {
	outline: 2px dotted var( --pi-color-text-bright );
	outline-offset: 2px;
}

/* The open list is drawn by the browser, which would otherwise pick its own colours */
.demo-browser__select option {
	background: var( --pi-color-bg );
	color: var( --pi-color-text );
}

.demo-browser__description {
	margin: var( --pi-space-md ) 0 var( --pi-space-xs );
}

/* The Pi.js version of the demo, set like the date of a post in the theme's listings */
.demo-browser__version {
	margin: 0 0 var( --pi-space-md );
	font-size: 0.875rem;
	opacity: 0.8;
}

.demo-browser__actions {
	margin: 0;
}

/* The links under the demo are blue, so the red buttons stay the main ones of the page */
.demo-browser__actions .btn-retro {
	background-color: var( --pi-accent-blue-dark );
}

.demo-browser__actions .btn-retro:hover {
	background-color: var( --pi-accent-blue );
}

/* The button style sets display, which would otherwise show a hidden link */
.demo-browser__code[hidden] {
	display: none;
}

/* Named through the browser so these win over the theme's content list styles */
.demo-browser .demo-browser__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.demo-browser .demo-browser__list li {
	margin: 0 0 var( --pi-space-sm );
}

.demo-browser__item {
	display: block;
	width: 100%;
	padding: var( --pi-space-sm ) var( --pi-space-md );
	border: 0;
	border-left: var( --pi-space-xs ) solid transparent;
	background: transparent;
	color: var( --pi-color-text );
	font-family: var( --pi-font-family );
	font-size: var( --pi-font-size );
	font-weight: bold;
	text-align: left;
	cursor: pointer;
}

.demo-browser__item:hover {
	background: var( --pi-accent-dark-red );
	color: var( --pi-color-text-bright );
}

.demo-browser__item:focus-visible {
	outline: 2px dotted var( --pi-color-text-bright );
	outline-offset: 2px;
}

.demo-browser__item[aria-pressed="true"] {
	border-left-color: var( --pi-nav-active );
	background: var( --pi-accent-red );
	color: var( --pi-color-text-bright );
}

@media (max-width: 768px) {
	.demo-browser {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* The dropdown above the stage picks the demo, so the list is not needed */
	.demo-browser__picker {
		display: block;
	}

	.demo-browser__nav {
		display: none;
	}
}