/* Keyframes which manage the tray sliding in and out by setting its left position. */
@keyframes slideIn {
  0% { left: 100% }
  100% { left: 40% }
}
@keyframes slideOut {
  0% { left: 40% }
  100% { left: 100% }
}

/* Styling and layout for the slide-in tray itself. */
section#tray {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100%;
	width: 60%;
	height: 100%;
	background-color: var(--pane-bg);
	border-left: var(--pane-border) 1px solid;
	z-index: 2;

	display: flex;	/* Use flebox here. Tabs at the top, tab content filling the remaining container (with scrollbars) ... */
  min-height: 100%;
  flex-direction: column;
	overflow-x: hidden;
	overflow-y: hidden;
}
	/* These two classes are applied to the tray to trigger its animations in and out. */
	section#tray.open {
		animation: slideIn 0.5s forwards;
	}
	section#tray.closed {
		animation: slideOut 0.5s forwards;
	}

	/* Tray content invokes flex and re-instates the Y scrollbar which was suppressed on the tray itself. */
	section#tray #_tray {
		overflow-y: auto;
		display: flex;
	}

	/* The tray's tabs go in the top portion of the tray. */
	section#tray div.tabs {
		padding: 1em 1em 0em;
		background-color: var(--pane-bg);
	}
		/* Put the toolbar (close button) in the top right of the slide-in tray. */
		section#tray div.tabs div.toolbar {
			position: absolute;
			top: 1em;
			right: 0em;
			text-align: right;
			z-index: 2;
		}
		section#tray div.tabs div.toolbar a {
			padding: 0.5em;
		}

/* Restore relative position to the commands tray so its absolutely positioned content will scroll. */
div#_tray-commands {
	position: relative;
	padding: 0 2em 2em;
} 
	/* Rules are thin and spaced out. */
	div#_tray-commands hr {
		margin: 1.5em 0;
		border-bottom: none;
	}

	/* The command list puts the commands on the left ... */
	div#_tray-commands ul {
		list-style-type: none;
		padding-inline-start: 0em;
		line-height: 1.4em;
	}
	div#_tray-commands li {
		color: var(--button-alt-fg);
	}

	/* ... and their short descriptions indented on the right. */
	div#_tray-commands .help-desc {
		position: absolute;
		display: inline-block;
		left: 9em;	
	}

	/* Command parameters get softer styling. */
	div#_tray-commands .params {
		color: var(--button-alt-fg);
	}

	/* Keep all the help texts nicely aligned. */
	div#_tray-commands p {
		margin: 0.5em 0;
		line-height: 1.25em;
	}
	div#_tray-commands p.command {
		font-size: 150%;
		margin: 0;
		padding-left: unset;
	}
	div#_tray-commands > div.text p {
		margin-bottom: 1em;
	}
	div#_tray-commands p.see-also {
		color: var(--button-alt-fg);
		margin: 1em 0.0 0.25em;
	}
	div#_tray-commands ul.see-also {
		margin-block-start: 0;
	}
	div#_tray-commands ul.see-also li {
		position: relative;
	}
	div#_tray-commands ul.see-also li a:first-child {
		font-weight: bold;
	}
	div#_tray-commands ul.see-also li a:nth-child(2) {
		position: absolute;
		display: block;
		margin-left: 6em;
		top: 0;
	}

	div#_tray-commands div.example {
		display: flex;
		gap: 3em;
		margin: 0.75em 1em 0.5em 0;
		padding: 0.5em 1em 1em;
		background-color: var(--example-bg);
		border: 1px solid var(--example-border);
		border-radius: 3px;
		width: fit-content;
	}
		div#_tray-commands div.example>div{
			font-weight: bold;
		}
		div#_tray-commands div.example>div>pre {
			font-weight: initial;
			font-family: monospace;
			border-top: 1px solid #aaa;
			border-width: 1px 0 0;
			margin-top: 0.25em;
			margin-left: -0.5em;
			padding: 0.25em 2em 0 0.5em;
		}

/* Variables and About are slabs of text so get slabby, texty stylings. */
div#_tray-variables,
div#_tray-patterns,
div#_tray-functions,
div#_tray-about {
	padding: 1em;
	line-height: 1.4em;
}
	div#_tray-about h1 {
		margin: 0;
	}

	/* Stop that image getting too wide. */
	div#_tray-about img {
		width: 10em;
	}