@import "includes/vars";

// region class
.cls__ {
	&list {
		max-height: 400px;
	}

	&squash_header {
		overflow: hidden;
		max-height: 32px;
		display: block;
		width: min-content;
		margin: 0 auto;
	}

	&btn-toggle-sidebar {
		cursor: pointer;
		font-size: initial;
		color: $rgb-off-black;
	}

	// region buttons
	&btn-cf {
		&--active {
			color: white;
			background: $rgb-name-red;

			&:active,
			&:focus,
			&:hover,
			&:active:focus,
			&:active:hover {
				color: white;
				background: darken($rgb-name-red, $pct-darken-active);
			}
		}
	}

	&btn-sc {
		&--reprinted {
			color: #777;
		}

		&--active-fresh {
			color: white;
			background: $rgb-subclass;
			border-color: darken($rgb-subclass, $pct-darken-border);

			&:active,
			&:focus,
			&:hover,
			&:active:focus,
			&:active:hover {
				color: white;
				background: darken($rgb-subclass, $pct-darken-active);
				border-color: darken($rgb-subclass, $pct-darken-border--active);
			}
		}

		&--active-reprinted {
			color: white;
			background: $rgb-subclass--stale;
			border-color: darken($rgb-subclass--stale, $pct-darken-border);

			&:active,
			&:focus,
			&:hover,
			&:active:focus,
			&:active:hover {
				color: white;
				background: darken($rgb-subclass--stale, $pct-darken-active);
				border-color: darken($rgb-subclass--stale, $pct-darken-border--active);
			}
		}

		&--active-spicy {
			color: white;
			background: $rgb-subclass-ua;
			border-color: darken($rgb-subclass-ua, $pct-darken-border);

			&:active,
			&:focus,
			&:hover,
			&:active:focus,
			&:active:hover {
				color: white;
				background: darken($rgb-subclass-ua, $pct-darken-active);
				border-color: darken($rgb-subclass-ua, $pct-darken-border--active);
			}
		}

		&--active-stale {
			color: white;
			background: $rgb-subclass-ua--stale;
			border-color: darken($rgb-subclass-ua--stale, $pct-darken-border);

			&:active,
			&:focus,
			&:hover,
			&:active:focus,
			&:active:hover {
				color: white;
				background: darken($rgb-subclass-ua--stale, $pct-darken-active);
				border-color: darken($rgb-subclass-ua--stale, $pct-darken-border--active);
			}
		}

		&--active-brew {
			color: white;
			background: $rgb-class-brew;
			border-color: darken($rgb-class-brew, $pct-darken-border);

			&:active,
			&:focus,
			&:hover,
			&:active:focus,
			&:active:hover {
				color: white;
				background: darken($rgb-class-brew, $pct-darken-active);
				border-color: darken($rgb-class-brew, $pct-darken-border--active);
			}
		}

		&--active-rebrewed {
			color: white;
			background: $rgb-class-variant-brew;
			border-color: darken($rgb-class-variant-brew, $pct-darken-border);

			&:active,
			&:focus,
			&:hover,
			&:active:focus,
			&:active:hover {
				color: white;
				background: darken($rgb-class-variant-brew, $pct-darken-active);
				border-color: darken($rgb-class-variant-brew, $pct-darken-border--active);
			}
		}
	}
	// endregion

	// region Header coloring
	// `feature-<variant>-<ua|brew>-<subclass>-<reprint>`
	// See: `_getColorStyleClasses`
	&feature-variant-subclass {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-class-variant;
			border-bottom-color: $rgb-class-variant;
		}
	}

	&feature-variant-ua-subclass {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-class-ua;
			border-bottom-color: $rgb-class-ua;
		}
	}

	&feature-variant-brew-subclass {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-class-variant-brew;
			border-bottom-color: $rgb-class-variant-brew;
		}
	}

	&feature-subclass-reprint {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-subclass--stale;
			border-bottom-color: $rgb-subclass--stale;
		}
	}

	&feature-ua-subclass-reprint {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-subclass-ua--stale;
			border-bottom-color: $rgb-subclass-ua--stale;
		}
	}

	&feature-brew-subclass-reprint {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-class-variant-brew;
			border-bottom-color: $rgb-class-variant-brew;
		}
	}

	&feature-subclass {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-subclass;
			border-bottom-color: $rgb-subclass;
		}
	}

	&feature-ua-subclass {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-subclass-ua;
			border-bottom-color: $rgb-subclass-ua;
		}
	}

	&feature-brew-subclass {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-class-brew;
			border-bottom-color: $rgb-class-brew;
		}
	}

	&feature-variant {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-class-variant;
			border-bottom-color: $rgb-class-variant;
		}
	}

	&feature-variant-ua {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-class-ua;
			border-bottom-color: $rgb-class-ua;
		}
	}

	&feature-variant-brew {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-class-variant-brew;
			border-bottom-color: $rgb-class-variant-brew;
		}
	}

	&feature-ua {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-class-ua;
			border-bottom-color: $rgb-class-ua;
		}
	}

	&feature-brew {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-class-brew;
			border-bottom-color: $rgb-class-brew;
		}
	}
	// endregion
}

.night-mode .cls__ {
	&btn-toggle-sidebar {
		color: #bbb;
	}

	// region buttons
	&btn-cf {
		&--active {
			color: $rgb-off-black;
			background: $rgb-name-red--night;

			&:active,
			&:focus,
			&:hover,
			&:active:focus,
			&:active:hover {
				color: $rgb-off-black;
				background: darken($rgb-name-red--night, $pct-darken-active);
			}
		}
	}

	&btn-sc {
		&--reprinted {
			color: #888;
		}

		&--active-fresh {
			color: white;
			background: $rgb-subclass--night;
			border-color: darken($rgb-subclass--night, $pct-darken-border);

			&:active,
			&:focus,
			&:hover,
			&:active:focus,
			&:active:hover {
				color: white;
				background: darken($rgb-subclass--night, $pct-darken-active);
				border-color: darken($rgb-subclass--night, $pct-darken-border--active);
			}
		}

		&--active-reprinted {
			color: white;
			background: $rgb-subclass--night-stale;
			border-color: darken($rgb-subclass--night-stale, $pct-darken-border);

			&:active,
			&:focus,
			&:hover,
			&:active:focus,
			&:active:hover {
				color: white;
				background: darken($rgb-subclass--night-stale, $pct-darken-active);
				border-color: darken($rgb-subclass--night-stale, $pct-darken-border--active);
			}
		}

		&--active-spicy {
			color: white;
			background: $rgb-subclass-ua--night;
			border-color: darken($rgb-subclass-ua--night, $pct-darken-border);

			&:active,
			&:focus,
			&:hover,
			&:active:focus,
			&:active:hover {
				color: white;
				background: darken($rgb-subclass-ua--night, $pct-darken-active);
				border-color: darken($rgb-subclass-ua--night, $pct-darken-border--active);
			}
		}

		&--active-stale {
			color: white;
			background: $rgb-subclass-ua--night-stale;
			border-color: darken($rgb-subclass-ua--night-stale, $pct-darken-border);

			&:active,
			&:focus,
			&:hover,
			&:active:focus,
			&:active:hover {
				color: white;
				background: darken($rgb-subclass-ua--night-stale, $pct-darken-active);
				border-color: darken($rgb-subclass-ua--night-stale, $pct-darken-border--active);
			}
		}

		&--active-brew {
			color: white;
			background: $rgb-class-brew--night;
			border-color: darken($rgb-class-brew--night, $pct-darken-border);

			&:active,
			&:focus,
			&:hover,
			&:active:focus,
			&:active:hover {
				color: white;
				background: darken($rgb-class-brew--night, $pct-darken-active);
				border-color: darken($rgb-class-brew--night, $pct-darken-border--active);
			}
		}

		&--active-rebrewed {
			color: white;
			background: $rgb-class-variant-brew--night;
			border-color: darken($rgb-class-variant-brew--night, $pct-darken-border);

			&:active,
			&:focus,
			&:hover,
			&:active:focus,
			&:active:hover {
				color: white;
				background: darken($rgb-class-variant-brew--night, $pct-darken-active);
				border-color: darken($rgb-class-variant-brew--night, $pct-darken-border--active);
			}
		}
	}
	// endregion

	// region Header coloring
	// `feature-<variant>-<ua|brew>-<subclass>-<reprint>`
	&feature-variant-subclass {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-class-variant--night;
			border-bottom-color: $rgb-class-variant--night;
		}
	}

	&feature-variant-ua-subclass {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-class-ua--night;
			border-bottom-color: $rgb-class-ua--night;
		}
	}

	&feature-subclass-reprint {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-subclass--night-stale;
			border-bottom-color: $rgb-subclass--night-stale;
		}
	}

	&feature-ua-subclass-reprint {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-subclass-ua--night-stale;
			border-bottom-color: $rgb-subclass-ua--night-stale;
		}
	}

	&feature-subclass {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-subclass--night;
			border-bottom-color: $rgb-subclass--night;
		}
	}

	&feature-ua-subclass {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-subclass-ua--night;
			border-bottom-color: $rgb-subclass-ua--night;
		}
	}

	&feature-brew-subclass {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-class-brew--night;
			border-bottom-color: $rgb-class-brew--night;
		}
	}

	&feature-brew-subclass-reprint {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-class-variant-brew--night;
			border-bottom-color: $rgb-class-variant-brew--night;
		}
	}

	&feature-variant-brew-subclass {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-class-variant-brew--night;
			border-bottom-color: $rgb-class-variant-brew--night;
		}
	}

	&feature-variant {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-class-variant--night;
			border-bottom-color: $rgb-class-variant--night;
		}
	}

	&feature-variant-ua {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-class-ua--night;
			border-bottom-color: $rgb-class-ua--night;
		}
	}

	&feature-variant-brew {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-class-variant-brew--night;
			border-bottom-color: $rgb-class-variant-brew--night;
		}
	}

	&feature-ua {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-class-ua--night;
			border-bottom-color: $rgb-class-ua--night;
		}
	}

	&feature-brew {
		.rd__h--0,
		.rd__h--1,
		.rd__h--2 {
			color: $rgb-class-brew--night;
			border-bottom-color: $rgb-class-brew--night;
		}
	}
	// endregion
}
// endregion

// region class table
@import "includes/classes-table";

.night-mode {
	.cls-tbl {
		background: $rgb-bg--night;

		> tbody > tr > th {
			color: $rgb-font--night;
		}

		&__ {
			&disp-name {
				color: $rgb-font--night;
			}

			&col-group::after {
				border-color: $rgb-border-grey--night;
			}

			&stripe-odd:nth-child(odd) {
				background: $rgb-stripe-grey;
			}
		}
	}
}
// endregion

// region sidebar
.cls-side__ {
	&name {
		font-size: 1.8em;
		font-family: "Times New Roman", serif;
		font-variant: small-caps;
		font-weight: 500;
	}

	&btn-toggle {
		cursor: pointer;
		font-size: initial;
		font-weight: initial;
		color: $rgb-off-black;
	}

	&section {
		font-size: 0.8em;
		padding: 4px 7px;
	}

	&section-head {
		font-family: serif;
		font-weight: 500;
		font-size: 1.5em;
		margin-top: 4px;
		margin-bottom: 0;
	}
}

.night-mode {
	.cls-side__ {
		&btn-toggle {
			color: $rgb-font--night;
		}
	}
}
// endregion

// region subclass tabs
.cls-tabs__ {
	&wrp {
		align-items: baseline;

		@media (max-width: $width-screen-md) {
			flex-direction: column !important;
		}
	}

	&sc-not-shown {
		font-size: 10px;
	}

	&sel-preset {
		width: 80px;
	}
}
// endregion

// region main text
.cls-main__ {
	&msg-no-content {
		height: 40px;
		color: $rgb-name-red;
		font-family: "Times New Roman", serif;
		font-variant: small-caps;
		font-weight: 500;
		line-height: 2.3em;
		text-align: center;
		font-size: 1.8em;
	}

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

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

.night-mode .cls-main__ {
	&msg-no-content {
		color: $rgb-name-red--night;
	}
}
// endregion

// region comparison view
.cls-comp__wrp-features {
	width: 400px;
	max-width: calc(100vw - #{2 * $spacer});
}
// endregion

// region class book view
.cls-bkmv__ {
	&wrp-tabs {
		background-color: #eee;
		border-bottom: 1px solid $rgb-border-grey;
	}

	&btn-tab {
		font-size: 0.8em;
		margin-top: 2px;
		padding: 2px 6px;
		cursor: pointer;
		user-select: none;
		border-right: 1px solid $rgb-border-grey;
		border-left: 1px solid $rgb-border-grey;
		border-top: 1px solid $rgb-border-grey;
		border-top-right-radius: 4px;
		border-top-left-radius: 4px;
	}

	&wrp-level {
		z-index: 1;
		left: -1px;
		background: $rgb-bg--alt;
	}

	&disp-level {
		transform: rotate(180deg);
		writing-mode: vertical-rl;
	}

	// region TODO are these used?
	&btn-tab.active {
		background: $rgb-active-blue;
		color: white;
	}

	&btn-tab.active {
		border-color: darken($rgb-active-blue, $pct-darken-border);
	}

	&btn-tab.active.spicy-sauce {
		background: $rgb-subclass-ua;
		color: white;
	}

	&btn-tab.active.spicy-sauce {
		border-color: darken($rgb-subclass-ua, $pct-darken-border);
	}

	&btn-tab.active.refreshing-brew {
		background: $rgb-class-brew;
		color: white;
	}

	&btn-tab.active.refreshing-brew {
		border-color: darken($rgb-class-brew, $pct-darken-border);
	}
	// endregion
}

.night-mode .cls-bkmv__ {
	&wrp-tabs {
		background-color: #222;
		border-color: $rgb-border-grey--night;
	}

	&btn-tab {
		border-color: $rgb-border-grey--night;
	}

	&wrp-level {
		background: $rgb-bg--alt-night;
	}
}
// endregion

// region outline
.cls-nav {
	width: 100%;
	position: sticky;
	top: 15px;
	overflow-y: hidden;
	margin-top: 15px;
	max-height: calc(100vh - 30px);
	padding-right: 9px;
	padding-left: 9px;
	font-family: "Times New Roman", serif;
	font-variant: small-caps;
	font-weight: 500;

	&:hover {
		overflow-y: scroll;
		padding-right: 0;
	}

	&__ {
		&head {
			color: #00000020;

			&--active,
			&:hover {
				color: inherit;
			}
		}

		&disp-toggle {
			&::after {
				content: " [+]";
				font-weight: initial;
			}

			&--active::after {
				content: "[\2012]";
				font-weight: initial;
			}
		}

		&head-inner {
			font-weight: bold;
			cursor: pointer;
		}

		&hr {
			margin: 2px;
		}

		&item {
			@include overflow-dots();

			cursor: pointer;
			user-select: none;
			max-height: 20px;
			color: $rgb-name-red;

			&:hover {
				background: lightgrey;
			}

			&:active {
				color: #e0e0e0;
			}

			// region Header coloring
			// `feature-<variant>-<ua|brew>-<subclass>-<reprint>`
			&--feature-variant-subclass {
				color: $rgb-class-variant;
			}

			&--feature-variant-ua-subclass {
				color: $rgb-class-ua;
			}

			&--feature-subclass-reprint {
				color: $rgb-subclass--stale;
			}

			&--feature-ua-subclass-reprint {
				color: $rgb-subclass-ua--stale;
			}

			&--feature-subclass {
				color: $rgb-subclass;
			}

			&--feature-ua-subclass {
				color: $rgb-subclass-ua;
			}

			&--feature-brew-subclass {
				color: $rgb-class-brew;
			}

			&--feature-brew-subclass-reprint {
				color: $rgb-class-variant-brew;
			}

			&--feature-variant-brew-subclass {
				color: $rgb-class-variant-brew;
			}

			&--feature-variant {
				color: $rgb-class-variant;
			}

			&--feature-variant-ua {
				color: $rgb-class-ua;
			}

			&--feature-variant-brew {
				color: $rgb-class-variant-brew;
			}

			&--feature-ua {
				color: $rgb-class-ua;
			}

			&--feature-brew {
				color: $rgb-class-brew;
			}
			// endregion

			// Section name
			&--depth-0 {
				font-weight: bold;
				font-size: 110%;
			}

			&--depth-2 {
				padding-left: 10px;

				&::before {
					content: "\2022  ";
				}
			}
		}
	}
}

.night-mode .cls-nav__ {
	&head {
		color: #bbbbbb40;

		&--active,
		&:hover {
			color: $rgb-font--night;
		}
	}

	&item {
		color: $rgb-name-red--night;

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

		&:active {
			color: white;
		}

		// region Header coloring
		// `feature-<variant>-<ua|brew>-<subclass>-<reprint>`
		&--feature-variant-subclass {
			color: $rgb-class-variant--night;
		}

		&--feature-variant-ua-subclass {
			color: $rgb-class-ua--night;
		}

		&--feature-subclass-reprint {
			color: $rgb-subclass--night-stale;
		}

		&--feature-ua-subclass-reprint {
			color: $rgb-subclass-ua--night-stale;
		}

		&--feature-brew-subclass-reprint {
			color: $rgb-class-variant-brew--night;
		}

		&--feature-subclass {
			color: $rgb-subclass--night;
		}

		&--feature-ua-subclass {
			color: $rgb-subclass-ua--night;
		}

		&--feature-ua-subclass-reprint {
			color: $rgb-subclass-ua--stale;
		}

		&--feature-brew-subclass {
			color: $rgb-class-brew--night;
		}

		&--feature-brew-subclass-reprint {
			color: $rgb-class-variant-brew;
		}

		&--feature-variant-brew-subclass {
			color: $rgb-class-variant-brew--night;
		}

		&--feature-variant {
			color: $rgb-class-variant--night;
		}

		&--feature-variant-ua {
			color: $rgb-class-ua--night;
		}

		&--feature-variant-brew {
			color: $rgb-class-variant-brew--night;
		}

		&--feature-ua {
			color: $rgb-class-ua--night;
		}

		&--feature-brew {
			color: $rgb-class-brew--night;
		}
		// endregion
	}
}
// endregion