/*
  Environments for Theorems etc.

  Use this classes in a div to style it as an elegant theorem box.

  Based on LaTeX's amsthm package.

* Adapted from the code in
  http://drz.ac/2013/01/17/latex-theorem-like-environments-for-the-web/
  http://drz.ac/downloads/code/css/theorems.css
*/

.Theorem, .Lemma, .Definition, .Aside {
  display:     block;
  margin:      12px 0 12px 0;
  padding:     2px 0 2px 1em;
  border-left: 5px solid;
}

.Theorem::before, .Lemma::before, .Definition::before {
  font-weight: bold;
  font-style:  normal;
  white-space: nowrap;
}

.Theorem {
  border-left-color: #00c395;
}

.Theorem::before {
  content: "Theorem.";
}

.Theorem[data-title]::before {
  content: 'Theorem (' attr(data-title) ').';
}

.Lemma {
  border-left-color: #d78c00;
}
.Lemma::before {
  content: "Lemma.";
}

.Lemma[data-title]::before {
  content: 'Lemma (' attr(data-title) ').';
}

.Definition {
  border-left-color: #26cd00;
}

.Definition[data-title]::before {
  content: 'Definition (' attr(data-title) ').';
}

.Definition::before {
  content: "Definition.";
}

.Proof {
  display:    block;
  margin:     12px 0;
  font-style: normal;
  overflow:   hidden;
}

.Proof > p:first-child:before {
  content:    "Proof. ";
  font-style: italic;
}

/* A proof only truly ends with a QED square */
.Proof > p:last-child:after {
  content: "\25FB";
  float:   right;
}

.Aside {
  border-left-color: var(--color-lightning);
}

/* It is better to let the Theorem block itself handle the marging. */
:is(.Theorem, .Lemma, .Definition, .Aside) :is(h1, h2, h3, h4, h5, h6, p):first-child {
  margin-top: 0;
}