:root :is(.theme-fandomdesktop-light, .theme-fandommobile-light) {
	--SourceTemplateData-textarea-color-scheme: light;
	--SourceTemplateData-puzzle-filter: invert(0);
}
:root :is(.theme-fandomdesktop-dark, .theme-fandommobile-dark) {
	--SourceTemplateData-textarea-color-scheme: dark;
	--SourceTemplateData-puzzle-filter: invert(1);
}

/* Editor opener */
.cm-editor .cm-mw-template-name {
	position: relative;
}
.ve-ui-sourceEditorSurface .cm-editor .cm-mw-template-name {
	pointer-events: all;
}
.cm-editor :is(.cm-mw-template-bracket, .cm-matchingBracket) + .cm-mw-template-name:hover,
.cm-editor :is(.cm-mw-template-bracket, .cm-matchingBracket) + .cm-mw-template-name:has(
	+.cm-mw-template-name:hover,
	+.cm-mw-template-name+.cm-mw-template-name:hover,
	+.cm-mw-template-name+.cm-mw-template-name+.cm-mw-template-name:hover,
	+.cm-mw-template-name+.cm-mw-template-name+.cm-mw-template-name+.cm-mw-template-name:hover,
	+.cm-mw-template-name+.cm-mw-template-name+.cm-mw-template-name+.cm-mw-template-name+.cm-mw-template-name:hover
) {
	position: relative;
	&:before {
		-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2015%2015%22%20%3E%3Cpath%20d%3D%22M10.625%207.61%207.39%204.375%208.75%203.02l3.235%203.23zm-4.89%204.89H2.5V9.265L5.625%206.14%208.86%209.375zm8.9-7.135-5-5a1.25%201.25%200%200%200-1.765%200l-7.5%207.5A1.25%201.25%200%200%200%200%208.75v5A1.25%201.25%200%200%200%201.25%2015h5a1.25%201.25%200%200%200%20.885-.365l7.5-7.5a1.25%201.25%200%200%200%200-1.765%22%2F%3E%3C%2Fsvg%3E");
		content: '';
		width: 10px;
		height: 10px;
		mask-repeat: no-repeat;
		display: flex;
		background-color: var(--theme-link-color);
		position: absolute;
		left: -5px;
		top: -5px;
		z-index: 999;
		cursor: pointer;
		pointer-events: all;
	}
}
#tw-popup {
	.oo-ui-window-body {
		padding-bottom: 0px;
	}
	.oo-ui-window-body,
	.oo-ui-window-body > .oo-ui-panelLayout {
		overflow: hidden;
	}
	/* Template general info */
	.tw-popup-hatnote {
		border-left: 3px solid var(--theme-accent-color);
		padding: 3px 10px;
		border-radius: 3px;
		background: linear-gradient(145deg, rgba(var(--theme-accent-color--rgb), 0.15) 0%, rgba(var(--theme-accent-color--rgb), 0) 100%);
		margin: 5px 0;
		font-size: 85%;
	}
	.tw-popup-opts {
		float: left;
		margin-top: 20px;
		height: min(50vh, 800px);
		overflow: auto;
		border-right: 1px solid var(--theme-link-color);
		padding-right: 8px;
		width: 25%;
		color-scheme: var(--SourceTemplateData-textarea-color-scheme);
	}

	.tw-popup-format-text {
		color: #54595d;
		overflow-wrap: break-word;
	}

	/* Hide the default checkbox */
	input.tw-popup-checkbox {
		opacity: 0;
		position: absolute;
		display: inline;
		/* Style the artificial checkbox */
		+ label.tw-popup-checkbox:before {
			display: inline-flex;
			content: '\2800';
			position: relative;
			align-items: center;
			border-style: solid;
			border-width: 2px;
			color: var(--theme-link-color);
			height: 16px;
			width: 16px;
			top: 0;
			bottom: 0;
			left: 0;
			margin-right: 4px;
		}
		/* Style its checked state with a tick */
		&:checked + label.tw-popup-checkbox:before {
			content: '\2714';
		}
	}

	/* Template params */
	.tw-popup-params {
		padding: 8px;
		display: flex;
		flex-direction: column;
		margin-top: 20px;
		gap: 20px;
		height: min(50vh, 800px);
		overflow: auto;
		color-scheme: var(--SourceTemplateData-textarea-color-scheme);
	}
	.tw-popup-param {
		display: block;
		position: relative;
		width: 100%;
		border: 1px solid var(--theme-link-color);
		padding: 8px;
		border-radius: 3px;
		top: 0;
	}
	.tw-popup-param-example {
		color: #54595d;
		overflow-wrap: break-word;
	}
	.tw-popup-param-label {
		overflow-wrap: break-word;
		font-size: small;
	}
	.tw-popup-param-list {
		display: inline-flex;
		width: fit-content;
		margin-left: .5em;
		gap: .5em;
		.tw-popup-param-list-label {
			background-color: var(--theme-page-background-color--secondary);
			border: 1px solid var(--theme-border-color);
			border-radius: 2px;
			padding: 1px 4px;
			font-family: monospace;
			position: relative;
			&:has( > input:checked):before {
				content: '\2714';
				position: absolute;
				top: -10px;
				left: -3px;
				align-items: center;
				color: var(--theme-link-color);
				font-size: 14px;
			}
		}
		.tw-popup-param-list-item {
			display: none;
		}
	}
	.tw-popup-param-value {
		width: calc(100% - 8px);
		overflow: hidden;
	}

	/* Param filter */
	.tw-popup-param-filterout {
		display: none;
	}
}