.litm.litm--character .litm--character-theme,
.litm.litm--theme {
	min-width: 300px;
	max-width: 500px;
	background: transparent;
	background-color: transparent;
	background-blend-mode: unset;
	padding: 0px;
	outline: none;

	& .window-header {
		position: absolute;
		z-index: 1;
		width: 94%;
		margin: 12px 8px 0px 8px;
		color: var(--litm-color-accent);
		line-height: 1;
	}

	& form {
		overflow: hidden;
		overflow: clip;
	}

	& .litm--theme-top {
		position: relative;

		& .litm--theme-border-top {
			position: absolute;
			top: 0px;
			left: 0px;
			height: 100%;
			width: 100%;
			z-index: 2;
			pointer-events: none;
		}

		& .litm--theme-top-bg {
			background: url("../../assets/media/theme-bg-top.webp");
			background-size: cover;
			background-repeat: no-repeat;
			margin: 7px 13px 0px 6px;
		}

		& .litm--theme-meta {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 2px var(--litm-space-2) var(--litm-space-1);
			font-family: var(--litm-font-primary);
			font-size: var(--font-size-12);
			padding-block-start: 24px;
			background: var(--theme-src) no-repeat bottom / cover;

			& > * {
				width: min-content;
			}

			& > span {
				padding-block: 3px;
			}

			& .litm--theme-meta-part {
				border: none;
				background-color: transparent;
				color: var(--litm-color-primary-bg);
				font-family: var(--litm-font-primary);
				font-size: var(--font-size-12);
				height: var(--font-size-14);
				line-height: var(--font-size-16);

				text-transform: uppercase;
				min-width: 10px;
				width: auto;

				& > option {
					color: var(--litm-color-primary);
				}

				&::-webkit-calendar-picker-indicator {
					display: none !important;
				}

				&:focus,
				&:active {
					box-shadow: none;
				}

				&:last-child {
					color: color-mix(
						in hsl,
						var(--litm-color-primary-bg) 75%,
						transparent
					);
					font-size: var(--font-size-11);
					margin-inline: auto 0;
					text-align: right;
				}
			}
		}

		& .litm--theme-legend {
			margin-block-start: var(--litm-space-1);
			padding: var(--litm-space-1) var(--litm-space-3);
			display: flex;
			justify-content: center;
			align-items: baseline;
			text-transform: uppercase;
			font-family: var(--litm-font-primary);
			font-size: var(--font-size-11);

			& span {
				&:last-of-type {
					color: var(--litm-color-weakness);
				}
			}
		}

		& .litm--theme-title {
			margin-inline: 10px;
			padding-block: var(--litm-space-1) var(--litm-space-3);
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: var(--litm-space-2);
			color: var(--litm-color);
			font-size: var(--font-size-16);

			& .litm--theme-name {
				font-family: var(--litm-font-primary);
				font-size: var(--font-size-28);
				border: none;
				background-color: transparent;
				text-align: center;
				line-height: 1;
				letter-spacing: -1px;
				margin-bottom: -0.35rem;
				transition: background-color 0.15s;

				&:focus {
					outline: none;
					background-color: rgb(0, 0, 0, 0.1);
				}
			}

			& label {
				display: flex;
				cursor: pointer;
			}
		}

		& .litm--theme-tags {
			display: flex;
			flex-direction: column;
			height: 100%;
			overflow-y: auto;
			list-style: none;
			margin: 0px 10px 0px;
			padding: 0px;

			& .litm--theme-tag {
				display: flex;
				align-items: center;
				width: 100%;
				gap: var(--litm-space-3);
				color: var(--litm-color);

				&:nth-child(odd) {
					background-image: linear-gradient(
						to right,
						transparent,
						rgba(69, 59, 29, 0.15),
						transparent
					);
				}

				&:last-child {
					.tag--name {
						border-bottom: 1.5px solid rgb(0, 0, 0, 0.2);
					}
				}

				& .tag--name {
					text-align: center;
					border: none;
					border-radius: 0px;
					padding-block: var(--litm-space-2);
					min-height: var(--font-size-14);
					font-size: var(--font-size-16);
					height: auto;
					background-color: transparent;
					font-family: var(--litm-font-text);
					color: var(--litm-color-primary);
					width: 100%;
					border-top: 1.5px solid rgb(0, 0, 0, 0.2);
					border-image: url("../../assets/media/item-divider.webp") 14 / 3;
					border-image-outset: 1px;

					&:focus,
					&:active {
						box-shadow: none;
					}
				}

				& label {
					display: flex;
					--checkbox-size: 10px;
				}
			}
		}

		& .litm--weakness {
			margin: 0px var(--litm-space-2);
			padding: 0px;
			display: flex;
			flex-direction: column;
			align-items: center;
			list-style: none;
			background-image: radial-gradient(
				ellipse at top,
				var(--litm-color-weakness-bg) 30%,
				transparent 70%
			);

			& .litm--weakness-part {
				width: 100%;
				height: auto;
				min-height: var(--font-size-14);
				font-size: var(--font-size-16);
				border: none;
				border-radius: 0px;
				padding-block: var(--litm-space-2);
				background-color: transparent;
				color: var(--litm-color-weakness);
				font-family: var(--litm-font-text);
				text-align: center;

				&:focus,
				&:active {
					box-shadow: none;
				}
			}
		}

		& .litm--theme-progression {
			padding: var(--litm-space-4) 10px 8px;
			display: flex;
			justify-content: space-between;
			background: url(../../assets/media/progress-bg.webp);
			background-size: cover;
			background-repeat: no-repeat;

			& > div {
				position: relative;
				display: flex;
				align-items: center;
				gap: var(--litm-space-1);
				cursor: pointer;
				font-size: var(--font-size-16);

				&:first-child::before {
					content: "";
					position: absolute;
					background: url(../../assets/media/connector.webp) no-repeat center /
						contain;
					top: -62px;
					left: 4px;
					height: 300px;
					width: 10px;
					z-index: 1;
				}
			}

			& label {
				margin-top: 5px;
				text-transform: uppercase;
				font-family: var(--litm-font-primary);
				font-size: var(--font-size-12);
				cursor: pointer;
			}
		}
	}

	& .litm--theme-bottom {
		flex: 1;
		position: relative;
		overflow: hidden;
		overflow: clip;

		& .litm--theme-border-bottom {
			position: absolute;
			bottom: 0px;
			left: 0px;
			height: 100%;
			width: 100%;
			z-index: 2;
			pointer-events: none;
		}

		& .litm--theme-bottom-bg {
			height: 94%;
			margin: 0px 12px 0px 4px;
			display: flex;
			flex-direction: column;
			background: var(--theme-src);
			background-color: transparent;
			background-blend-mode: unset;
			overflow: hidden;
			overflow: clip;
		}

		& .motivation {
			margin: var(--litm-space-1) var(--litm-space-3);
			display: flex;
			color: var(--litm-color-accent);
			font-family: var(--litm-font-accent);
			font-size: var(--font-size-20);
			text-align: center;

			& [role="textbox"] {
				background: transparent;
				color: var(--litm-color-accent);
				font-family: var(--litm-font-accent);
				border: none;
				border-radius: 8px;
				margin-inline: auto;
				letter-spacing: 1px;
				transition: all 0.15s;
				min-width: 50%;

				&:focus {
					outline: none;
					background-color: rgb(0, 0, 0, 0.1);
				}

				&:empty {
					background-color: rgb(0, 0, 0, 0.1);
				}

				&::before {
					content: "“";
					margin-inline-start: 8px;
				}

				&::after {
					content: '"';
					margin-inline-start: 4px;
				}
			}
		}

		& .note {
			flex: 1;
			background-image: radial-gradient(#999 -150%, transparent 70%);
			color: var(--litm-color-primary-bg);
			-webkit-font-smoothing: antialiased;
			font-family: var(--litm-font-text);
			font-size: var(--font-size-14);
			letter-spacing: 1px;
			text-align: center;
			line-height: 1.45;
			overflow: hidden;
			overflow: clip;

			& .editor {
				padding: 0px 16px 1.5rem;
			}

			& [role="application"] {
				height: 100% !important;
			}
		}
	}
}
