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

	css/core.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.

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

/* Story data styling. */
#store-area,
tw-storydata {
	display: none !important;
	z-index: 0;
}

/* Scrollbar styles. */
*::-webkit-scrollbar {
	/* background-color: #111; */
	/* For horizontal scrollbars. */
	height: 8px; /* Maybe: `0.5rem` */
	/* For vertical scrollbars. */
	width: 8px; /* Maybe: `0.5rem` */
}
*::-webkit-scrollbar-corner,
*::-webkit-scrollbar-track {
	background-color: #111;
}
*::-webkit-scrollbar-thumb {
	background-color: #333;
	border: 1px solid #111;
}
* {
	/* -ms-overflow-style: auto; */
	scrollbar-color: #333 #111;
	scrollbar-width: thin;
}

/* Fullscreen styles. */
*:fullscreen {
	/* Cause Blink/WebKit to behave like Gecko. */
	height: 100%;
	width: 100%;
}
body::-ms-backdrop {
	/* Prevent IE 11 from hiding the `body` element's background. */
	background: none;
}

/* Base styles. */
*:focus {
	outline: thin dotted;
}
*:disabled {
	cursor: not-allowed !important;
}
html {
	font-family:
		/* iOS & macOS Safari, macOS Firefox */
		-apple-system,
		/* macOS & Windows Chrome */
		system-ui,
		/* macOS Chrome */
		BlinkMacSystemFont,
		/* Windows ≥6 (Vista) */
		"Segoe UI",
		/* Android, Chrome OS */
		Roboto,
		/* KDE */
		Oxygen-Sans,
		/* GNOME */
		Cantarell,
		/* Ubuntu */
		Ubuntu,
		/* macOS <10.11 */
		"Helvetica Neue",
		/* Older fallbacks */
		Helvetica,
		Arial,
		sans-serif,
		/* Color Emoji */
		color-emoji;

	/*
		We define the base font size and line height here as they affect the
		layout of the core page elements—i.e., `#ui-bar`, `#ui-dialog`, and
		`#story`.
	*/
	font-size: 16px;
	line-height: 1;
}
body {
	color: #eee;
	background-color: #111;
	overflow: auto;
}
a {
	cursor: pointer;
	color: #68d;
	text-decoration: none;
	transition-duration: 200ms;
}
html[data-outlines] a:focus,
a:hover {
	color: #8af;
	text-decoration: underline;
}
a.link-broken {
	color: #c22;
}
html[data-outlines] a.link-broken:focus,
a.link-broken:hover {
	color: #e44;
}
a[disabled],
span.link-disabled {
	color: #aaa;
	cursor: not-allowed !important;
	/*
		NOTE: Do not use `pointer-events` here as it disables
		the display of a cursor in some browsers.

		pointer-events: none;
	*/
	text-decoration: none;
}
a.link-internal {
	-webkit-touch-callout: none;
}
area {
	cursor: pointer;
}
button {
	cursor: pointer;
	color: #eee;
	background-color: #35a;
	border: 1px solid #57c;
	line-height: normal;
	padding: 0.4em;
	transition-duration: 200ms;
	user-select: none;
}
html[data-outlines] button:focus,
button:hover {
	background-color: #57c;
	border-color: #79e;
}
button:disabled {
	background-color: #444;
	border: 1px solid #666;
}
code,
kbd,
pre,
samp,
var {
	font-family:
		SFMono-Regular,
		Menlo,
		Monaco,
		Consolas,
		"Liberation Mono",
		"Lucida Console",
		"Courier New",
		Courier,
		/* 2× to fix a bug in ancient browsers. */
		monospace,
		monospace;
}
pre {
	overflow: auto;
}
input,
select,
textarea {
	color: #eee;
	background-color: transparent;
	border: 1px solid #444;
	padding: 0.4em;
}
select {
	padding: 0.34em 0.4em;
}
input[type="text"] {
	min-width: 18em;
}
textarea {
	min-width: 30em;
	resize: vertical;
}
input[type="checkbox"],
input[type="file"],
input[type="radio"],
select {
	cursor: pointer;
}
/* BEGIN: input[type="range"] */
input[type="range"] {
	-webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
	min-height: 1.2em;
}
input[type="range"]:focus {
	outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
	background: #222;
	border: 1px solid #444;
	border-radius: 0;
	cursor: pointer;
	height: 10px;
	width: 100%;
}
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
	background: #35a;
	border: 1px solid #57c;
	border-radius: 0;
	cursor: pointer;
	height: 18px;
	/*
		NOTE: Ideally, `margin-top` should be `0` for Edge (EdgeHTML)—ca. v17—but
		real Blink/WebKit-based browsers need it.  Since there's more of them and
		Edge (EdgeHTML) is co-opting the prefix, we cater to them.  Edge (EdgeHTML)
		will simply have to look ever so slightly off.  This will likely cease to
		be an issue for Edge users when it switches from EdgeHTML to Blink anyway.
	*/
	margin-top: -5px;
	width: 33px;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
	background: #222;
}
input[type="range"]::-moz-range-track {
	background: #222;
	border: 1px solid #444;
	border-radius: 0;
	cursor: pointer;
	height: 10px;
	width: 100%;
}
input[type="range"]::-moz-range-thumb {
	background: #35a;
	border: 1px solid #57c;
	border-radius: 0;
	cursor: pointer;
	height: 18px;
	width: 33px;
}
input[type="range"]::-ms-track {
	background: transparent;
	border-color: transparent;
	color: transparent;
	cursor: pointer;
	height: 10px;
	width: calc(100% - 1px);
}
input[type="range"]::-ms-fill-lower {
	background: #222;
	border: 1px solid #444;
	border-radius: 0;
}
input[type="range"]::-ms-fill-upper {
	background: #222;
	border: 1px solid #444;
	border-radius: 0;
}
input[type="range"]::-ms-thumb {
	background: #35a;
	border: 1px solid #57c;
	border-radius: 0;
	cursor: pointer;
	height: 16px;
	width: 33px;
}
/* END: input[type="range"] */
html[data-outlines] input:focus,
input:hover,
html[data-outlines] select:focus,
select:hover,
html[data-outlines] textarea:focus,
textarea:hover {
	background-color: #333;
	border-color: #eee;
}
input:disabled,
select:disabled,
textarea:disabled {
	color: #333;
	background-color: transparent;
	border-color: #111;
}
hr {
	display: block;
	height: 1px;
	border: none;
	border-top: 1px solid #eee;
	margin: 1em 0;
	padding: 0;
}
audio,
canvas,
progress,
video {
	max-width: 100%;
	vertical-align: middle;
}

/* Special no transition styling. */
.no-transition {
	transition: none !important;
}

.error-view {
	background-color: #511;
	border-left: 0.5em solid #c22;
	display: inline-block;
	margin: 0.1em;
	max-width: 100%;
	padding: 0 0.25em;
	position: relative;
}
.error-view > .error-toggle {
	background-color: transparent;
	border: none;
	line-height: inherit;
	left: 0;
	padding: 0;
	position: absolute;
	top: 0;
	width: 1.75em;
}
html[data-outlines] .error-view > .error-toggle:focus,
.error-view > .error-toggle:hover {
	/*
		This could also be achieved by simply adding `!important` to the base
		`background-color` property above.
	*/
	background-color: transparent;
}
.error-view > .error {
	display: inline-block;
	margin-left: 0.25em;
}
.error-view > .error-toggle + .error {
	margin-left: 1.5em;
}
.error-view > .error-source[hidden] {
	display: none;
}
.error-view > .error-source:not([hidden]) {
	background-color: rgba(0, 0, 0, 0.2);
	display: block;
	margin: 0 0 0.25em;
	overflow-x: auto;
	padding: 0.25em;
}

.highlight,
.marked {
	color: yellow;
	font-weight: bold;
	font-style: italic;
}
.nobr {
	white-space: nowrap;
}

[data-icon]::before,
[data-icon-before]::before,
[data-icon-after]::after,
.error-view > .error-toggle::before,
.error-view > .error::before,
a.link-external::after {
	@mixin sc-icons-properties;
}
[data-icon]::before {
	content: attr(data-icon);
}
[data-icon-before]::before {
	content: attr(data-icon-before);
	margin-right: 0.35em;
}
[data-icon-after]::after {
	content: attr(data-icon-after);
	margin-left: 0.35em;
}
.error-view > .error-toggle::before {
	content: "\f0da";
}
.error-view > .error-toggle.enabled::before {
	content: "\f0d7";
}
.error-view > .error::before {
	content: "\f071";
	margin-right: 0.35em;
}
a.link-external::after {
	content: "\f35d";
	margin-left: 0.25em;
}