core.less

// The mu (mathematical unit) is defined by TeX as 1/18 em
@mu: 1/18em;

@system:
  system-ui,
  -apple-system,
  BlinkMacSystemFont,
  'Segoe UI',
  'Roboto',
  'Oxygen',
  'Ubuntu',
  'Cantarell',
  'Fira Sans',
  'Droid Sans',
  'Helvetica Neue',
  sans-serif;

.ML__container {
  min-height: auto !important;
  --_hue: var(--hue, 212);
  --_placeholder-color: var(--placeholder-color, hsl(var(--_hue), 40%, 49%));
  --_placeholder-opacity: var(--placeholder-opacity, 0.4);
  --_text-font-family: var(--text-font-family, @system);
}

.ML__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ML__is-inline {
  display: inline-block;
}

.ML__base {
  visibility: inherit;
  display: inline-block;
  position: relative;
  cursor: text;
  padding: 0;
  margin: 0;
  box-sizing: content-box;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  font-weight: inherit;
  font-family: inherit;
  font-style: inherit;
  text-decoration: none;
  // Fix width of containers of negative spaces, working around Chrome bug.
  width: min-content;
}

.ML__strut,
.ML__strut--bottom {
  display: inline-block;
  min-height: 0.5em;
}

.ML__small-delim {
  font-family: KaTeX_Main;
}

/* Text mode */
.ML__text {
  font-family: var(--_text-font-family);
  white-space: pre;
}

/* Use cmr for 'math upright' */
.ML__cmr {
  font-family: KaTeX_Main;
  font-style: normal;
}

.ML__mathit {
  font-family: KaTeX_Math;
  /* The KaTeX_Math font is italic by default, so the font-style below is only 
     useful when a fallback font is used
  */
  font-style: italic;
}

.ML__mathbf {
  font-family: KaTeX_Main; // Use upright font
  font-weight: bold;
}

/* Lowercase greek symbols should stick to math font when \mathbf is applied 
   to match TeX idiosyncratic behavior */
.lcGreek.ML__mathbf {
  font-family: KaTeX_Math;
}

.ML__mathbfit {
  font-family: KaTeX_Math;
  font-weight: bold;
  font-style: italic;
}

.ML__ams {
  font-family: KaTeX_AMS;
}

/* Blackboard */
.ML__bb {
  font-family: KaTeX_AMS;
}

.ML__cal {
  font-family: KaTeX_Caligraphic;
}

.ML__frak {
  font-family: KaTeX_Fraktur;
}

.ML__tt {
  font-family: KaTeX_Typewriter;
}

.ML__script {
  font-family: KaTeX_Script;
}

.ML__sans {
  font-family: KaTeX_SansSerif;
}
.ML__series_ul {
  font-weight: 100;
}
.ML__series_el {
  font-weight: 100;
}
.ML__series_l {
  font-weight: 200;
}
.ML__series_sl {
  font-weight: 300;
}

.ML__series_sb {
  font-weight: 500;
}
.ML__bold {
  font-weight: 700;
}
.ML__series_eb {
  font-weight: 800;
}
.ML__series_ub {
  font-weight: 900;
}

.ML__series_uc {
  font-stretch: ultra-condensed;
}
.ML__series_ec {
  font-stretch: extra-condensed;
}
.ML__series_c {
  font-stretch: condensed;
}
.ML__series_sc {
  font-stretch: semi-condensed;
}
.ML__series_sx {
  font-stretch: semi-expanded;
}
.ML__series_x {
  font-stretch: expanded;
}
.ML__series_ex {
  font-stretch: extra-expanded;
}
.ML__series_ux {
  font-stretch: ultra-expanded;
}

.ML__it {
  font-style: italic;
}
.ML__shape_ol {
  -webkit-text-stroke: 1px black;
  text-stroke: 1px black;
  color: transparent;
}
.ML__shape_sc {
  font-variant: small-caps;
}
.ML__shape_sl {
  font-style: oblique;
}

/* First level emphasis */
.ML__emph {
  color: #bc2612;
}
/* Second level emphasis */
.ML__emph .ML__emph {
  color: #0c7f99;
}

// Style used to highlight a portion of the expression when speaking
// it with synchronized highlighting.
// See https://www.w3.org/WAI/RD/2012/text-customization/r11
// and https://www.cs.cmu.edu/~jbigham/pubs/pdfs/2017/colors.pdf
.ML__highlight {
  color: #007cb2; // Complementary to peach
  background: #edd1b0; // Peach
}

.ML__center {
  text-align: center;
}

.ML__left {
  text-align: left;
}

.ML__right {
  text-align: right;
}

.ML__label_padding {
  padding: 0 0.5em;
}

.ML__frac-line {
  width: 100%;
  min-height: 1px;

  &:after {
    content: '';
    display: block;
    margin-top: ~'max(-1px, -0.04em)';
    min-height: ~'max(1px, 0.04em)';
    /* Ensure the line is visible when printing even if "turn off background images" is on*/
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    /* There's a bug since Chrome 62 where 
      sub-pixel border lines don't draw at some zoom 
      levels (110%, 90%). 
      Setting the min-height used to work around it, but that workaround
      broke in Chrome 84 or so.
      Setting the background (and the min-height) seems to work for now.
      */
    background: currentColor;
    box-sizing: content-box; /* Vuetify sets the box-sizing to inherit 
            causes the fraction line to not draw at all sizes (see #26) */
    /* On some versions of Firefox on Windows, the line fails to 
            draw at some zoom levels, but setting the transform triggers
            the hardware accelerated path, which works */
    transform: translate(0, 0);
  }
}

.ML__sqrt {
  display: inline-block;
}

.ML__sqrt-sign {
  display: inline-block;
  position: relative;
}

.ML__sqrt-line {
  display: inline-block;
  height: ~'max(1px, 0.04em)';
  width: 100%;

  &:before {
    content: '';
    display: block;
    margin-top: ~'min(-1px, -0.04em)';
    // margin-top: -1px;
    min-height: ~'max(1px, 0.04em)';
    /* Ensure the line is visible when printing even if "turn off background images" is on*/
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background: currentColor;
    /* On some versions of Firefox on Windows, the line fails to 
            draw at some zoom levels, but setting the transform triggers
            the hardware accelerated path, which works */
    transform: translate(0, 0);
  }

  &:after {
    border-bottom-width: 1px;
    content: ' ';
    display: block;
    margin-top: -0.1em;
  }
}

.ML__sqrt-index {
  // These values are taken from the definition of `\r@@t`,
  // `\mkern 5mu` and `\mkern -10mu`.
  margin-left: 5 * (@mu);
  margin-right: -10 * (@mu);
}

.ML__delim-size1 {
  font-family: KaTeX_Size1;
}
.ML__delim-size2 {
  font-family: KaTeX_Size2;
}
.ML__delim-size3 {
  font-family: KaTeX_Size3;
}
.ML__delim-size4 {
  font-family: KaTeX_Size4;
}

.ML__delim-mult {
  .delim-size1 > span {
    font-family: KaTeX_Size1;
  }
  .delim-size4 > span {
    font-family: KaTeX_Size4;
  }
}

.ML__accent-body > span {
  font-family: KaTeX_Main;
  width: 0;
}

.ML__accent-vec {
  position: relative;
  left: 0.24em;
}

/** The markup for a LaTeX formula, either in an editable mathfield or 
    in a static display.
*/
.ML__latex {
  @ptperem: 10; // This value should equal PT_PER_EM om `font-metrics.ts`

  @thinspace: 0.16667em; // 3mu
  @mediumspace: 0.22222em; // 4mu
  @thickspace: 0.27778em; // 5mu

  display: inline-block;

  direction: ltr;

  text-align: left;
  text-indent: 0;
  // Prevent a rendering bug that misplaces \vec in Chrome.
  text-rendering: auto;
  font-family: inherit;
  font-style: normal;
  font-size-adjust: none;
  font-stretch: normal;
  font-variant-caps: normal;
  letter-spacing: normal;

  // This value is critical in getting the vertical alignment correct.
  // Check with 1+\frac{5}{\frac{3}{\frac{7}{29}}}+\left(\frac{5}{\frac{3}{\frac{7}{29}}}\right)
  line-height: 1.2;

  word-wrap: normal;
  word-spacing: normal;
  white-space: nowrap;

  text-shadow: none;
  -webkit-user-select: none;
  user-select: none;

  width: min-content;

  .style-wrap {
    position: relative;
  }

  .ML__mfrac {
    display: inline-block;
  }

  .ML__left-right {
    display: inline-block;
  }

  .ML__vlist-t {
    display: inline-table;
    table-layout: fixed;
    border-collapse: collapse;
  }

  .ML__vlist-r {
    display: table-row;
  }

  .ML__vlist {
    display: table-cell; // Inside a table-cell, vertical-align aligns the content of the cell, not the cell itself
    vertical-align: bottom;
    position: relative;

    > span {
      display: block;
      height: 0;
      position: relative;

      > span {
        display: inline-block;
      }
      > .ML__pstrut {
        overflow: hidden;
        width: 0;
      }
    }
  }

  .ML__vlist-t2 {
    margin-right: -2px;
  }

  .ML__vlist-s {
    // This cell solves Safari rendering problems. It has text content, so
    // its baseline is used for the table. A very small font avoids line-box
    // issues; absolute units prevent user font-size overrides from breaking
    // rendering. Safari refuses to make the box zero-width, so we give it
    // a known width and compensate with negative right margin on the
    // inline-table. To prevent the "width: min-content" Chrome workaround
    // from shrinking this box, we also set min-width.
    display: table-cell;
    vertical-align: bottom;
    font-size: 1px;
    width: 2px;
    min-width: 2px;
  }
  .ML__msubsup {
    text-align: left;
  }

  .ML__negativethinspace {
    display: inline-block;
    margin-left: -@thinspace;
    height: 0.71em;
  }

  .ML__thinspace {
    display: inline-block;
    width: @thinspace;
    height: 0.71em;
  }

  .ML__mediumspace {
    display: inline-block;
    width: @mediumspace;
    height: 0.71em;
  }

  .ML__thickspace {
    display: inline-block;
    width: @thickspace;
    height: 0.71em;
  }

  .ML__enspace {
    display: inline-block;
    width: 0.5em;
    height: 0.71em;
  }

  .ML__quad {
    display: inline-block;
    width: 1em;
    height: 0.71em;
  }

  .ML__qquad {
    display: inline-block;
    width: 2em;
    height: 0.71em;
  }

  .ML__llap,
  .ML__rlap {
    width: 0;
    position: relative;
    display: inline-block;

    > .ML__inner {
      position: absolute;
    }

    > .ML__fix {
      display: inline-block;
    }
  }

  .ML__llap > .ML__inner {
    right: 0;
  }

  .ML__rlap > .ML__inner {
    left: 0;
  }

  .ML__rule {
    display: inline-block;
    border: solid 0;
    position: relative;
    box-sizing: border-box;
  }

  .overline .overline-line,
  .underline .underline-line {
    width: 100%;

    &:before {
      content: '';
      border-bottom-style: solid;
      border-bottom-width: ~'max(1px, 0.04em)';
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
      display: block;
    }

    &:after {
      border-bottom-style: solid;
      // Since Chrome 62 there are issues rendering sub-pixel borders at
      // certain zoom levels (90%, 110%). Forcing it to at least one pixels
      // seems to work around the issue.
      border-bottom-width: ~'max(1px, 0.04em)';
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
      content: '';
      display: block;
      margin-top: -1px;
    }
  }

  .ML__stretchy {
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    overflow: hidden;
    &:before,
    &:after {
      content: '';
    }
    svg {
      display: block;
      position: absolute;
      width: 100%;
      height: inherit;
      fill: currentColor;
      stroke: currentColor;
      fill-rule: nonzero;
      fill-opacity: 1;
      stroke-width: 1;
      stroke-linecap: butt;
      stroke-linejoin: miter;
      stroke-miterlimit: 4;
      stroke-dasharray: none;
      stroke-dashoffset: 0;
      stroke-opacity: 1;
    }
  }

  .slice-1-of-2 {
    display: inline-flex;
    position: absolute;
    left: 0;
    width: 50.2%;
    overflow: hidden;
  }
  .slice-2-of-2 {
    display: inline-flex;
    position: absolute;
    right: 0;
    width: 50.2%;
    overflow: hidden;
  }
  .slice-1-of-3 {
    display: inline-flex;
    position: absolute;
    left: 0;
    width: 25.1%;
    overflow: hidden;
  }
  .slice-2-of-3 {
    display: inline-flex;
    position: absolute;
    left: 25%;
    width: 50%;
    overflow: hidden;
  }
  .slice-3-of-3 {
    display: inline-flex;
    position: absolute;
    right: 0;
    width: 25.1%;
    overflow: hidden;
  }
  .slice-1-of-1 {
    display: inline-flex;
    position: absolute;
    width: 100%;
    left: 0;
    overflow: hidden;
  }

  .ML__nulldelimiter {
    display: inline-block;
  }

  .ML__op-group {
    display: inline-block;
  }

  .ML__op-symbol {
    position: relative;

    &.ML__small-op {
      font-family: KaTeX_Size1;
    }
    &.ML__large-op {
      font-family: KaTeX_Size2;
    }
  }

  &:has(.ML__center_environment),
  &:has(.ML__multiline_environment),
  &:has(.ML__align_environment),
  &:has(.ML__eqnarray_environment),
  &:has(.ML__gather_environment) {
    // Make the container (.ML__latex) take the whole width of the field
    width: 100%;
  }

  .ML__multiline_environment {
    // Make the table take the whole width of the container
    display: inline-flex;
    width: 100%;
  }

  .ML__center_environment {
    // Make the table take the whole width of the container, and be centered
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }

  .ML__align_environment,
  .ML__eqnarray_environment,
  .ML__gather_environment {
    display: inline-block;
    // width: 100%;
  }

  .ML__mtable {
    .ML__vertical-separator {
      display: inline-block;
      // margin and border-right are set in Javascript
      min-width: 1px; // Prevent Chrome from omitting a line.
      box-sizing: border-box;
    }

    .ML__arraycolsep {
      display: inline-block;
    }

    .col-align-m > .ML__vlist-t {
      text-align: center;
    }

    .col-align-c > .ML__vlist-t {
      text-align: center;
    }

    .col-align-l > .ML__vlist-t {
      text-align: left;
    }

    .col-align-r > .ML__vlist-t {
      text-align: right;
    }
  }
}

// For \href command
[data-href] {
  cursor: pointer;
}

// Wavy pattern
.ML__error {
  display: inline-block;
  background-image: radial-gradient(
    ellipse at center,
    hsl(341, 100%, 40%),
    rgba(0, 0, 0, 0) 70%
  );
  background-color: hsla(341, 100%, 40%, 10%);

  background-repeat: repeat-x;
  background-size: 3px 3px;
  padding-bottom: 3px;
  background-position: 0 100%;
}

.ML__error > .ML__error {
  background: transparent;
  padding: 0;
}

.ML__placeholder {
  color: var(--_placeholder-color);
  opacity: var(--_placeholder-opacity);
  padding-left: 0.4ex;
  padding-right: 0.4ex;
  font-family: @system;
}

.ML__notation {
  position: absolute;
  box-sizing: border-box;
  line-height: 0;
}

/* This class is used to implement the `\mathtip` and `\texttip` commands
   For UI elements, see `[data-ML__tooltip]`
*/
.ML__tooltip-container {
  position: relative;
  transform: scale(0); // To override the overflow:hidden

  .ML__tooltip-content {
    position: fixed;
    display: inline-table;
    visibility: hidden;
    z-index: 2;
    width: max-content;
    max-width: 400px;
    padding: 12px 12px;
    border: var(--tooltip-border);
    border-radius: var(--tooltip-border-radius);

    background: var(--tooltip-background-color);
    --_selection-color: var(--tooltip-color);
    color: var(--tooltip-color);
    box-shadow: var(--tooltip-box-shadow);
    opacity: 0;
    // animation: .150s tooltipFadeOut cubic-bezier(0.4, 0.0, 1, 1) forwards;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 1, 1);

    .ML__text {
      white-space: normal; // Make text wrap
    }
    .ML__base {
      display: contents;
    }
  }
  &:hover .ML__tooltip-content {
    visibility: visible; // Visible triggers the animation...
    opacity: 1; // ... but we start fully transparent to
    // give ourselves a delay before showing
    font-size: 0.75em;
    transform: scale(1) translate(0, 3em);
  }
}