/* Rendering of the lesson macros: {{a|b}} fractions (.f), [[ ]] matrices (.mx), || || determinants (.det)
   and the *x / #x highlights (.hl, .hl2). The markup is produced by static/js, the look is defined here. */

.hl { background: var(--hl); padding: 0 3px; border-radius: var(--r-3); }
.hl2 { background: var(--hl2); padding: 0 3px; border-radius: var(--r-3); }

.f { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 3px; line-height: 1.15; font-size: .95em; }
.f > span:first-child { border-bottom: 1.5px solid currentColor; padding: 0 var(--s-1); }
.f > span:last-child { padding: 0 var(--s-1); }

.mx { display: inline-block; vertical-align: middle; position: relative; padding: 1px 9px; margin: 2px 3px; }
.mx::before, .mx::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7px; border: 1.6px solid currentColor; }
.mx::before { left: 0; border-right: 0; border-radius: var(--r-9) 0 0 var(--r-9); }
.mx::after { right: 0; border-left: 0; border-radius: 0 var(--r-9) var(--r-9) 0; }
.mx table { border-collapse: collapse; margin: 0; }
.mx td { border: 0; padding: 2px 7px; text-align: center; white-space: nowrap; }
.mx td.aug { border-left: 1.5px solid currentColor; }
.mx td.hl { background: var(--hl); }
.mx td.hl2 { background: var(--hl2); }
.det::before, .det::after { width: 0; border-radius: 0; } /* determinant: straight bars instead of brackets */

.has-mx { overflow-x: auto; max-width: 100%; padding-bottom: 2px; }