/***********************************************************************************************************************

	css/ui-bar.css

	Copyright © 2013–2024 Thomas Michael Edwards <thomasmedwards@gmail.com>. All rights reserved.
	Use of this source code is governed by a BSD 2-clause "Simplified" License, which may be found in the LICENSE file.

***********************************************************************************************************************/

/* Core styles patches. */
#story {
	margin-left: 20em;
	transition: margin-left 200ms ease-in;
}
#ui-bar.stowed ~ #story {
	margin-left: 4.5em;
}
@media screen and (max-width: 1136px) {
	#story {
		margin-left: 19em;
	}
	#ui-bar.stowed ~ #story {
		margin-left: 3.5em;
	}
}
/*
	At narrow viewport widths, set `#story{margin-left}` equal to the value
	of `#ui-bar.stowed~#story{margin-left}`, so that `#ui-bar` will side
	over top of `#story` when unstowed, rather than shoving it over.
*/
@media screen and (max-width: 768px) {
	#story {
		margin-left: 3.5em;
	}
}

/* Base styles. */
#ui-bar {
	background-color: #222;
	border-right: 1px solid #444;
	height: 100%;
	left: 0;
	margin: 0;
	padding: 0;
	position: fixed;
	text-align: center;
	top: 0;
	transition: left 200ms ease-in;
	width: 17.5em;
	z-index: 50;
}
#ui-bar.stowed {
	left: -15.5em;
}
#ui-bar-tray {
	position: absolute;
	top: 0.2em;
	left: 0;
	right: 0;
}
#ui-bar-body {
	height: calc(100% - 2.5em);
	line-height: 1.5;
	margin: 2.5em 0;
	overflow: auto;
	padding: 0 1.5em;
}
#ui-bar.stowed #ui-bar-history,
#ui-bar.stowed #ui-bar-body {
	visibility: hidden;
	transition: visibility 200ms step-end;
}
#ui-bar a {
	text-decoration: none;
}
#ui-bar hr {
	border-color: #444;
}
#ui-bar-tray button {
	color: #eee;
	background-color: transparent;
	border: 1px solid #444;
}
#ui-bar-tray button:hover {
	background-color: #444;
	border-color: #eee;
}
#ui-bar-tray button:disabled {
	color: #444;
	background-color: transparent;
	border-color: #444;
}
button#ui-bar-toggle {
	border-right: none;
	position: absolute;
	right: 0;
	top: 0;
}
#ui-bar-history {
	margin: 0 auto;
}
#ui-bar-history button:not(:first-child) {
	margin-left: 1.2em;
}
#ui-bar-body > :not(:first-child) {
	margin-top: 2em;
}
#story-title {
	margin: 0;
	font-size: 162.5%;
}
#story-author {
	margin-top: 2em;
	font-weight: bold;
}
#menu ul {
	margin: 1em 0 0;
	padding: 0;
	list-style: none;
	border: 1px solid #444;
}
#menu ul:empty {
	display: none;
}
#menu li {
	margin: 0;
}
#menu li:not(:first-child) {
	border-top: 1px solid #444;
}
#menu li a {
	display: block;
	padding: 0.25em 0.75em;
	border: 1px solid transparent;
	color: #eee;
	text-transform: uppercase;
}
#menu li a:hover {
	background-color: #444;
	border-color: #eee;
}

/* Stop text selection on certain UI elements. */
#ui-bar-tray button,
#menu a {
	user-select: none;
}

/* Font icon styles. */
#ui-bar-tray button::before,
#menu-core li[id|="menu-item"] a::before {
	@mixin sc-icons-properties;
}
#ui-bar-tray button::before {
	display: block;
	font-size: 1.1em;
	width: 1em;
}
#ui-bar-toggle::before {
	content: "\f053";
}
#ui-bar.stowed #ui-bar-toggle::before {
	content: "\f054";
}
#ui-bar-tray #history-backward::before {
	content: "\f060";
}
#ui-bar-tray #history-jumpto::before {
	content: "\f0e7";
}
#ui-bar-tray #history-forward::before {
	content: "\f061";
}
#menu-item-continue a::before,
#menu-item-saves a::before,
#menu-item-settings a::before,
#menu-item-restart a::before /* legacy */,
#menu-item-share a::before /* /legacy */ {
	margin-right: 0.35em;
}
#menu-item-continue a::before {
	content: "\f04b";
}
#menu-item-saves a::before {
	content: "\f0c7";
}
#menu-item-settings a::before {
	content: "\f013";
}
#menu-item-restart a::before {
	content: "\f011";
}
/* legacy */
#menu-item-share a::before {
	content: "\f1e0";
}
/* legacy */

/* Accessibility styles. */
@media (prefers-reduced-motion: reduce) {
	#story {
		transition: margin-left 0s;
	}
	#ui-bar {
		transition: left 0s;
	}
}