$curtain-colour: fade-out($bgcolour, .15);
$indication-colour: fade-out($base-colour, .9);

$normal-colour: fade-out($base-colour, .3);
$levity-colour: fade-out($base-colour, .4);
$heavy-colour: fade-out($base-colour, .1);
$atlarge-colour: fade-out($base-colour, .6);

$line-colour: $levity-colour;

$link-change-time: .3s !default;

h1, h2, h3, h4, h5, h6, strong, .ml-footer-desc {
	color: $heavy-colour;
}

body {	
	background: $bgcolour;
	color: $normal-colour;
}

@media screen and (max-width: 1300px) {
	.ml-drawer[open] {
		background: $curtain-colour;
	}
}

.footnotes ol {
	padding-left: 2rem;
	list-style: decimal;
}

.ml-smaller, .footnotes {
	margin: 0;
	font-size: .9em;
}

.ml-footer .ml-smaller {
	color: $levity-colour;
}

.ml-drawer a, .ml-social-list .svg-icon, .ml-article a {
	color: $levity-colour;

	@media screen and (prefers-reduced-motion: no-preference) {
		transition: color $link-change-time;
	}

	&:hover {
		color: $heavy-colour;
	}
}

.ml-drawer summary {
	color: $normal-colour;
}

.ml-drawer summary:hover, .ml-bookmark a:hover, .ml-block-anchor:hover, .ml-page-list a:hover {
	background: $indication-colour;
}

.ml-toc-1 > a, .ml-toc-2 > a {
	color: fade-out($base-colour, .2);
}

.ml-bookmark a {
	@media screen and (prefers-reduced-motion: no-preference) {
		transition: background, color $link-change-time;
	}
}

.ml-article a, .ml-front a, .ml-footer a {
	color: $heavy-colour;
	&:hover {
		color: $normal-colour
	}
}

.ml-footer-main {
	background: $curtain-colour;
}

blockquote {
	border-left: .25em solid $indication-colour;
}

kbd {
	border: 1px solid $line-colour;
	border-radius: 5px
}

table tr, table td, table caption, pre {
	border: 1px solid $atlarge-colour;
}

mark {
	border: 1px dashed $heavy-colour;
	background: none
}

ins, .ml-article a, .ml-front a, .ml-footer a {
	border-bottom: 1px solid $line-colour;
}

.ml-article a:hover, .ml-front a, .ml-footer a {
	border-bottom-color: $atlarge-colour;
}

u {
	border-bottom: 1.2px dashed $line-colour;
}

em:after {
	color: $line-colour;
}

figcaption {
	color: $levity-colour;
}

strong, b, mark {
	color: $heavy-colour;
}

body, .ml-drawer-inside {
	&::-webkit-scrollbar-thumb {
		background: $atlarge-colour;
	}
	&::-webkit-scrollbar-thumb:hover {
		background: $levity-colour;
	}
	&::-webkit-scrollbar-track-piece {
		background: transparent;
	}
	&::-webkit-scrollbar-track-piece:hover {
		background: $indication-colour;
	}
}



@mixin draw-bottom {
	padding-bottom: .4em;
	font-style: normal;
	background-repeat: repeat-x;
	background-size: 1em 1.4em;
}

em {
	&:lang(*-Hans), &:lang(*-Hant) {
		@include draw-bottom;
		background-image: $em-image;
	}

	&:lang(cmn-Hans), &:lang(cmn-Hant),
	&:lang(wuu-Hans), &:lang(wuu-Hant),
	&:lang(czh-Hans), &:lang(czh-Hant),
	&:lang(hak-Hans), &:lang(hak-Hant),
	&:lang(yue-Hans), &:lang(yue-Hant),
	&:lang(nan-Hans), &:lang(nan-Hant),
	&:lang(cpx-Hans), &:lang(cpx-Hant),
	&:lang(cdo-Hans), &:lang(cdo-Hant),
	&:lang(mnp-Hans), &:lang(mnp-Hant),
	&:lang(zco-Hans), &:lang(zco-Hant),
	&:lang(gan-Hans), &:lang(gan-Hant),
	&:lang(hsn-Hans), &:lang(hsn-Hant),
	&:lang(cjy-Hans), &:lang(cjy-Hant),
	&:lang(lzh-Hans), &:lang(lzh-Hant) {
		@include draw-bottom;
		background-image: $em-image;
	}
}

cite {
	&:lang(*-Hans), &:lang(*-Hant) {
		@include draw-bottom;
		background-image: $cite-image;
	}

	&:lang(cmn-Hans), &:lang(cmn-Hant),
	&:lang(wuu-Hans), &:lang(wuu-Hant),
	&:lang(czh-Hans), &:lang(czh-Hant),
	&:lang(hak-Hans), &:lang(hak-Hant),
	&:lang(yue-Hans), &:lang(yue-Hant),
	&:lang(nan-Hans), &:lang(nan-Hant),
	&:lang(cpx-Hans), &:lang(cpx-Hant),
	&:lang(cdo-Hans), &:lang(cdo-Hant),
	&:lang(mnp-Hans), &:lang(mnp-Hant),
	&:lang(zco-Hans), &:lang(zco-Hant),
	&:lang(gan-Hans), &:lang(gan-Hant),
	&:lang(hsn-Hans), &:lang(hsn-Hant),
	&:lang(cjy-Hans), &:lang(cjy-Hant),
	&:lang(lzh-Hans), &:lang(lzh-Hant) {
		@include draw-bottom;
		background-image: $cite-image;
	}
}

.ml-card-anchor {
	background: $card-colour;
	color: $levity-colour;

	h2 {
		color: $normal-colour;
	}

	&:hover {
		background-color: fade-out($indication-colour, 0.05);
		color: $heavy-colour
	}
}

.ml-card-list {
	border-left: 2px solid $normal-colour;
}

.ml-card-list dt::before {
	border: 2px solid $normal-colour;
	background: $bgcolour;
	border-radius: 1em;
}