@use "sass:color";
@use "vars";

.page__ {
	&header {
		padding: 0 15px 1px;
		box-shadow: 0 1px 4px vars.$rgb-shadow-grey--dark;
		color: #fff;
		background-color: rgb(0 107 196);
		min-height: 0;
		flex-shrink: 0;
	}

	&title {
		margin-right: 10px;
		display: inline;

		&::after {
			color: #e0e0e0;
			content: ".";
		}

		&--home {
			span {
				color: #e0e0e0;
			}
		}
	}

	&subtitle {
		display: inline;
		font-style: italic;
		color: #d0d0d0;
	}

	&btn-toggle-nav {
		margin-top: 5px;
		text-align: center;
		width: 6em;
		flex-shrink: 0;
		height: 32px;
		line-height: 1;
		margin-right: 2px;

		@media screen and (width > #{vars.$width-screen-sm}) {
			display: none;
		}
	}

	&nav {
		position: relative;
		min-height: 33px;
		flex-shrink: 0;

		@media screen and (width <= #{vars.$width-screen-sm}) {
			width: 100%;
			display: flex;
		}
	}

	&nav-inner {
		@media screen and (width <= #{vars.$width-screen-sm}) {
			display: flex;
			margin-top: 3px;
			flex-direction: column;
			width: calc(100% - 6em);
			flex-shrink: 0;
		}
	}

	&nav-date {
		margin-left: -16px;
		width: 27px;
		color: vars.$rgb-font--muted;
	}

	&wrp-download {
		@include vars.mix-shadow-1;

		position: fixed;
		z-index: vars.$z-temp-effect;
		top: 5px;
		min-height: 40px;
		min-width: 100px;
		max-width: 850px;
		display: flex;
		width: 90vw;
		right: 0;
		left: 0;
		margin: 0 auto;
		padding: 5px;
		justify-content: space-between;
		align-items: center;
		border: 1px solid transparent;
		border-radius: 4px;
		background: #fff;
	}

	&wrp-download-bar {
		border: 1px solid vars.$rgb-active-blue--dark;
		height: 34px;
		border-radius: 4px;

		&--error {
			border-color: vars.$rgb-active-red--dark;
		}
	}

	&disp-download-progress-bar {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		background: vars.$rgb-active-blue;

		&--error {
			background: vars.$rgb-active-red;
		}
	}

	&disp-download-progress-text {
		position: absolute;
		inset: 0 calc(50% - 30px) 0 calc(50% - 30px);
		width: 90px;
		text-shadow:
			1px 1px 0 #fff,
			-1px -1px 0 #fff,
			1px -1px 0 #fff,
			-1px 1px 0 #fff,
			3px 3px 5px #000;
	}
}

.active > .nav__link > .page__ {
	&nav-date {
		color: #fff;
	}
}

.night-mode .page__ {
	&wrp-download {
		background: vars.$rgb-bg--night;
	}

	&disp-download-progress-text {
		color: vars.$rgb-off-black;
	}
}

#navigation .page__nav-hidden-mobile {
	@media screen and (width <= #{vars.$width-screen-sm}) {
		display: none;
		margin-left: 0;
	}
}

#legal-notice {
	@include vars.mix-shadow-1;

	position: fixed;
	z-index: 10000;
	bottom: 0;
	width: 100vw;
	height: 10em;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	font-weight: bold;
	padding: 3rem;
	border: 1px solid rgb(0 0 0 / 15%);
	background: #f8f8f8;
}

.viewport-wrapper {
	position: absolute;
	inset: 0;
	display: flex;
	flex-flow: column nowrap;
	overflow: auto;
	height: 100vh;
	width: 100vw;

	@media screen and (width <= #{vars.$width-screen-md}) {
		bottom: auto;
		height: initial;
		min-height: 100vh;
	}
}

.view-col-group--cancer {
	display: flex;
	flex-direction: column;
	position: relative;
	overflow-y: auto;
}

.view-col-wrapper {
	display: flex;
	flex-direction: row;
	max-height: 100%;
	height: 100%;
	min-height: 0;

	&--cancer {
		@media screen and (width > #{vars.$width-screen-md}) {
			// min-height: calc(100vh - #{$sz-y-header});
		}
	}

	@media screen and (width <= #{vars.$width-screen-md}) {
		flex-direction: column;
		max-height: none;
		height: initial;
		display: block;
	}
}

/* side menu */
.sidemenu {
	@include vars.mix-shadow-1;

	background: #fff;
	border: 1px solid vars.$rgb-border-grey;

	position: fixed;
	z-index: vars.$z-side-menu;
	top: 0;
	bottom: 0;
	left: -260px;
	width: 250px;
	transition: left vars.$time-3-frames;
	cursor: default;
	display: flex;
	flex-direction: column;
	padding: 4px 7px;
	overflow-y: auto;

	> * {
		flex-shrink: 0;
	}

	&__toggle {
		@include vars.mix-shadow-1;

		background: #d3d3d3;

		position: absolute;
		z-index: vars.$z-side-menu;
		top: 46px;
		left: -7px;
		width: 32px;
		height: 32px;
		cursor: pointer;
		transition: left vars.$time-3-frames;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding: 3px 4px;
	}

	&__hotzone {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: 1px;
	}

	&__burger {
		background: #fff;

		height: 3px;
		box-shadow: inset 0 0 1px 0 #888;
	}

	&__toggle:hover .sidemenu {
		left: 0;
		transition: left vars.$time-3-frames;

		&--offset {
			left: -12px;
		}
	}

	&__row__divider {
		background: vars.$rgb-border-grey--trans;

		&--heavy {
			background: #aaa;
		}
	}

	&__row__label {
		min-width: 46px;
		flex-shrink: 0;
	}

	&__row__label--cb-label {
		font-weight: initial;
		display: flex;
		margin-bottom: 0;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
}

input[type="checkbox"].sidemenu__row__label__cb {
	margin-right: 3px;
	margin-left: 7px;
}

.night-mode .sidemenu {
	border-color: vars.$rgb-border-grey--night;
}

/* *** */

/* omnisearch */
.omni__ {
	&wrp-output {
		width: 100%;
		justify-content: flex-end;
	}

	&output {
		@include vars.mix-shadow-1;

		position: absolute;
		z-index: vars.$z-omnisearch;
		padding: 0.2em 0.7em;
		border-radius: 0.2em;
		border: 1px solid rgb(0 0 0 / 15%);
		background: #fff;

		&--scrolled {
			position: fixed;
			top: 42px;
			right: 10px;
		}

		@media screen and (width > #{vars.$width-screen-xxs}) {
			max-width: 300px;
			min-width: 270px;
		}

		@media screen and (width > #{vars.$width-screen-xs}) {
			max-width: 460px;
			min-width: 430px;
		}

		@media screen and (width > #{vars.$width-screen-sm}) {
			max-width: 740px;
			min-width: 500px;
		}

		@media screen and (width <= #{vars.$width-screen-sm}) {
			top: 40px;
		}
	}

	&wrp-input {
		@media screen and (width <= #{vars.$width-screen-sm}) {
			margin-top: 2px;
			margin-left: 0;
		}

		position: relative;

		&--scrolled {
			position: fixed;
			z-index: vars.$z-omnisearch;
			top: 5px;
			right: 10px;
			width: 85px;
			padding: 2px 0;
			border-left: 40px solid transparent;

			.omni__input {
				min-width: initial;
				border-top-left-radius: 4px;
				border-top-color: vars.$rgb-border-grey;
			}

			.omni__submit {
				border-top-right-radius: 4px;
				border-top-color: vars.$rgb-border-grey;
			}

			input {
				padding: 0;
				color: transparent;
			}

			&:focus,
			&:focus-within,
			&:active,
			&:hover {
				width: 250px;
				border-left: 0;

				input {
					padding: 6px 12px;
					color: inherit;
				}
			}
		}
	}

	&input {
		height: 32px;
		min-width: 100px;

		@media screen and (width > #{vars.$width-screen-md}) {
			border-top-left-radius: 0;
			border-top-color: transparent;
		}
	}

	&btn-clear {
		top: 9px;
		right: 37px;
		opacity: 0.5;
	}

	&submit {
		height: 32px;
		padding: 3px 7px;

		@media screen and (width > #{vars.$width-screen-md}) {
			border-top-right-radius: 0;
			border-top-color: transparent;
		}
	}

	&wrp-paginate {
		display: flex;
		justify-content: space-between;

		> span {
			display: inline-block;
			user-select: none;
			padding: 2px;
			font-size: 1.1em;
			min-width: 20px;
		}
	}

	&paginate-ctrl {
		cursor: pointer;

		&:hover {
			color: vars.$rgb-active-blue;
		}
	}

	&paginate-left {
		margin-right: auto;
	}

	&paginate-count {
		margin: 0 auto;
	}

	&paginate-right {
		margin-left: auto;
	}

	&disp-srd {
		font-size: 8.5px;
		align-self: start;
		top: 2px;
		margin-right: 1px;
		margin-left: 2px;
	}

	&disp-source-marker {
		margin-left: 2px;
	}

	&wrp-page {
		margin-left: 4px;
		font-family: Convergence, Arial, sans-serif;
		font-weight: 100;
		font-size: 94%;
	}

	// region Clear button
	&input {
		&:placeholder-shown + .omni__btn-clear {
			display: none;
		}
	}

	&wrp-input--scrolled {
		.omni__input:not(:focus, :focus-within, &:active, :hover) + .omni__btn-clear {
			display: none;
		}
	}
	// endregion
}

/* *** */

.btn-name-pronounce,
.btn-stats-name {
	vertical-align: top;
	height: 24px;
	width: 24px;
}

.name-pronounce-icon {
	line-height: 16px;
}

.name-pronounce {
	display: none;
}

.hwin__top-border-icon {
	top: 0;
	margin-left: auto;
	padding: 2px;
	color: vars.$rgb-bg--alt;
	cursor: pointer;
	font-size: 12px;
	width: 18px;
	text-align: center;

	&--text {
		line-height: 11px;
		font-weight: bolder;
		font-family: monospace;
	}

	&:hover,
	&:active,
	&:visited {
		color: color.adjust(vars.$rgb-bg--alt, $lightness: - vars.$pct-darken-hover);
		text-decoration: none;
	}
}

#tabs-right {
	margin-left: auto;
	display: flex;
}

/* roller */
.rollbox-min {
	@include vars.mix-shadow-1;

	position: fixed;
	z-index: vars.$z-rollerbox-hidden;
	right: 7px;
	bottom: 0;
	color: rgb(255 255 255 / 70%);
	width: 24px;
	// TODO(iOS)
	// Support iOS Webclip corner
	//   See: https://github.com/5etools-mirror-1/5etools-mirror-1.github.io/issues/122
	height: calc(24px + calc(env(safe-area-inset-bottom, 0) / 2));
	cursor: pointer;
	user-select: none;
	border: 0;

	.glyphicon {
		position: absolute;
		top: 5px;
		left: 6px;
	}
}

.rollbox {
	@include vars.mix-shadow-1;

	position: fixed;
	width: 260px;
	height: 335px;
	z-index: vars.$z-rollerbox-active;
	border: 1px solid rgb(0 0 0 / 15%);
	right: 1em;
	bottom: 0;
	flex-direction: column;

	.ipt-roll {
		flex-shrink: 0;
		overflow-x: auto;
		height: 30px;
		width: 100%;
	}

	.out-roll {
		overflow-y: auto;
		height: 100%;
		display: flex;
		flex-direction: column-reverse;
		transform: translateZ(0);
	}

	.head-roll {
		height: 24px;
		flex-shrink: 0;
		width: 100%;
		box-shadow: 0 0 3px rgb(0 0 0 / 25%);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		user-select: none;
		cursor: pointer;
	}

	.head-roll .hdr-roll {
		line-height: 24px;
		padding: 0 6px;
	}

	.out-roll .out-roll-wrp .out-roll-item:first-child {
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	}

	.out-roll .out-roll-wrp .out-roll-item:last-child {
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
	}

	.out-roll .out-roll-item {
		position: relative;
		margin: 1px 3px;
		padding: 1px 3px;
		width: calc(100% - 6px);
		word-wrap: break-word;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.out-roll .out-roll-item--message {
		display: block;
	}

	.out-roll-item-button-wrp {
		display: none;
		position: absolute;
	}

	.out-roll-item:hover .out-roll-item-button-wrp {
		display: flex;
		right: 3px;
	}

	.btn-copy-roll {
		padding: 0 2px;
		line-height: 1.4;
	}

	.out-roll .out-roll-item .roll-label {
		font-style: italic;
	}

	.out-roll .out-roll-item .roll {
		font-weight: bold;
	}

	.out-roll .out-roll-item .roll-min {
		color: vars.$rgb-roll-min;
	}

	.out-roll .out-roll-item .roll-max {
		color: vars.$rgb-roll-max;
	}

	.out-roll .out-roll-id {
		width: 100%;
		font-size: 70%;
		padding: 1px 3px;
	}
}

// TODO refactor rollbox CSS to here
.rll__ {
	&prompt-header {
		font-size: 32px;
	}

	&dropped {
		text-decoration: #f00 line-through;
	}

	&list {
		margin-bottom: 0;
		padding-left: 24px;
	}

	&exploded {
		color: #6f99b8;
	}

	&success {
		text-decoration: vars.$rgb-roll-max--muted underline;
	}

	&min--muted {
		color: vars.$rgb-roll-min--muted;
	}

	&max--muted {
		color: vars.$rgb-roll-max--muted;
	}

	&exploded {
		color: #6f99b8;
	}

	&min--muted {
		color: vars.$rgb-roll-min--muted;
	}

	&max--muted {
		color: vars.$rgb-roll-max--muted;
	}
}

// FIXME this fixes the missing scrollbar on Firefox, but breaks auto-scrolling when rolling
// @-moz-document url-prefix() {
// 	.out-roll .out-roll-wrp {
// 		max-height: 100%;
// 	}
// }

/* *** */

/* stats tabs */
.wrp-stat-tab {
	width: 100%;
	display: flex;
}

/* *** */

.view-col {
	position: relative;
	margin: 7px 7px 12px;
	flex: 1;
	display: flex;
	flex-direction: column;
	height: calc(100% - 19px);

	&--wrp-book-contents {
		height: initial;
		position: relative;
		flex: 1;
	}
}

#listcontainer.view-col {
	display: flex;
	flex-flow: column nowrap;
}

#contentwrapper.view-col {
	overflow-x: hidden;
	margin-bottom: 5px;

	> *:not(.wrp-stats-table) {
		flex-shrink: 0;
	}
}

.wrp-stats-table {
	overflow: hidden auto;
	border-top: 1px solid vars.$rgb-border-yellow--statblock;
	border-bottom: 1px solid vars.$rgb-border-yellow--statblock;
	transform: translateZ(0);
	flex-shrink: 1;

	&--book {
		border-top-color: #c0c0c0;
		border-bottom-color: #c0c0c0;
	}

	@media screen and (width <= #{vars.$width-screen-md}) {
		overflow-y: initial;
	}
}

.filtertools,
#filtertools {
	font-size: 0.8em;

	select {
		margin: 1px;
	}

	small:hover {
		cursor: pointer;
	}
}

#pointbuy input {
	margin: 2px;
	text-align: right;
	width: 3em;

	&[type="number"] {
		appearance: textfield;
	}

	&[type="checkbox"] {
		width: initial;
		margin: initial;
	}
}

.list,
.list-display-only {
	transform: translateZ(0);
	position: relative;
	padding-left: 0;
	height: 100%;
	overflow: hidden auto;
	clear: both;
	font-size: 0.8em;

	&--stats {
		@media screen and (width > #{vars.$width-screen-md}) {
			overflow-y: scroll;
			margin-right: -9px;
		}
	}

	@media screen and (width <= #{vars.$width-screen-md}) {
		max-height: 40vh;
	}

	&.rules {
		overflow-y: auto !important;
		padding-top: 0;
	}
}

.lst--border {
	border-bottom: 1px solid vars.$rgb-border-grey--list-row;
}

.list-multi-selected {
	@include vars.mix-row-glow-active;
}

.list-multi-selected .lst--border {
	border-color: #6fa4d0;
}

.list-multi-selected.lst__row--sublist {
	@include vars.mix-row-glow-active--alt;

	.lst--border {
		border-color: vars.$rgb-border-grey;
	}
}

.row--blocklisted {
	display: none !important;
}

.manbrew {
	&__source {
		overflow: hidden;
	}

	&__search {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	&__filtertools {
		button {
			border-top: 0;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}

		.wrp-cb-all {
			border-bottom: 1px solid vars.$rgb-border-grey;
			border-right: 1px solid vars.$rgb-border-grey;
			line-height: 14px;
			border-bottom-right-radius: 3px;
			text-align: center;
			vertical-align: middle;
		}
	}

	&__wrp_btn_del_selected {
		text-align: right;
		padding-bottom: 5px;
	}

	&__current_brew {
		margin-bottom: 5px;
	}

	&__row {
		margin-right: 0;
		margin-left: 0;
		padding: 4px 0;
	}

	&__col--tall {
		line-height: 30px;
	}

	&__list {
		position: absolute;
		inset: 0;
		height: initial;
		overflow-y: initial;
		width: 100%;
	}

	&-row__ {
		&icn-btn {
			top: 2px;

			&--text {
				top: -1px;
			}
		}
	}
}

.night-mode .manbrew {
	&__filtertools {
		.wrp-cb-all {
			border-color: vars.$rgb-border-grey--night;
		}
	}
}

.rnd-name {
	position: relative;
	font-size: 1.8em;
	font-family: "Times New Roman", serif;
	font-variant: small-caps;
	font-weight: 500;
	padding-left: 0.2em !important;

	div.name-inner {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
}

.stats {
	font-family: Convergence, Arial, sans-serif;
	width: 100%;
	font-size: 12.6px;
	table-layout: fixed;
	overflow-wrap: break-word;

	&:last-child {
		margin-bottom: 0;
	}
}

td,
th {
	padding: 1px 0.3em;
}

.stats-name {
	font-size: unset;
	line-height: unset;
	color: vars.$rgb-name-red;
}

/* sub-tables */

.stats table {
	margin-bottom: 5px;
	// Avoid outer `white-space: pre` inflating cells
	white-space: initial;
}

.stats table.statsDataInset {
	margin: 10px;
	width: calc(100% - 20px);
	border: 1px solid rgb(0 0 0 / 40%);
	box-shadow: 0 0 4px 0 rgb(152 141 124);
}

.stats table caption {
	margin-left: 5px;
	padding: 0;
	font-weight: bold;
	font-size: 1.1em;
}

th.border {
	height: 4px;
}

.wrp-stats-table th.border {
	height: 3px;
}

th.border-thin {
	height: 1px;
}

td.divider div {
	background: vars.$rgb-name-red;
	height: 2px;
	margin: 6px 0;
}

.stats span.name {
	font-weight: bold;
}

.stats span.name {
	font-weight: bold;
}

tr.text > td {
	padding-bottom: 0.7em;
}

tr.text.compact > td {
	padding-bottom: 0;
}

tr.text.compact > td p:last-child {
	margin-bottom: 0;
}

.mon__ {
	&btn-reset-cr,
	&btn-scale-cr {
		padding: 0 5px;
		font-size: 10px;
	}

	&cr_slider_wrp {
		position: absolute;
		top: 23px;
		left: 0;
		background: #fff;
		border: 1px solid vars.$rgb-border-grey;
		width: calc(100% - 30px);
		margin: 0 10px;
		padding: 5px 7px 0;
		border-radius: 4px;
		box-shadow: 0 0 3px 0 #000;

		&--compact {
			top: 41px;
		}
	}

	&sect-header-inner {
		display: block;
		margin-top: -0.3rem;
		margin-bottom: -0.3rem;
		font-weight: 100;
		color: vars.$rgb-name-red;
		font-size: 18px;
		line-height: 23px;
		font-family: "Times New Roman", serif;
		font-variant: small-caps;
	}

	&sect-row-inner {
		padding-top: 0.5rem !important; // FIXME temporary important; refactor .stats

		> *:last-of-type {
			margin-bottom: 0.5rem !important; // FIXME temporary important; refactor .stats
		}
	}

	&stat-header-underline {
		border-bottom: 1px solid vars.$rgb-name-red;
		vertical-align: bottom !important;
		padding-left: 0.2rem;
	}
}

.night-mode .mon__ {
	&cr_slider_wrp {
		border-color: vars.$rgb-border-grey--night;
	}
}

// FIXME temporary element selectors
#crcalc {
	input[type="number"],
	input[type="checkbox"],
	.inputwrap {
		text-align: right;
		width: 6em;
	}

	input[type="checkbox"] {
		width: auto;
	}

	input#hd {
		float: none;
		width: 4em;
	}

	span#hdval {
		width: 2.1em;
		text-align: center;
		display: inline-block;
	}

	input[type="number"]#hd::-webkit-inner-spin-button,
	input[type="number"]#hd::-webkit-outer-spin-button {
		margin: 0;
	}

	.explanation {
		font-weight: normal;
		width: 26em;
	}

	input#hd:focus {
		border: 1px solid initial;
	}
}

#msbcr {
	text-align: center;
	font-size: 0.8em;
	margin: 0 auto;
}

#msbcr th {
	text-align: center;
	padding: 0 0.5em;
	cursor: initial !important;
}

#msbcr tr {
	cursor: pointer;
}

#croutput {
	padding: 0.2em 0.7em;
	border-radius: 7px;
}

#instructions p {
	font-size: small;
}

#expectedcr {
	text-align: center;
}

img.token {
	position: absolute;
	z-index: vars.$z-token-image;
	top: 0;
	right: 0.5rem;
	float: right;
	width: auto;
	max-width: 11rem;
	height: auto;
	transition:
		opacity vars.$time-2-frames,
		max-width vars.$time-2-frames,
		right vars.$time-2-frames;
}

img.token:hover {
	max-width: 100%;
	right: 0;
	opacity: 1 !important;
	transition:
		opacity vars.$time-2-frames,
		max-width vars.$time-2-frames,
		right vars.$time-2-frames;
}

.classes .stats {
	font-family: inherit;
}

.stats p.subtrait {
	padding: 0 1em;
	font-size: 0.9em;
}

// region Initiative tracker
.init__ {
	&wrp_conds {
		display: flex;
	}

	&cond {
		width: 7px;
		margin-right: 3px;
		display: grid;
		grid-gap: 3px;
		cursor: pointer;

		&:hover {
			box-shadow: 0 0 5px 0 #808080;
		}
	}

	&cond_bar {
		width: 7px;
		height: 100%;
	}
}
// endregion

// region Player initiative tracker
.initp__ {
	&content {
		overflow: hidden auto;
		height: 100%;
		width: 100%;
	}

	&wrp_active {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	&meta {
		font-size: 1.6rem;
	}

	&header {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0 3px;
		font-variant: small-caps;
		border-bottom: 1px solid vars.$rgb-border-grey;
	}

	&h_name--compact {
		text-align: center;
	}

	&r_name {
		display: flex;
		justify-content: space-between;
	}

	&h_hp--compact {
		text-align: center;
	}

	&h_stat,
	&r_stat {
		width: 40px;
		text-align: center;
		flex-shrink: 0;
		flex-grow: 0;
	}

	&r_hp_pill {
		padding: 2px 4px;
		border-radius: 3px;
		color: #fff;
		text-align: center;
	}

	&h_score,
	&r_score {
		flex: none;
		width: 80px;
		text-align: center;

		&--compact {
			width: 40px;
		}
	}

	&r_score {
		line-height: 24px;
	}

	&r {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 2px 3px;
		border-bottom: 1px solid vars.$rgb-border-grey--trans;

		&:last-of-type {
			border-bottom: 0;
		}
	}

	&r:hover {
		background: #00000010;
	}

	&r--active {
		background: #cfe5ff78;
	}

	&r--active:hover {
		background: #bfd5ef78;
	}
}

.night-mode .initp__ {
	&header {
		border-color: vars.$rgb-border-grey--night;
	}

	&r {
		border-color: vars.$rgb-border-grey--trans-night;

		&:hover {
			background: #ffffff18;
		}

		&--active:hover {
			background: #93bae838;
		}
	}
}
// endregion

/**** Search and filter bar ****/
.lst__ {
	&form-top {
		display: flex;
		flex-shrink: 0;

		> * {
			min-width: 0;
		}

		> button {
			flex-shrink: 0;
		}

		> *:first-child {
			border-bottom-left-radius: 0;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			border-right: 0;
		}

		> *:last-child {
			border-bottom-right-radius: 0;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}

		> *:not(:first-child, :last-child) {
			border-radius: 0;
			border-right: 0;
		}
	}

	&search {
		padding-left: 23px;
	}

	&list {
		margin-bottom: 10px;
	}

	&row {
		&:hover {
			background: vars.$rgb-bg--alt;
		}

		&--blocklisted {
			display: none !important;
		}

		&-inner {
			line-height: 14px;
			color: inherit;
			display: flex;
			align-items: center;
			overflow: hidden;
			padding: 0 2px 1px;
			text-decoration: none;

			&:hover,
			&:focus {
				text-decoration: none;
			}
		}
	}

	&wrp-preview {
		font-size: 12.6px;
		background: vars.$rgb-bg;
	}

	&wrp-preview-inner {
		border-bottom: 1px solid vars.$rgb-border-grey--list-row;
	}

	&vr-preview {
		top: 7px;
		left: 8px;
		height: calc(100% - 14px);
	}

	&btn-toggle-expand {
		margin-bottom: -1px;
		line-height: 15px;

		&:hover {
			background: #00000020;
		}
	}

	&btn-collapse-all-previews {
		font-size: 11.2px;
	}
}

*:first-child > input.lst__search--no-border-h {
	border-top-left-radius: 4px;
}

.stats-sub-header {
	font-style: italic;
	font-weight: bold;
}

.stats-list-sub-header {
	font-style: italic;
	font-weight: bold;
	margin-left: 5px;
}

.list-entry-none {
	font-style: italic;
}

.filter-sublist-item-wrapper {
	display: flex;
}

.filter-sublist-item-text {
	margin-right: 20px;
}

input[type="checkbox"].filter-checkbox {
	margin-left: auto;
	padding: 0 10px;
}

input[type="checkbox"].readonly {
	pointer-events: none;
}

.lst__wrp-cells {
	color: inherit;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 0 2px 1px;
	text-decoration: none;

	&.bk__contents_header_link {
		padding: 0;
	}

	&.bk__contents_show_all {
		height: 16px;
	}
}

.lst__row--focusable:focus {
	@include vars.mix-row-glow-active;
}

.sublist {
	display: none;
	position: relative;
	padding: 0 0 2px;
	flex-direction: column;
	flex-shrink: 0;
	height: 130px;

	.list {
		margin-bottom: 3px;
		padding-top: 3px;
	}

	&--visible {
		display: flex;
	}

	&--resizable {
		margin-bottom: 3px;
		min-height: 75px;
		max-height: 80%;

		@media screen and (width <= #{vars.$width-screen-md}) {
			max-height: 40vh;
			height: initial;
		}
	}

	&__ {
		&wrp-cols {
			display: flex;

			> *:last-child {
				flex-grow: 1;
			}
		}

		&ele-resize {
			background-color: #aaa4;
			border: 1px solid vars.$rgb-border-grey--trans-muted;
			position: absolute;
			bottom: 0;
			height: 1px;
			width: 100%;
			cursor: ns-resize;
			user-select: none;
			line-height: 1px;
			font-size: 10px;
			text-align: center;
		}
	}
}

// region Table View
.tview__ {
	&row {
		> td {
			min-width: 100px;
		}
	}
}
// endregion

/* Adventures */

/* ENTRY RENDERING CSS */
// TODO refactor everything

// Book mode adjustments
.stats--book-large {
	--sz-font-h0: 2.5em;
	--sz-font-h1: 1.9em;
	--sz-font-h2: 1.6em;

	// FIXME this doesn't affect e.g. lists
	//  Also, affects e.g. nested tables (bad!)
	--h-mb-p: 15px;
	--h-mb-p-inline: var(--h-mb-p);
	--h-mb-quote-line: 10px;
	--h-mb-li: 5px;
	--w-text-indent-inline-p: 0;

	border-radius: 0;
	line-height: 1.7;
	font-size: 1em;

	.rd__spc-inline-post {
		width: 100%;
		height: var(--h-mb-p);

		&:last-child {
			height: 0;
		}
	}

	.rd__list-hang-notitle {
		> .rd__li {
			> .rd__p-list-item {
				text-indent: -1.1em;
			}
		}
	}

	.rd__p-cont-indent {
		text-indent: 0;
		margin-top: 5px;
	}
}

/* Book/Adventure Pages */
.book-view {
	&.view-col {
		flex: 5;
	}
}

.linked-titles {
	@extend %linked-titles-base;

	.rd__h .entry-title-inner {
		@extend %linked-titles-base-inner;
	}
}

.bk-contents__sub_spacer--1 {
	color: #808080;
	display: inline-block;
	margin: 0 4px;
}

.book-contents .contents {
	height: initial;
	position: sticky;
	top: 0;
	max-height: 100vh;
}

@media screen and (width > #{vars.$width-screen-hg}) {
	#listcontainer.book-contents {
		position: fixed;
		top: 0;
		left: 0;
		max-width: calc((100vw - 1170px) / 2);
		margin: 0;
		min-height: 100vh;
	}

	.book-contents .contents {
		position: relative;
	}
}

.initial-message {
	color: vars.$rgb-name-red;
	font-family: "Times New Roman", serif;
	font-variant: small-caps;
	font-weight: 500;
	text-align: center;
	line-height: 2.3em;

	&--large {
		font-size: 4vmin;
		color: initial;
	}
}

.book-view .initial-message {
	font-size: 1.8em;
}

.stats .initial-message,
.bkmv .initial-message {
	font-size: 1.4em;
}

.f-all-wrapper {
	position: fixed;
	z-index: vars.$z-book-find;
	right: calc((50vw - (1170px / 2)) + 1.5em);
	bottom: 10px;
	left: calc(((100vw - (1170px * (4 / 6))) / 2) + 1.5em);
	padding: 0 20px;
}

@media screen and (width <= #{vars.$width-screen-lg}) {
	.f-all-wrapper {
		right: calc((50vw - (970px / 2)) + 1.5em);
		left: calc(((100vw - (970px * (4 / 6))) / 2) + 1.5em);
	}
}

@media screen and (width <= #{vars.$width-screen-md}) {
	.f-all-wrapper {
		right: calc(((100vw - 750px) / 2) + 1.5em);
		left: calc(((100vw - 750px) / 2) + 1.5em);
	}
}

@media screen and (width <= #{vars.$width-screen-sm}) {
	.f-all-wrapper {
		right: calc(((100vw - 750px) / 2) + 1.5em);
		left: calc(((100vw - 750px) / 2) + 1.5em);
	}
}

@media screen and (width <= #{vars.$width-screen-xs}) {
	.f-all-wrapper {
		right: calc(3.5em);
		left: calc(3.5em);
	}
}

.f-all-wrapper > input {
	width: 100%;
}

.f-all-out {
	@include vars.mix-shadow-1;

	overflow-y: auto;
	max-height: 400px;
	width: 100%;
	border: 1px solid rgb(0 0 0 / 15%);
	padding: 0.2em 0.7em;
	border-radius: 0.2em;
	display: none;
}

.f-result {
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 5px 0;
}

.f-result > span {
	display: inline-block;
}

.highlight {
	background-color: vars.$rgb-bg-highlight;
}

/* *** */

/* Day Mode */
header p.lead {
	color: #d3d3d3;
}

.stats {
	background: vars.$rgb-bg-orange;
}

@media screen and (width > #{vars.$width-screen-hg}) {
	#listcontainer.book-contents {
		@include vars.mix-shadow-1;

		background: #fff;
	}
}

.shadow-big {
	@include vars.mix-shadow-1;
}

.night-mode .night__ {
	&shadow-big {
		@include vars.mix-shadow-1;
	}
}

.stats--book {
	@include vars.mix-shadow-1;

	font-family: Roboto, Helvetica, sans-serif;
	background: #fff;

	::selection {
		background: #242527;
		color: #fff;
		text-shadow: none;
	}
}

.bkmv {
	position: fixed;
	z-index: vars.$z-bookmode;
	inset: 0;
	width: 100vw;
	height: 100vh;
	background: #fff;

	&__ {
		&spacer-name {
			font-family: "Times New Roman", serif;
			font-variant: small-caps;
			text-transform: uppercase;
			font-weight: bold;
			height: 20px;
			background: #c0c0c0;
			font-size: 12px;
			break-before: auto;
			break-after: auto;
			break-inside: avoid;
		}

		&wrp {
			column-count: 6;
			column-gap: 7px;
			break-inside: avoid-column;

			@media screen and (width <= 2160px) {
				column-count: 5;
			}

			@media screen and (width <= 1800px) {
				column-count: 4;
			}

			@media screen and (width <= 1440px) {
				column-count: 3;
			}

			@media screen and (width <= 1080px) {
				column-count: 2;
			}

			@media screen and (width <= 720px) {
				column-count: 1;
			}
		}

		&wrp-item {
			margin: 0;
			width: 100%;
			display: inline-block;
			border-radius: 0.2em;
			border: vars.$rgb-border-grey 1px solid;
		}

		&no-breaks {
			break-before: auto;
			break-after: auto;
			break-inside: avoid;
		}
	}
}

.night-mode .bkmv {
	&__ {
		&wrp-item {
			border-color: vars.$rgb-border-grey--night;
		}
	}
}

.stripe-odd:nth-child(odd),
.stripe-even:nth-child(even),
.stripe-odd-table > tbody > tr:nth-child(odd),
.stripe-even-table > tbody > tr:nth-child(even) {
	background: #c0c0c080; // pre-blend (50% opacity): e0 e0 e0
}

.stats .stripe-odd-table > tbody > tr:nth-child(odd),
.stats .stripe-even-table > tbody > tr:nth-child(even) {
	background: #cbbfaa80; // pre-blend (50% opacity): e4 d8 c3
}

.hwin .hoverborder,
th.border {
	background: vars.$rgb-border-yellow--statblock;
}

.hwin .hoverborder.hoverborder-book,
.stats--book th.border {
	background: #c0c0c0;
}

.bklist__ {
	$offset-vr: 6px;

	&wrp-rows-inner {
		margin-left: $offset-vr;
	}

	&row-chapter {
		margin-left: vars.$spacer * 3;
	}

	&row-section {
		margin-left: vars.$spacer * 6;
	}

	&vr-contents {
		left: $offset-vr;
		border-color: vars.$rgb-border-grey--list-row;
	}
}

.bk__ {
	&stats--narrow {
		max-width: 640px;
		margin: 0 auto;
	}

	&contents-header {
		color: inherit;
		display: flex;
		align-items: center;
		overflow: hidden;
		margin-top: -1px;
		padding: 1px 0 1px 5px;
		text-decoration: none;
		border-bottom: 1px solid vars.$rgb-border-grey;
		border-top: 1px solid vars.$rgb-border-grey;
		justify-content: space-between;
	}

	&nav-head-foot-item {
		min-width: 75px;
	}

	&to-top {
		display: none;

		&--scrolled {
			display: flex;
			flex-direction: column;
			position: fixed;
			z-index: vars.$z-omnisearch - 1;
			top: 42px;
			right: 10px;
			padding: 2px 0;

			@media screen and (width <= #{vars.$width-screen-sm}) {
				display: none;
			}
		}
	}

	&overlay-loading {
		position: absolute;
		inset: 4px 0;
		background: #fff;
		border-bottom: 4px solid #c0c0c0;
	}

	&wrp-btns-open-find {
		position: fixed;
		bottom: 0;
		left: 7px;
	}

	&head-chapter--active,
	&head-section--active {
		background: vars.$rgb-bg--alt;
	}
}

.night-mode .bk__ {
	&contents-header {
		border-color: vars.$rgb-border-grey--night;
	}

	&overlay-loading {
		background: vars.$rgb-bg--night;
		border-bottom-color: vars.$rgb-border-grey--statblock-night;
	}
}

.bks__ {
	&wrp-bookshelf {
		align-items: stretch;
	}

	&wrp-bookshelf-item,
	&wrp-bookshelf-item:hover {
		@include vars.mix-shadow-1;

		border: 2px solid vars.$rgb-border-grey;
		color: vars.$rgb-off-black;
		text-decoration-color: vars.$rgb-off-black;
	}

	&wrp-bookshelf-item--blocklisted {
		display: none !important;
	}

	&bookshelf-item-name {
		min-height: 40px;
		max-width: 220px;
		font-weight: bold;
		flex-grow: 1;
	}

	&bookshelf-image {
		width: 300px;
		height: 300px;
		object-fit: none;
	}
}

.night-mode .bks__ {
	&wrp-bookshelf-item,
	&wrp-bookshelf-item:hover {
		background: vars.$rgb-bg--night;
		border-color: vars.$rgb-border-grey--night;
		color: vars.$rgb-font--night;
		text-decoration-color: vars.$rgb-font--night;
	}
}

.f-all-out {
	background: #fff;
}

.life__output {
	background: #d3d3d3;
}

.f-all-out > p:nth-child(odd) {
	background: #f4f4f4;
}

#msbcr tr:nth-child(even) {
	background: #d3d3d3;
}

#croutput {
	background: #d3d3d3;
}

.hwin .hoverborder .window-title {
	color: vars.$rgb-name-red;
}

.rollbox {
	background: #fff;
}

.rollbox .ipt-roll {
	background: #fff;
	border-radius: 0;
}

.rollbox-min,
.rollbox .head-roll {
	background: #d3d3d3;
}

.rollbox-min:hover,
.rollbox .head-roll:hover {
	background: #e3e3e3;
}

.rollbox .out-roll .out-roll-item {
	background: #b0b0b035;
}

.rollbox .out-roll .out-roll-item .out-roll-item-code {
	font-family: "Courier New", monospace;
	background: #fff;
	border-radius: 3px;
	padding: 0 2px;
	cursor: pointer;
}

.life__output-wrp-border {
	border: 1px solid rgb(0 0 0 / 15%);
}

.toast {
	@include vars.mix-shadow-1;

	z-index: vars.$z-temp-effect;
	right: 0;
	bottom: 200px;
	left: 0;
	padding: 5px 15px;
	min-height: 40px;
	max-width: 850px;
	display: flex;
	width: 90vw;
	justify-content: space-between;
	align-items: center;
	border: 1px solid transparent;
	border-radius: 4px;
	opacity: 1;
	transition: bottom vars.$time-5-frames;

	&--animate {
		bottom: 0;
		margin-bottom: (vars.$spacer * 0.5);
		transition: bottom vars.$time-5-frames;
	}

	&--deleted {
		z-index: vars.$z-temp-effect - 1;
	}

	&__container {
		position: fixed;
		z-index: vars.$z-temp-effect;
		top: 0;
		right: 0;
		left: 0;
		height: 200px;
	}

	&__wrp-control {
		margin: -5px -15px -5px 0;
		flex: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: stretch;
	}

	&__btn-close {
		margin: 0;
		height: 100%;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-top: 0;
		border-right: 0;
		border-bottom: 0;
		border-left: 1px solid #80808040;
		background: transparent;

		&:hover,
		&:focus {
			background: #80808020;
		}
	}

	&--type-info {
		color: vars.$rgb-alert-text-info;
		background-color: #d9edf7;
		border-color: #bce8f1;
	}

	&--type-danger {
		color: vars.$rgb-alert-text-danger;
		background-color: #f2dede;
		border-color: #ebccd1;
	}

	&--type-warning {
		color: vars.$rgb-alert-text-warning;
		background-color: #fcf8e3;
		border-color: #faebcc;
	}

	&--type-success {
		color: vars.$rgb-alert-text-success;
		background-color: #dff0d8;
		border-color: #d6e9c6;
	}
}

.night-mode .toast {
	&--type-info {
		color: #fff;
		background-color: color.adjust(color.adjust(vars.$rgb-alert-info-blue--night, $lightness: - 15%), $alpha: - 0.05);
		border-color: vars.$rgb-alert-info-border-blue--night;
	}

	&--type-danger {
		color: #fff;
		background-color: color.adjust(color.adjust(vars.$rgb-alert-danger-red--night, $lightness: - 15%), $alpha: - 0.05);
		border-color: vars.$rgb-alert-danger-border-red--night;
	}

	&--type-warning {
		color: #fff;
		background-color: color.adjust(color.adjust(vars.$rgb-alert-warning-orange--night, $lightness: - 15%), $alpha: - 0.05);
		border-color: vars.$rgb-alert-warning-border-orange--night;
	}

	&--type-success {
		color: #fff;
		background-color: color.adjust(color.adjust(vars.$rgb-alert-success-green--night, $lightness: - 15%), $alpha: - 0.05);
		border-color: vars.$rgb-alert-success-border-green--night;
	}
}

// region Cards
.cards {
	&__ {
		&btn-choose-icon {
			width: 26px;
			height: 26px;
			padding: 0;
		}

		&disp-btn-icon {
			width: 24px;
			height: 24px;
			background-repeat: no-repeat;
			background-size: 24px 24px;
			filter: invert(1);
		}

		&disp-typeahead-icon {
			width: 24px;
			height: 24px;
			background-repeat: no-repeat;
			background-size: 24px 24px;
			display: inline-block;
		}
	}

	&-cfg__ {
		&ipt-color {
			width: 40px;
		}
	}
}

.night-mode {
	.cards__ {
		&disp-btn-icon {
			filter: initial;
		}

		&disp-typeahead-img {
			filter: invert(1);
		}
	}
}
// endregion

// region Recipes
.recipes {
	&__ {
		&wrp-fluff {
			.rd__wrp-image {
				margin-top: 0;
			}

			.rd__image {
				max-height: 50vh;
			}
		}
	}
}
// endregion

.form-control--error,
.form-control--error[readonly],
.form-control--error[disabled] {
	background-color: #ff000018 !important;
	border: 1px solid #843534 !important;
}

.form-control--error:focus,
.form-control--error[readonly]:focus,
.form-control--error[disabled]:focus {
	border-color: #843534 !important;
	box-shadow:
		inset 0 1px 1px rgb(0 0 0 / 7.5%),
		0 0 8px #ce8483 !important;
}

.form-control--warning,
.form-control--warning[readonly],
.form-control--warning[disabled] {
	background-color: #ffaa0018;
	border: 1px solid #846334;
}

.form-control--warning:focus,
.form-control--warning[readonly]:focus,
.form-control--warning[disabled]:focus {
	border-color: #846334;
	box-shadow:
		inset 0 1px 1px rgb(0 0 0 / 7.5%),
		0 0 8px #ceaa83;
}

/* Day Mode End */

/* Night Mode */
.night-mode {
	body {
		color: vars.$rgb-font--night;
		background: vars.$rgb-bg--night
			url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGBAMAAACDAP+3AAAAGFBMVEUfHx8eHh4dHR0bGxshISEiIiIlJSUjIyM9IpsJAAAFjUlEQVR4AT3UuZLcOBaF4QuI2XJxboIhF/eQFe1WovoBAAqccpkaZpc5+4yrXa8/RGpx/lrIXPjFCYjTp9z8REqF4VYNWB3Av3zQJ6b6xBwlKB/9kRkCjXVwGH3ziK5UcjFHVkmgY6osiBsGDFfseqq2ZbTz7E00qBDpzOxnD7ToABeros1vM6MX0rBQaG1ith1A/HJkvkHxsPGJ82dP8vVCyWmbyPTaAfGzg40bgIdrv2f3pBVPycUcufx+BSUUWDuCZi6zBqdM50ElKYPODqtLDjc31rBb9CZ59lbN/JScuMxHLUBcGiy6QRH9zpwgZGhRj8qSydPVgNNVgbWqYX3HbM9K2rqTnKVmsmwKWzc1ffEd20+Zq3Ji65kl6TSjALNvzmJt4Pi2f1etytGJmy5erLAgbNY4bjykC3YCLIS3nSZMKgwRsBarWgjdeVzIEDzpTkoOUArTF4WFXYHwxY585sT0nmTYMxmXfs8fzwswfnam8TMU49bvqSRnyRPnqlno4tVQQiH2A9Za8tNTfXQ0lxbSxUaZna0uLlj9Q0XzD96CpsOZUftolINKBWJpAOoAJC0T6QqZnOtfvcfJFcDrD4Cuy5Hng316XrqzJ204HynyHwWed6i+XGF40Uw2T7Lc71HyssngEOrgONfBY7wvW0UZdVAma5xmSNjRp3xkvKJkW6aSg7PK4K0+mbKqYB0WYBgWwxCXiS74zBCVlEFpYQDEwjcA1qccb5yO6ZL8ozt/h3wHSCdWzLuqxU2ZZ9ev9MvRMbMvV9BQgN0qrFjlkzPQanI9nuaGCokVK2LV1Y2egyY1aFQGxjM9I7RBBAgyGEJtpKHP0lUySSeWCpyKHMT2pmM/vyP55u2Rw5lcSeabAfgiG5TPDX3uP3QvcoSipJXQByUCjS4C8VXqxEEZOJxzmJoyogFNJBRsCJs2XmoWWrWFqTsnbwtSn43gNFTTob9/SEpaPJNhUBKDGoZGCMINxvBv8vuKbb//lg/sK0wfPgBica/QsSk5F3KK4Ui6Yw+uv4+DWEOFbhdPOnbY5PLFpzrZMhakeqomY0Vz0TO+elQGTWdCk1IYFAOaoZg0IJQhT+YreXF+yia+O1cgtGufjXxQw28f85RPXfd15zv13ABoD15kB7FKJ/7pbHKP6+9TgNgkVj68NeV8Tp24f7OOndCgJzR3RNJBPNFReCmstMVqvjjzBoeK4GOFoBN32CPxu+4TwwBDa4DJTe/OU9c9ku7EGyfOVxh+fw9g/AATxPqKTEXJKEdCIBkB4iBUlO6MjUrWi6M5Kz31YAqFsYaCeB0KJC5d1+foo3LQWSfRaDrwdAQrMEC27yDZXJf7TlOJ2Bczr1di3OWvZB6XrvvqPuWJPDk9dAHgm7LvuZJTEdKqO3J3XgostArEnvkqgUznx3PX7cSzz1FXZyvakTA4XVVMbCPFPK1cFj66S0WoqQI1XG2uoU7CMPquO2VaUDJFQMdVgXKD2bpz6ufzzxXbxszHQ9fGO/F7A998yBQG6cShE+P+Pk7t1FwfF1QHN1Eui1VapRxCdj8tCtI1bog1Fo011Sx9u3o6c9bufI6wAT26Av9xJ+WWpTKbbBPp3K/1LbC4Vuhv396RCbJw4untjxVPndj+dIB9dVD8z2dylZ+6vMeJwbYChHJkvHV2J3fdHsJPASeHhrXq6QheXu1nBhUr5u6ryT0I13BFKD01ViZ/n3oaziRG7c6Ayg7g1LPeztNdT36ueMqcN4XGv3finjfv+7I/kMJ4d046MUanOA1QtMH1kLlfFasm99NiutSw63yNDeH4zeL1Uu8XKHNfcThPSSNwchGMbgUETScwkCcK77pH2jsgrAssvVyB8FLJ7GrmwyD8eVqsHoY/FwIv9T7lPu9+Yf8/9+w4nS1ma78AAAAASUVORK5CYII=")
			repeat scroll left top;
	}

	.bg-solid {
		background: vars.$rgb-bg--night;
	}

	/* generic UI */
	.vr-0,
	.vr-1,
	.vr-2,
	.vr-3,
	.vr-4,
	.vr-5 {
		border-color: vars.$rgb-border-grey--night;
	}

	.vr-r {
		border-right-color: vars.$rgb-border-grey--night !important;
	}
	/* *** */

	.page__ {
		&header {
			color: vars.$rgb-font--night;
			background: vars.$rgb-off-black;
		}

		&title--home {
			span {
				color: #909090;
			}

			&::after {
				color: #909090;
			}
		}

		&title {
			color: #d0d0d0;
		}
	}

	.page__nav-inner > li.active > a,
	.page__nav-inner > li.active > a:focus,
	.page__nav-inner > li.active > a:hover {
		background-color: vars.$rgb-off-black;
		border-top: 0;
		border-color: vars.$rgb-border-grey--night;
		border-left-color: transparent;
		border-right-color: transparent;
		color: #d0d0d0;
	}

	.text-muted {
		color: color.adjust(vars.$rgb-font--night, $lightness: - 15%) !important;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: vars.$rgb-font--night;
	}

	.b-1p {
		border-color: vars.$rgb-border-grey--night !important;
	}

	.bt-1p {
		border-top-color: vars.$rgb-border-grey--night !important;
	}

	.br-1p {
		border-right-color: vars.$rgb-border-grey--night !important;
	}

	.bb-1p {
		border-bottom-color: vars.$rgb-border-grey--night !important;

		&-trans {
			border-bottom-color: vars.$rgb-border-grey--trans-night !important;
		}
	}

	.bl-1p {
		border-left-color: vars.$rgb-border-grey--night !important;
	}

	pre {
		color: vars.$rgb-font--night;
		background: vars.$rgb-bg--night;
		border-color: vars.$rgb-border-grey--night;
	}

	hr {
		border-color: vars.$rgb-border-grey--night;
	}

	#legal-notice {
		background: vars.$rgb-bg--night;
		color: #999;
	}

	a,
	.roller {
		color: vars.$rgb-link-blue--night;
	}

	.hwin__top-border-icon {
		color: vars.$rgb-font--night;

		&:hover {
			color: color.adjust(vars.$rgb-font--night, $lightness: vars.$pct-darken-hover);
		}
	}

	.text-muted {
		a,
		.roller {
			color: vars.$rgb-link-blue--muted-night;
		}
	}

	.btn:hover {
		box-shadow: 0 0 1px 1px #888;
	}

	.btn[disabled]:hover {
		box-shadow: initial;
	}

	.btn-default,
	.btn-default:hover,
	.btn-default:focus,
	.btn-default:active {
		background-color: vars.$rgb-form-control-bg--night;
		color: vars.$rgb-font--night;
		border-color: vars.$rgb-border-grey--night;
	}

	.btn-primary,
	.btn-primary:hover,
	.btn-primary:focus,
	.btn-primary:active {
		background-color: vars.$rgb-btn-primary-blue--night;
		color: vars.$rgb-font--night;
	}

	.btn-danger,
	.btn-danger:hover,
	.btn-danger:focus,
	.btn-danger:active {
		background-color: vars.$rgb-btn-danger-red--night;
		color: vars.$rgb-font--night;
	}

	.btn-danger:hover {
		box-shadow: 0 0 1px 1px #d43f3a;
	}

	.btn-warning,
	.btn-warning:hover,
	.btn-warning:focus,
	.btn-warning:active {
		background-color: vars.$rgb-btn-warning-orange--night;
		color: vars.$rgb-font--night;
	}

	.btn-info,
	.btn-info:hover,
	.btn-info:focus,
	.btn-info:active {
		background-color: vars.$rgb-btn-info-blue--night;
		color: vars.$rgb-font--night;
	}

	.btn-success,
	.btn-success:hover,
	.btn-success:focus,
	.btn-success:active {
		background-color: vars.$rgb-btn-success-green--night;
		color: vars.$rgb-font--night;
	}

	.btn-default.active {
		background-color: #888;
		box-shadow: inset 0 3px 7px #111e;
		color: #222;
	}

	.btn-primary.active,
	.btn-danger.active,
	.btn-warning.active,
	.btn-info.active,
	.btn-success.active {
		box-shadow: inset 0 3px 7px #111e;
	}

	.btn-nowrap {
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	dialog.dialog-modal,
	.ve-dropdown-menu {
		background: vars.$rgb-bg--night;
		color: vars.$rgb-font--night;
		box-shadow: 0 6px 12px rgb(0 0 0 / 56%);
	}

	.ve-dropdown-menu > li {
		> a,
		> span {
			color: vars.$rgb-font--night;

			&:focus,
			&:hover {
				background-color: vars.$rgb-bg--alt-night;
				color: #fff;
			}
		}

		&.ctx-danger {
			> a,
			> span {
				color: #fff;
				background-color: vars.$rgb-btn-danger-bg-red--night;

				&:focus,
				&:hover {
					color: #fff;
					background-color: vars.$rgb-btn-danger-border-red;
				}
			}
		}

		&.active {
			> a,
			> span {
				color: #fff;
			}
		}

		&.disabled {
			> a,
			> span {
				color: vars.$rgb-ctx-item-text-disabled;

				&:focus,
				&:hover {
					color: vars.$rgb-ctx-item-text-disabled;
					background: transparent;
				}
			}
		}
	}

	.ve-dropdown-menu .divider {
		background-color: vars.$rgb-border-grey--night;
	}

	select,
	input {
		background-color: vars.$rgb-bg--night;
		color: vars.$rgb-font--night;
	}

	select option {
		color: vars.$rgb-font--night;
		background: vars.$rgb-bg--night;
	}

	.list .row {
		background: vars.$rgb-bg--night;
	}

	/* Bootstrap overrides */
	.table-striped > tbody > tr:nth-of-type(odd) {
		background-color: #444;
	}

	.alert-info {
		color: #fff;
		background-color: color.adjust(vars.$rgb-alert-info-blue--night, $alpha: - 0.5);
		border-color: vars.$rgb-alert-info-border-blue--night;

		.alert-link {
			color: vars.$rgb-alert-info-border-blue--night;
		}
	}

	.alert-danger {
		color: #fff;
		background-color: color.adjust(vars.$rgb-alert-danger-red--night, $alpha: - 0.5);
		border-color: vars.$rgb-alert-danger-border-red--night;

		.alert-link {
			color: vars.$rgb-alert-danger-border-red--night;
		}
	}

	.alert-warning {
		color: #fff;
		background-color: color.adjust(vars.$rgb-alert-warning-orange--night, $alpha: - 0.5);
		border-color: vars.$rgb-alert-warning-border-orange--night;

		.alert-link {
			color: vars.$rgb-alert-warning-border-orange--night;
		}
	}

	.alert-success {
		color: #fff;
		background-color: color.adjust(vars.$rgb-alert-success-green--night, $alpha: - 0.5);
		border-color: vars.$rgb-alert-success-border-green--night;

		.alert-link {
			color: vars.$rgb-alert-success-border-green--night;
		}
	}

	.input-group-addon,
	.form-control {
		background: vars.$rgb-form-control-bg--night;
		color: vars.$rgb-font--night;
		border-color: vars.$rgb-border-grey--night;
	}

	.form-control[disabled] {
		background: #0e0e0e88;
	}

	.form-control--error,
	.form-control--error[readonly],
	.form-control--error[disabled] {
		background-color: #3e0000 !important;
		border: 1px solid #843534 !important;
	}

	.form-control--error:focus,
	.form-control--error[readonly]:focus,
	.form-control--error[disabled]:focus {
		border-color: #843534 !important;
		box-shadow:
			inset 0 1px 1px rgb(0 0 0 / 7.5%),
			0 0 8px #ce8483 !important;
	}

	.form-control--warning,
	.form-control--warning[readonly],
	.form-control--warning[disabled] {
		background-color: #483700;
		border-color: #846334;
	}

	.form-control--warning:focus,
	.form-control--warning[readonly]:focus,
	.form-control--warning[disabled]:focus {
		border-color: #846334;
		box-shadow:
			inset 0 1px 1px rgb(0 0 0 / 7.5%),
			0 0 8px #ceaa83;
	}

	/* *** */
	.omni__ {
		&wrp-input {
			&--scrolled {
				.omni__input {
					border-color: vars.$rgb-border-grey--night;
					background-color: vars.$rgb-bg--night;
					color: transparent;

					&:focus,
					&:focus-within,
					&:active,
					&:hover {
						color: vars.$rgb-font--night;
					}
				}

				.omni__submit {
					border-color: vars.$rgb-border-grey--night;
				}
			}
		}

		&input {
			@media screen and (width > #{vars.$width-screen-md}) {
				border-top-color: transparent;
			}

			&:focus {
				border-color: #66afe9;
			}
		}

		&submit {
			border-top-color: vars.$rgb-border-grey--night;

			@media screen and (width > #{vars.$width-screen-md}) {
				border-top-color: transparent;
			}

			&.btn-default:active:focus,
			&.btn-default:active:hover,
			&.btn-default {
				background-color: vars.$rgb-bg--night;
				color: vars.$rgb-font--night;
			}
		}
	}

	#pointbuy {
		input {
			&[type="number"] {
				border: 1px solid vars.$rgb-border-grey--night;
				outline-offset: 0;
				outline: none;
			}

			&.form-control--error[type="number"] {
				border: 1px solid #f00;
			}
		}
	}

	.stats {
		background: vars.$rgb-bg--night;
	}

	.lst__ {
		&row {
			background: vars.$rgb-bg--night;

			&:hover {
				background: vars.$rgb-off-black;
			}

			&-inner {
				color: inherit;
			}
		}

		&wrp-preview {
			background: vars.$rgb-bg--night;
		}

		&wrp-preview-inner {
			border-color: vars.$rgb-border-grey--list-row-night;
		}

		&btn-toggle-expand {
			&:hover {
				background: #ffffff30;
			}
		}
	}

	@media screen and (width > #{vars.$width-screen-hg}) {
		#listcontainer.book-contents {
			background: vars.$rgb-bg--night;
			border-right: 1px solid #404040;
		}
	}

	.bk__ {
		&head-chapter--active,
		&head-section--active {
			background: vars.$rgb-bg--alt-night;
		}
	}

	.bklist__ {
		&wrp-rows-inner {
			background: vars.$rgb-bg--night;
		}

		&vr-contents {
			border-color: vars.$rgb-border-grey--list-row-night;
		}
	}

	.hwin .hoverborder,
	th.border,
	.stats--book th.border {
		background: vars.$rgb-border-grey--statblock-night;
	}

	.hwin__wrp-table {
		background: vars.$rgb-bg--night;
	}

	.wrp-stats-table {
		border-top: 1px solid vars.$rgb-border-grey--statblock-night;
		border-bottom: 1px solid vars.$rgb-border-grey--statblock-night;
	}

	.stats--book ::selection {
		color: #242527;
		background: #fff;
	}

	tr.text td {
		color: vars.$rgb-font--night !important;
	}

	tr.text td {
		color: vars.$rgb-font--night !important;
	}

	.mon__ {
		&btn-token-cycle {
			color: #ddd;
			background: rgb(255 255 255 / 15%);

			&:hover {
				color: vars.$rgb-font--night;
			}
		}

		&token-footer {
			color: #ddd;
			background: vars.$rgb-bg--night;
		}
	}

	tr.trait td,
	tr.action td,
	tr.reaction td,
	tr.legendary td {
		color: vars.$rgb-font--night !important;
	}

	.life__output {
		background: vars.$rgb-bg--night;
	}

	.f-all-wrapper > input,
	.f-all-out,
	.omni__output {
		background: #303030;
	}

	.f-all-out > p:nth-child(odd) {
		background: #202020;
	}

	.omni__paginate-ctrl:hover {
		color: #999;
	}

	#msbcr tr:nth-child(even) {
		background: rgb(0 0 0 / 31%);
	}

	#croutput {
		background: rgb(0 0 0 / 31%);
	}

	.stats-name {
		color: vars.$rgb-name-red--night;
	}

	.stats .divider div {
		background-color: vars.$rgb-name-red--night;
	}

	.stripe-odd-table > tbody > tr:nth-child(odd),
	.stripe-even-table > tbody > tr:nth-child(even) {
		background-color: vars.$rgb-stripe-grey--night;
	}

	#please-select-message.showing > td {
		color: vars.$rgb-name-red--night;
	}

	#actions,
	#reactions,
	#legendaries,
	#lairactions,
	#regionaleffects {
		td {
			border-bottom-color: vars.$rgb-name-red--night;
			color: vars.$rgb-name-red--night;
		}
	}

	.mon__stat-header-underline {
		border-bottom-color: vars.$rgb-name-red--night;
	}

	.mon__sect-header-inner {
		color: vars.$rgb-name-red--night;
	}

	.bkmv {
		background: #272727;
	}

	.bkmv__spacer-name {
		background-color: vars.$rgb-border-grey--statblock-night;
	}

	.lst--border {
		border-color: vars.$rgb-border-grey--list-row-night;
	}

	.list-multi-selected .lst--border {
		border-color: #416482;
	}

	.list-multi-selected.lst__row--sublist {
		.lst--border {
			border-color: vars.$rgb-border-grey--night;
		}
	}

	#rulescontent caption {
		color: vars.$rgb-font--night;
	}

	tr.trait td {
		color: vars.$rgb-font--night !important;
	}

	::-webkit-scrollbar-thumb {
		background: #475b6b;
	}

	/**** Search and filter bar ****/
	.mon__cr_slider_wrp {
		background: vars.$rgb-bg--night;
		color: #bbb;
	}

	.hwin table.summary-noback th,
	.hwin table.summary th {
		color: vars.$rgb-font--night;
	}

	.hwin .hoverborder .window-title {
		color: vars.$rgb-font--night;
	}

	.rollbox {
		background: #272727;
	}

	.rollbox .ipt-roll {
		background: #272727;
	}

	.rollbox-min,
	.rollbox .head-roll {
		background: #101010;
	}

	.rollbox-min:hover,
	.rollbox .head-roll:hover {
		background: #161616;
	}

	.rollbox .out-roll .out-roll-item {
		background: rgb(80 80 80 / 40%);
	}

	.rollbox .out-roll .out-roll-item .out-roll-item-code {
		background: #555;
	}

	.life__output-wrp-border {
		border: 1px solid rgb(255 255 255 / 15%);
	}

	.hwin td div.border {
		background-color: vars.$rgb-name-red--night;
	}

	.initial-message {
		color: vars.$rgb-name-red--night;
	}

	.panel-content-textarea {
		background: vars.$rgb-bg--night;
	}

	.content-tab-bar {
		background: vars.$rgb-bg--night;
	}

	.highlight {
		color: vars.$rgb-bg--night;
		background-color: vars.$rgb-bg-highlight--night;
	}

	/* *** */

	/* side menu */
	.sidemenu__row__divider {
		background: #9998;
	}

	.sidemenu {
		background: vars.$rgb-bg--night;
	}

	.sidemenu__toggle {
		background: #444;
	}

	.sidemenu__burger {
		background: vars.$rgb-bg--night;
	}
	/* *** */

	/* player init tracker */
	.initp__r--active {
		background: #8dc1ff20;
	}
	/* *** */
}

.night-mode--alt {
	body {
		background: #1c1c1c;
	}
}
/* Night Mode End */

/* region Cancer */
.cancer__ {
	&wrp-leaderboard {
		margin: 0 auto;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex-shrink: 0;
		flex-grow: 0;
		min-height: 0;
		overflow: hidden;

		&-inner {
			display: flex;
			width: 100%;
			justify-content: center;
		}
	}

	&disp-cancer {
		width: 100%;
		justify-content: center;
		font-size: 9px;
		padding: 2px 0;
		opacity: 0.6;
		display: none;
	}

	&wrp-sidebar-rhs {
		position: fixed;
		z-index: 1;
		top: 160px;
		right: calc((50vw - (1170px / 2)) - 300px);
		width: 300px;
		height: 100%;

		> * {
			margin-bottom: 10px;
		}

		&--single {
			height: calc(100% - 80px);
		}

		&--scrolling-page {
			position: absolute;
			top: 150px;
		}

		@media screen and (width <= 1800px) {
			display: none;
		}
	}

	&sidebar-rhs-inner {
		position: sticky;

		&--top {
			top: 10px;
		}

		&--bottom {
			top: 620px;
		}
	}

	&footer-pad {
		height: 100px;
	}

	&wrp-mobile-1 {
		display: flex;
		flex-direction: column;
	}
}

.cancer__sidebar-rhs-inner--scrolling-page .cancer__sidebar-rhs-inner {
	&--top {
		top: 20px;
	}

	&--bottom {
		top: 630px;
	}
}

.night-mode {
	.cancer__ {
		&wrp-leaderboard {
			background: vars.$rgb-off-black;
		}
	}
}
/* endregion */

// "Update your Browser" overlay
.edge__ {
	&body {
		overflow: hidden !important;
	}

	&overlay {
		background: #8b0000;
		position: fixed;
		z-index: 99999;
		inset: 0;
		width: 100vw;
		height: 100vh;
		color: #fff;
		font-family: monospace;
	}

	&title {
		font-size: 72px;
	}

	&btn-close {
		position: absolute;
		top: 8px;
		right: 8px;
		font-size: 16px;
	}

	&link {
		color: #fff !important;
		text-decoration: underline;
	}
}

.TEST {
	&_LEADER {
		background: #f0f;
		user-select: none;
		color: #fff;
		width: 728px;
		height: 90px;
	}

	&_RHS_TOP {
		background: #f0f;
		user-select: none;
		color: #fff;
		width: 300px;
		height: 600px;
	}

	&_RHS_BOTTOM {
		background: #0f0;
		user-select: none;
		color: #fff;
		width: 300px;
		height: 250px;
	}
}
/* Cancer end */

/****************************************
 * Print styles
 ***************************************/

@include vars.mix-is-print {
	@page {
		margin: 10mm 15mm;
	}

	// region general
	body {
		color: #000 !important;
		overflow: visible !important;
		background: none !important;
		font-size: 10px !important;
	}

	header,
	nav {
		display: none !important;
	}

	strong,
	.bold {
		font-weight: 600;
	}

	a[href]::after {
		content: none !important; // Remove auto-expanded link URLs
	}

	.help,
	.help--hover {
		text-decoration: none !important;
	}

	.btn-reroll,
	.rollbox-min,
	.rollbox,
	.spacer-name {
		display: none !important;
	}

	a,
	.roller {
		color: #000 !important;
	}
	// endregion

	// region stats
	.stats .stats-source,
	.stats-source-abbreviation,
	.stats th {
		color: #000 !important;
	}

	th.border,
	.wrp-stats-table th.border {
		background: #000 !important;
		height: 1px !important;
	}

	td.divider div {
		height: 1px !important;
		background: #000 !important;
		margin: 0 !important;
	}

	.stats td,
	.stats th {
		padding: 1px 2px !important;
	}

	.stats--book-large {
		.rd__b--3,
		table,
		p {
			margin: 0 0 3px !important;
		}
	}

	.stats--book {
		box-shadow: none !important;
	}
	// endregion

	// region list pages
	#listcontainer,
	#stat-tabs,
	#float-token,
	.btn-name-pronounce,
	.btn-stats-name {
		display: none !important;
	}

	.wrp-stats-table {
		border-top: 0 !important;
		border-bottom: 0 !important;
	}
	// endregion

	// region classes.html
	#sticky-nav {
		display: none !important;
	}

	#classtable table tr:nth-child(odd) td {
		background: #d3d3d3 !important;
	}
	// endregion

	// region bestiary.html
	.mon__name--token .stats-source {
		padding-right: 0 !important;
	}

	.mon__stat-header-underline {
		border-bottom: 1px solid #000 !important;
		color: #000 !important;
	}
	// endregion

	// region render
	.rd__b-inset {
		background: none !important;
		box-shadow: none !important;
		border-color: #000 !important;
	}

	.rd__b-special,
	.rd__li {
		break-inside: avoid;
		page-break-inside: avoid;
	}
	// endregion

	.bkmv-active > *:not(.bkmv) {
		display: none !important;
	}

	.bkmv-active .bkmv {
		position: relative;
		top: unset;
		right: unset;
		bottom: unset;
		left: unset;
		width: calc(100vw - 20px);

		&__ {
			&no-breaks {
				break-before: unset !important;
				break-after: unset !important;
				break-inside: unset !important;
			}

			&wrp--columns-1 {
				column-count: 1;
			}

			&wrp--columns-2 {
				column-count: 2;
			}
		}

		th.border {
			border: 0 !important;
			padding: 0 !important;
		}
	}

	.stats--bkmv {
		break-before: auto !important;
		break-after: auto !important;
		break-inside: avoid !important;

		tr {
			break-inside: auto !important;
		}
	}

	.toast {
		display: none !important;
	}

	.cancer__anchor {
		display: none !important;
	}
}