/*
Renderer
 */

@use "vars";

$rgb-inset-border: #656565;

:root {
	--sz-font-h0: 1.8em;
	--sz-font-h1: 1.5em;
	--sz-font-h2: 1.35em;

	--h-mb-p: 5px;
	--h-mb-p-inline: 0;
	--h-mb-quote-line: 5px;
	--h-mb-quote-line-last: 5px;
	--h-mb-li: 3px;
	--w-text-indent-inline-p: 0.7em;
	--w-pl-list: 24px;
	--w-pl-list-no-bullets: 10px;
}

@mixin rd__h--large () {
	color: vars.$rgb-name-red;
	font-family: "Times New Roman", serif;
	font-variant: small-caps;
	font-weight: 500;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@keyframes rd__spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.rd {
	&__ {
		&b {
			p {
				margin-bottom: var(--h-mb-p);
			}
		}

		&b--0,
		&b--1,
		&b--2,
		&b--3,
		&b--4 {
			margin-bottom: var(--h-mb-p);

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

			> *:last-child {
				margin-bottom: 0;
			}
		}

		&hr {
			border-color: #aaa6;
			margin: 17px 0 5px;

			&--section {
				margin: 30px 0 5px;
			}
		}

		&list {
			margin-top: 0;
			margin-bottom: var(--h-mb-p);
			padding-left: var(--w-pl-list);

			> .rd__list:last-child {
				margin-bottom: 0;
			}

			> .rd__list-name {
				margin-left: calc(-1 * var(--w-pl-list));
			}
		}

		&list-name {
			margin: 0 0 var(--h-mb-li);
			font-weight: bold;
			list-style-type: none;
		}

		&li {
			margin-bottom: var(--h-mb-p);
		}

		&compact-stats {
			display: flex;
			flex-wrap: wrap;
			place-content: flex-start space-between;
			align-items: flex-start;
		}

		&title-link {
			opacity: 0.3;
			font-size: 12px;
			font-weight: normal;

			&--inset {
				font-size: 12px;
			}
		}

		&wrp-image {
			margin: 5px auto 0;
			text-align: center;
		}

		&image {
			// N.b. this width/height should be reflected in the renderer image styling
			max-width: 100%;
			max-height: 60vh;
			cursor: zoom-in;
		}

		&wrp-map {
			max-width: 33%;
			margin: 0 auto;
		}

		&wrp-gallery {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: flex-end;
		}

		&wrp-gallery-image {
			padding: 0 10px 10px;
			max-width: 33%;
		}

		&gallery-name {
			font-style: italic;
			text-decoration: underline;
		}

		&quote {
			&-line {
				margin-bottom: var(--h-mb-quote-line);

				&--last {
					margin-bottom: var(--h-mb-quote-line-last);
				}
			}

			&-by {
				width: 100%;
				text-align: right;
				display: block;
			}
		}

		&p-list-item {
			// This prevents e.g. "italic" on the list item name from affecting the list item"s text.
			font-style: initial;
		}

		&p-cont-indent {
			display: block;
			text-indent: 1em;
		}

		&tab-indent {
			width: 1em;
			display: inline-block;
		}

		&image-title {
			width: 100%;
			text-align: center;
			font-style: italic;
			margin-top: 3px;
		}

		&image-title-inner {
			display: inline-block;
			text-decoration: underline;
			margin: 2px 0; // Align with map viewer buttons, which are padded + bordered on all sides
		}

		&image-btn-viewer {
			// Style the button text to match normal image title labels
			font-style: initial;
			white-space: normal;
			font-size: inherit;
			line-height: 1.7;
		}

		&image-credit {
			font-size: 80%;
		}

		// Thicker scrollbars for viewer
		&scroller-viewer {
			scrollbar-width: auto;

			&::-webkit-scrollbar {
				width: 15px;
				height: 15px;
			}
		}

		&prerequisite {
			font-style: italic;
			display: block;
		}

		&li-spell {
			margin: 0;
		}

		&list-hang-notitle {
			padding: 0;
			list-style: none;

			> .rd__li {
				margin-bottom: var(--h-mb-li);
				text-indent: -1.1em;
				margin-left: 1.1em;

				a,
				span {
					text-indent: initial;
				}

				> * {
					margin: 0 0 var(--h-mb-li);
				}

				// fixme?
				> ul {
					text-indent: 0;
				}
			}
		}

		&list-hang {
			list-style: none;

			> .rd__list-name {
				margin-left: calc(-1 * var(--w-pl-list));
			}

			// Firefox workaround; list bullets are pseudo-elements "::marker"
			> li > *:not(::marker) {
				text-indent: -1.1em;
				margin-left: 1.1em;
			}
		}

		&list-decimal {
			list-style: decimal;
		}

		&list-lower-roman {
			list-style: lower-roman;
		}

		&list-upper-roman {
			list-style: upper-roman;
		}

		&list-no-bullets {
			list-style: none;
			padding: 0 0 0 var(--w-pl-list-no-bullets);

			> .rd__list-name {
				margin-left: calc(-1 * var(--w-pl-list-no-bullets));
			}
		}

		&list-italic {
			font-style: italic;
		}

		&quote {
			&-pull {
				padding: 10px 15px;
				text-align: center;
				font-size: 125%;
			}
		}

		// section headers
		&h {
			margin: 0;
			line-height: inherit;
		}

		// statsBlockSectionHead
		&h--0 {
			@include rd__h--large;

			font-size: var(--sz-font-h0);
		}

		// underline headers
		// statsBlockHead
		&h--1 {
			@include rd__h--large;

			font-size: var(--sz-font-h1);
			border-bottom: 1px solid vars.$rgb-name-red;
			margin: 0 0 0.2em;
		}

		// basic headers
		// statsBlockSubHead
		&h--2 {
			@include rd__h--large;

			font-size: var(--sz-font-h2);
		}

		// inset headers
		// statsBlockInset and statsBlockInsetReadaloud
		&h--2-inset {
			font-variant: small-caps;
			font-weight: bolder;
			font-size: 1.1em;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&-no-name {
				justify-content: flex-end;
				float: right;
			}
		}

		&h--2-flow-block {
			display: block;
			font-variant: small-caps;
			font-weight: bolder;
			font-size: 1.1em;
			text-align: center;
		}

		&h--2-inset > h4,
		&h--2-flow-block > h4 {
			font-size: inherit;
			font-weight: inherit;
			line-height: vars.$font-line-height;
			margin: 0;
		}

		// inline headers
		// statsInlineHead
		&h--3 {
			font-weight: bold;
			font-style: italic;
		}

		// sub-inline headers (only seen in monster variant)
		// statsInlineHeadSubVariant
		&h--4 {
			font-style: italic;
		}

		&h-toggle {
			font-family: Arial, sans-serif;
			font-size: 12px;
			opacity: 0.3;
			font-weight: normal;
		}

		&ele-toggled-hidden {
			display: none !important;
		}

		&b--3 > p,
		&b--4 > p {
			text-indent: var(--w-text-indent-inline-p);
			margin-bottom: var(--h-mb-p-inline);

			&:first-of-type {
				display: inline;
			}
		}

		&b-inset > p {
			text-indent: var(--w-text-indent-inline-p);
			margin-bottom: 0;

			&:first-of-type {
				text-indent: 0;
			}
		}

		&b-inset {
			margin: 7px 15px;
			padding: 5px 10px;
			box-shadow: 0 0 4px 0 rgb(152 142 124);
			border: 1px solid $rgb-inset-border;
			border-top: 2px solid $rgb-inset-border;
			border-bottom: 2px solid $rgb-inset-border;
			background-color: #e9ecda;

			> *:last-of-type {
				margin-bottom: 0;
			}

			&--readaloud {
				box-shadow: 0 0 4px 0 rgb(152 142 124);
				border: 1px solid $rgb-inset-border;
				border-left: 2px solid $rgb-inset-border;
				border-right: 2px solid $rgb-inset-border;
				background-color: #eef0f3;
			}

			&-inner {
				margin-top: 10px;
			}
		}

		&b-data {
			border: 3px solid vars.$rgb-border-yellow--statblock;
			border-left-width: 1px;
			border-right-width: 1px;
			margin: 5px;
			width: calc(100% - 12px);
			table-layout: fixed;

			&--inset {
				box-shadow: 0 0 4px 0 rgb(152 142 124);
				border: 1px solid $rgb-inset-border;
				background-color: rgb(156 150 120 / 10%);
			}
		}

		&li > .rd__b-data {
			margin: 0;
		}

		&data-embed {
			&-header {
				cursor: pointer;
				font-family: "Times New Roman", serif;
				font-variant: small-caps;
				text-transform: uppercase;
				font-weight: bold;

				&:hover {
					background: rgb(100 100 100 / 8%);
				}
			}

			&-toggle {
				font-family: Arial, sans-serif;
				float: right;
			}
		}

		&wrp-loadbrew--ready {
			cursor: pointer;
			text-decoration: underline;
		}

		&loadbrew-icon {
			text-indent: 0;
			margin-left: 2px;
			transition-property: transform;
			transition-duration: 1s;

			&--active {
				animation-name: rd__spin;
				animation-duration: 1.2s;
				animation-iteration-count: infinite;
				animation-timing-function: linear;
			}
		}

		&table {
			width: 100%;
			margin-bottom: var(--h-mb-p);

			> caption {
				text-align: left;
			}
		}

		&comic {
			font-family: "Blambot Casual", sans-serif;
			color: #1942be;

			&--h1 {
				font-size: 140%;
				font-variant: small-caps;
			}

			&--h2 {
				font-size: 130%;
			}

			&--h3 {
				font-size: 120%;
			}

			&--h4 {
				font-size: 110%;
			}

			&--note {
				opacity: 0.7;
			}

			&-img-speaker {
				margin-top: -5px;
				margin-bottom: -5px;

				&--left {
					float: left;
					margin-right: 0;
					margin-left: -20px;
				}

				&--right {
					float: right;
					margin-right: -20px;
					margin-left: 0;
				}

				&::after {
					content: "";
					clear: both;
					display: block;
				}
			}
		}

		&img {
			&-small {
				max-width: 25vw;
				max-height: 25vh;
			}
		}

		&s-v-flow {
			height: 15px;
			width: 0;
			border-left: 1px solid $rgb-inset-border;
			border-right: 1px solid $rgb-inset-border;
			margin: 0 auto;
		}

		&b-flow {
			margin: 0 15px;
			padding: 5px 10px;
			box-shadow: 0 0 4px 0 rgb(152 142 124);
			border: 1px solid $rgb-inset-border;
			border-top: 2px solid $rgb-inset-border;
			border-bottom: 2px solid $rgb-inset-border;
			background-color: #ece4da;

			> *:last-of-type {
				margin-bottom: 0;
			}
		}

		&stats-name-page {
			font-family: Convergence, Arial, sans-serif;
			font-size: 12px;
			color: vars.$rgb-off-black;
			font-weight: 100;
		}

		&stats-name-brew-link {
			font-size: 13px;
			font-weight: initial;
		}

		&pre-wrap {
			white-space: pre-wrap;
		}

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

		&color {
			a {
				color: inherit !important;
			}
		}
	}

	&-item__ {
		&type-rarity-attunement {
			color: vars.$rgb-off-black;
		}
	}

	&-spell__ {
		&level-school-ritual {
			font-style: italic;
			color: vars.$rgb-off-black;
		}
	}

	&-ability-icon {
		max-width: 100px;

		&__ {
			&fill-primary {
				fill: vars.$rgb-off-black;
			}

			&fill-bg {
				fill: vars.$rgb-bg;
			}

			&stroke-bg {
				stroke: vars.$rgb-bg;
			}
		}
	}

	&-homebrew__ {
		&b {
			background-color: vars.$rgb-bg-homebrew;
			clear: both;
		}

		&wrp-notice {
			float: right;
			border: 1px dotted;
			margin-bottom: 5px;
			margin-left: 5px;
			padding-right: 2px;
			padding-left: 2px;
			text-indent: 0;
		}

		&disp-notice {
			&::before {
				content: "Homebrew";
			}
		}

		&disp-old-content {
			color: #a00;
			margin-left: 5px;
		}

		&disp-inline {
			background-color: vars.$rgb-bg-homebrew;
			text-decoration: underline dotted;
		}
	}
}

// Entries embedded in tables
td > .rd__b:last-child {
	margin-bottom: 0;
}

/* ****************************************************************************************************************** */
/* Entity-specific styling                                                                                            */
/* ****************************************************************************************************************** */

// region Recipes
.rd-recipes {
	&__ {
		&wrp-recipe {
			.rd__b--3 > p,
			.rd__b--4 > p {
				text-indent: 0;
			}
		}

		&wrp-instructions {
			.rd__h--3 {
				font-style: initial;
				font-variant: small-caps;
			}

			.rd__b--3 > p,
			.rd__b--4 > p {
				margin-bottom: 10px;
			}

			.rd__b--3 > p:nth-of-type(2),
			.rd__b--4 > p:nth-of-type(2) {
				margin-top: 10px;
			}
		}

		&wrp-ingredients {
			.rd__h--2 {
				font-size: 1em;
				font-family: Roboto, Helvetica, sans-serif;
				color: inherit;
				font-weight: bold;
			}

			.rd__b p {
				margin-bottom: 0;
			}
		}
	}
}
// endregion