<!--
{%hackmd @YuRen-tw/theorem-theme %}
-->
<style>
:root {
--thm-margin: 16px;
--thm-padding-box: 12px;
--thm-padding-inline: var(--thm-padding-box);
--thm-padding-head: 4px;
--thm-italic-style: normal;

/* color */
--thm-background-color: #eee;
--thm-outline-color: #888;
--qed-symbol: "\220E";

/* theorem head */
--thm-name: "";
--thm-info: "";
--thm-info-before: "：";
--thm-info-after: "";
--thm-head-end: "";
--thm-name-theorem: "定理";
--thm-name-lemma: "引理";
--thm-name-corollary: "系理";
--thm-name-proposition: "命題";
--thm-name-definition: "定義";
--thm-name-example: "範例";
--thm-name-remark: "說明";
--thm-name-proof: "證明";
}
[lang^="en-"] {
--thm-italic-style: italic;
--thm-info-before: " (";
--thm-info-after: ")";
--thm-head-end: ".";
--thm-name-theorem: "Theorem";
--thm-name-lemma: "Lemma";
--thm-name-corollary: "Corollary";
--thm-name-proposition: "Proposition";
--thm-name-definition: "Definition";
--thm-name-remark: "Remark";
--thm-name-example: "Example";
--thm-name-proof: "Proof";
}

/* counters */
body {
counter-reset: section;
}
h2 {
counter-increment: section;
counter-reset: theorem;
}
:is(.theorem, .definition, .remark, .example):not(.unnumbered) {
counter-increment: theorem;
}

/* universal */
:is(.theorem, .definition, .remark, .example, .proof) {
position: relative;
margin-bottom: var(--thm-margin);
padding: var(--thm-padding-box) var(--thm-padding-inline);
}
:is(.theorem, .definition, .remark, .example, .proof) > :last-child {
margin-bottom: 0;
}
:is(.theorem, .definition, .remark, .example, .proof)::before {
display: block;
padding-bottom: var(--thm-padding-head);
/*
font-size: 1.2em;
*/
}

/* style: background and outline */
:is(.theorem, .definition, .remark) {
background: var(--thm-background-color);
}
:is(.example, .proof) {
outline: 3px solid var(--thm-outline-color);
}

/* style: font */
.theorem {
font-style: var(--thm-italic-style);
}
:is(.theorem, .definition, .example)::before {
font-style: normal;
font-weight: bold;
}
:is(.remark, .proof)::before {
font-style: var(--thm-italic-style);
}

/* qed symbol */
.proof::after {
content: var(--qed-symbol);
position: absolute;
bottom: var(--thm-padding-box);
right: var(--thm-padding-inline);
}

/* name and info */
.theorem {
--thm-name: var(--thm-name-theorem);
}
.theorem.proposition {
--thm-name: var(--thm-name-proposition);
}
.theorem.lemma {
--thm-name: var(--thm-name-lemma);
}
.theorem.corollary {
--thm-name: var(--thm-name-corollary);
}
.definition {
--thm-name: var(--thm-name-definition);
}
.example {
--thm-name: var(--thm-name-example);
}
.remark {
--thm-name: var(--thm-name-remark);
}
.proof {
--thm-name: var(--thm-name-proof);
}
:is(.theorem, .definition, .remark, .example, .proof)[data-name] {
--thm-name: attr(data-name);
}
:is(.theorem, .definition, .remark, .example)[data-info] {
--thm-info: var(--thm-info-before) attr(data-info) var(--thm-info-after);
}

/* head */
:is(.theorem, .definition, .remark, .example):not(.unnumbered)::before {
content: var(--thm-name) " " counter(section) "." counter(theorem) var(--thm-info) var(--thm-head-end);
}
:is(.theorem, .definition, .remark, .example).unnumbered::before {
content: var(--thm-name) var(--thm-info) var(--thm-head-end);
}
.proof::before {
content: var(--thm-name) var(--thm-head-end);
}
</style>