@charset "UTF-8";

.cjk-comp {
	color: var(--subtle);
}

.zwj {
	outline: 1px dotted var(--subtle);
	margin: 0 0.4em;
	background-color: var(--highlight3);
	font-size: 0.25em;
	font-family: var(--code-font);
	writing-mode: vertical-lr;
	text-orientation: upright;
	user-select: none;
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.zwj::before {
	content: "ZWJ";
}

td.pres {
	font-weight: bold;
	text-align: center;
	font-size: 1.5em;
}

#east-asian-punctuation-positional-and-width-variants ~ tr .char:not([data-sc]) {
	font-family: "BabelStone Han", Symbola, serif, sans-serif;
}

table.emoji-vs td.char {
	font-family: initial;
	
	&:nth-last-child(3), &:nth-last-child(2):not(:nth-child(2)) {
		/* Text Style */
		font-variant-emoji: text;
	}
	
	&:nth-child(2):nth-last-child(2) {
		/* Emoji Style */
		font-variant-emoji: emoji;
	}
	
	&:nth-child(1), &:nth-child(2):not(:nth-last-child(2)) {
		/* Default */
		font-variant-emoji: unicode;
	}
}

@media (max-width: 500px) {
	td.pres {
		font-size: 1.2em;
	}
}