css/mathfield.less
@monospace: 'Berkeley Mono', 'IBM Plex Mono', 'Source Code Pro', Consolas,
  'Roboto Mono', Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco,
  Courier, monospace;

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

@keyframes ML__caret-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

// The .ML__container includes the visible parts of the math-field:
// the .ML__content and the .ML__virtual-keyboard-toggle.
// .ML__container
//      > .ML__content
//            > .ML__latex > .ML__base
//            > .ML__selection
//      > .ML__virtual-keyboard-toggle
//      > .ML__menu-toggle
.ML__container {
  display: inline-flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 39px; /* Need some room for the virtual keyboard toggle */
  width: 100%;
  padding: 4px;
  box-sizing: border-box;

  /* This attribute is necessary to work around a Firefox issue where 
  where clicking multiple times on the border leads to a focused mathfield that cannot be edited until focus is lost and regained (also fixes the multiple cursor issue on firefox that can occur with the same sequence of events).
  */
  pointer-events: auto;

  /* Prevent the browser from trying to interpret touch gestures in the field */
  /* "Disabling double-tap to zoom removes the need for browsers to
        delay the generation of click events when the user taps the screen." */
  touch-action: none;

  // The color of the caret, the insertion point.
  --_caret-color: var(--caret-color, hsl(var(--_hue), 40%, 49%));

  // The color of the selection, and its background
  --_selection-color: var(--selection-color, #000);
  --_selection-background-color: var(
    --selection-background-color,
    hsl(var(--_hue), 70%, 85%)
  );

  // The background color indicating the caret is in a text zone
  --_text-highlight-background-color: var(
    --highlight-text,
    hsla(var(--_hue), 40%, 50%, 0.1)
  );

  // The background color indicating the scope/zone of the caret, i.e. the
  // inside of a square root or a fraction.
  --_contains-highlight-background-color: var(
    --contains-highlight-background-color,
    hsl(var(--_hue), 40%, 95%)
  );

  // The color and opacity of a smart fence (automatically added ")" or "}")
  --_smart-fence-color: var(--smart-fence-color, currentColor);
  --_smart-fence-opacity: var(--smart-fence-opacity, 0.5);

  // The color of fence, sqrt sign, when the caret is inside a "contains" zone
  --_contains-highlight-color: var(
    --contains-highlight-color,
    var(--_caret-color)
  );

  // The text color of content in LaTeX mode
  --_latex-color: var(--latex-color, hsl(var(--_hue), 80%, 40%));
  // The border color when a prompt is in "correct" state
  --_correct-color: var(--correct-color, #10a000);
  // The border color when a prompt is in "incorrect" state
  --_incorrect-color: var(--incorrect-color, #a01b00);

  // A composition is zone controlled by an input method, for example, the
  // Japanese input method, or dead keys on macOS, i.e. alt+U.
  --_composition-background-color: var(--composition-background-color, #fff1c2);
  --_composition-text-color: var(--composition-text-color, black);
  --_composition-underline-color: var(
    --composition-underline-color,
    transparent
  );

  // Tooltip displayed with \mathtip or \texttip
  --_tooltip-border: var(--tooltip-border, 1px solid transparent);
  --_tooltip-border-radius: var(--tooltip-border-radius, 8px);
  --_tooltip-background-color: var(--tooltip-background-color, #616161);
  --_tooltip-color: var(--tooltip-color, #fff);
  --_tooltip-box-shadow: var(
    --tooltip-box-shadow,
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12),
    0 3px 1px -2px rgba(0, 0, 0, 0.2)
  );
}

@media (prefers-color-scheme: dark) {
  .ML__container {
    --_contains-highlight-color: var(
      --contains-highlight-color,
      hsl(var(--_hue), 85%, 75%)
    );
    --_caret-color: var(--caret-color, hsl(var(--_hue), 65%, 55%));
    --_selection-color: var(--selection-color, #fff);
    --_selection-background-color: var(
      --selection-background-color,
      hsl(var(--_hue), 65%, 55%)
    );
    --_text-highlight-background-color: var(
      --text-highlight-background-color,
      hsla(var(--_hue), 40%, 50%, 0.6)
    );
    --_contains-highlight-background-color: var(
      --contains-highlight-background-color,
      hsl(var(--_hue), 5%, 34%)
    );
    --_latex-color: var(--primary, hsl(var(--_hue), 40%, 50%));
    --_composition-background-color: #69571c;
    --_composition-text-color: white;
    --_placeholder-color: hsl(var(--_hue), 60%, 69%);

    --_smart-fence-color: var(--smart-fence-color, #fff);
    --_smart-fence-opacity: var(--smart-fence-opacity, 0.7);
  }
}

// Support for high contrast mode
@media (forced-colors: active) {
  .ML__container {
    --_caret-color: white;
    --_selection-color: white;
    --_smart-fence-color: white;
    --_latex-color: white;
    --_correct-color: white;
    --_incorrect-color: white;
    --_composition-text-color: white;
  }
}

// Prevent pointer-down event on touch devices if the host isn't focused
// this allows scrolling if you touch unfocused fields
@media (hover: none) and (pointer: coarse) {
  :host(:not(:focus)) .ML__container {
    pointer-events: none;
  }
}

/* This is the actual field content (formula) */
.ML__content {
  display: flex;
  align-items: center;
  align-self: center;
  position: relative;
  overflow: hidden;
  padding: 2px 3px 2px 1px;
  width: 100%;

  /* Encourage the browser to use the GPU to render the field.
     Weirdly, this is required for prompts to be rendered correctly. 
   */
  isolation: isolate;

  text-shadow: var(--text-shadow);
  .ML__latex {
    text-shadow: var(--text-shadow);
  }
  .ML__sqrt-line {
    box-shadow: var(--text-shadow);
  }
  .ML__frac-line {
    box-shadow: var(--text-shadow);
  }
}

.ML__virtual-keyboard-toggle,
.ML__menu-toggle {
  box-sizing: border-box;
  display: flex;
  align-self: center;
  align-items: center;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;

  width: 34px;
  height: 34px;
  padding: 0;
  margin-right: 4px;
  cursor: pointer;
  /* Avoid some weird blinking with :hover */
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  color: hsl(var(--_hue), 40%, 50%);
  fill: currentColor;
  background: transparent;

  &:hover {
    background: hsla(0, 0%, 70%, 0.3);
    color: #333;
    fill: currentColor;
    // border: 1px solid rgba(255, 255, 255, .5)
    // border: 1px solid rgba(255, 255, 255, .9);
    // box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    //     0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  }
  & > span {
    display: flex;
    align-self: center;
    align-items: center;
  }
}

@media (pointer: coarse) {
  .ML__virtual-keyboard-toggle,
  .ML__menu-toggle {
    min-width: 60px;
    min-height: 60px;
  }
}

/* The invisible element used to capture keyboard events. We're just trying
 really hard to make sure it doesn't show. */
.ML__keyboard-sink {
  display: inline-block;

  resize: none;
  outline: none;
  border: none;

  /* Need these for Microsoft Edge */
  position: fixed;
  clip: rect(0 0 0 0);
  /* Need this to prevent iOS Safari from auto-zooming */
  font-size: 1em;
  font-family: KaTeX_Main;
  line-height: 0.5; /* On Chromium, if this is 0, no keyboard events are received */
  /* Preferred over clip */
  clip-path: inset(50%);
}

[part='placeholder'] {
  color: var(--neutral-400);
}

.ML__composition {
  background: var(--_composition-background-color);
  color: var(--_composition-text-color);
  text-decoration: underline var(--_composition-underline-color);
}

// @media (prefers-color-scheme: dark) {
//   .ML__composition {
//     background: #69571c;
//     color: white;
//   }
// }

.ML__caret {
  display: inline-block;
}

.ML__caret::after {
  content: '';
  visibility: hidden;
  width: 0;

  display: inline-block;
  height: 0.76em;

  --_caret-width: clamp(2px, 0.08em, 10px);
  border: none;
  border-radius: calc(var(--_caret-width) / 2);
  border-right: var(--_caret-width) solid var(--_caret-color);
  margin-right: calc(-1 * var(--_caret-width));
  position: relative;
  left: -0.045em;
  bottom: -0.05em;

  animation: ML__caret-blink 1.05s step-end forwards infinite;
}

.ML__text-caret::after {
  content: '';
  visibility: hidden;

  width: 0;

  display: inline-block;
  height: 0.76em;

  --_caret-width: clamp(2px, 0.08em, 10px);
  border: none;
  border-radius: calc(var(--_caret-width) / 2);
  border-right: var(--_caret-width) solid var(--_caret-color);
  margin-right: calc(-1 * var(--_caret-width));
  position: relative;
  left: -0.045em;
  bottom: -0.05em;

  animation: ML__caret-blink 1.05s step-end forwards infinite;
}

.ML__latex-caret::after {
  content: '';

  visibility: hidden;

  --_caret-width: clamp(2px, 0.08em, 10px);
  border: none;
  border-radius: calc(var(--_caret-width) / 2);
  border-right: var(--_caret-width) solid var(--_latex-color);
  margin-right: calc(-1 * var(--_caret-width));
  position: relative;
  left: -0.019em;

  animation: ML__caret-blink 1.05s step-end forwards infinite;
}

.ML__focused .ML__latex-caret::after,
.ML__focused .ML__text-caret::after,
.ML__focused .ML__caret::after {
  visibility: visible;
}

.ML__focused .ML__text {
  background: var(--_text-highlight-background-color);
}

/* When using smartFence, the anticipated closing fence is displayed
with this style */
.ML__smart-fence__close {
  opacity: var(--_smart-fence-opacity);
  color: var(--_smart-fence-color);
}

.ML__focused .ML__selected,
.ML__focused .ML__selected .ML__contains-caret,
.ML__focused .ML__selected .ML__smart-fence__close,
.ML__focused .ML__selected .ML__placeholder {
  color: var(--_selection-color);
  opacity: 1;
}

.ML__selection {
  box-sizing: border-box;
  background: transparent;
}

:host(:focus) .ML__selection {
  background: var(--_selection-background-color) !important;
}

.ML__contains-caret.ML__close,
.ML__contains-caret.ML__open,
.ML__contains-caret > .ML__close,
.ML__contains-caret > .ML__open,
.ML__contains-caret .ML__sqrt-sign,
.ML__contains-caret .ML__sqrt-line {
  color: var(--_contains-highlight-color);
}

.ML__contains-highlight {
  box-sizing: border-box;
  background: transparent;
}

.ML__focused .ML__contains-highlight {
  background: var(--_contains-highlight-background-color);
}

.ML__raw-latex {
  font-family: @monospace;
  font-weight: 400;
  font-size: 0.8em;
  letter-spacing: -0.05em;

  color: var(--_latex-color);
}

.ML__suggestion {
  color: var(--neutral-500);
}

.ML__virtual-keyboard-toggle.is-visible.is-pressed:hover {
  background: hsl(var(--_hue), 25%, 35%);
  color: #fafafa;
  fill: currentColor;
}

.ML__virtual-keyboard-toggle.is-pressed,
.ML__virtual-keyboard-toggle.is-active:hover,
.ML__virtual-keyboard-toggle.is-active {
  background: hsl(var(--_hue), 25%, 35%);
  color: #fafafa;
  fill: currentColor;
}

/* Add an attribute 'data-tooltip' to automatically show a
   tooltip over a element on hover.
*/
[data-tooltip] {
  position: relative;
  &::after {
    content: attr(data-tooltip);
    position: absolute;
    display: block;
    z-index: 2;
    pointer-events: none;

    right: auto; // center tooltip
    top: calc(-100% - 4px); // place tooltip above element

    width: max-content;
    max-width: 200px;
    padding: 8px 8px;
    border-radius: 4px;

    background: #616161; // Grey 700
    color: #fff;

    box-shadow:
      0 2px 2px 0 rgba(0, 0, 0, 0.14),
      0 1px 5px 0 rgba(0, 0, 0, 0.12),
      0 3px 1px -2px rgba(0, 0, 0, 0.2);

    text-align: center;
    font-family: @system;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;

    /* Phone */
    @media only screen and (max-width: 767px) {
      padding: 8px 16px;
      font-size: 16px;
    }

    opacity: 0;
    transform: scale(0.5);
  }
}

menu [data-tooltip]::after {
  left: 100%; // place tooltip to the right of element
  top: 0%;
}

menu .ML__base {
  cursor: default;
}

/** Don't display if we're tracking, i.e. have the pointer down */
.tracking [data-tooltip]:hover::after {
  /* Use visibility, not display. Display will remove the after from the DOM, and the override below will not work */
  visibility: hidden;
}

/** But do display if tracking and inside a menu */
.tracking menu li[data-tooltip]:hover::after,
[data-tooltip]:hover::after {
  visibility: visible; // Visible triggers the animation...
  opacity: 1; // ... but we start fully transparent to
  transform: scale(1);
  transition-property: opacity, scale;
  transition-duration: 0.15s;
  // give ourselves a delay before showing
  transition-delay: 1s;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ML__prompt {
  border-radius: 2px;
}

.ML__editablePromptBox {
  outline: 1px solid #acacac;
  border-radius: 2px;
  z-index: -1;
}

.ML__focused .ML__focusedPromptBox {
  outline: highlight auto 1px;
}

.ML__lockedPromptBox {
  background-color: rgba(142, 142, 141, 0.4);
  z-index: -1;
}

.ML__correctPromptBox {
  outline: 1px solid var(--_correct-color);
  box-shadow: 0 0 5px var(--_correct-color);
}

.ML__incorrectPromptBox {
  outline: 1px solid var(--_incorrect-color);
  box-shadow: 0 0 5px var(--_incorrect-color);
}

.variant-submenu {
  display: flex;
  flex-direction: column;
  padding: 8px;
}

.variant-submenu [part='menu-item'].ML__xl {
  font-size: 2rem;
  text-align: center;
  margin: 0;
}

.ML__center-menu .label {
  text-align: center;
}

.insert-matrix-submenu {
  /* Grid doesn't work on Safari */
  // display: grid;
  // grid-template-columns: repeat(5, minmax(0, 1fr));
  --_menu-item-size: 25px;
  width: calc(5 * var(--_menu-item-size));
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
  align-content: center;
  justify-content: center;
}

.insert-matrix-submenu [part='menu-item'] {
  width: var(--_menu-item-size);
  height: var(--_menu-item-size);
  font-size: 21px;
  border: none;
  border-radius: 0;
  line-height: 21px;
  text-align: center;
  padding: 0;
  margin: 0;
}

.border-submenu [part='menu-item'] {
  font-size: 2rem;
  line-height: 1.2;
  text-align: center;
}

.swatches-submenu {
  --_swatch-size: 2rem;
  --_columns: 4;
  display: flex;
  flex-flow: wrap;
  padding: 8px;
  max-width: calc(var(--_columns) * (var(--_swatch-size) + 18px) + 16px);
  box-sizing: border-box;
}

.menu-swatch {
  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  width: fit-content;
  height: fit-content;
  margin: 2px;
  padding: 0;
  background: var(--neutral-200);

  & > .label {
    padding: 0;
    margin: 0;
    line-height: 0;
  }

  & > .label > span {
    display: inline-block;
    margin: 6px;
    min-width: var(--_swatch-size);
    min-height: var(--_swatch-size);
    border-radius: 50%;
  }

  &.active {
    background: var(--neutral-100);
    scale: 1.4;
    & > .label > span {
      border-radius: 2px;
    }
  }

  .ui-checkmark,
  .ui-mixedmark {
    position: absolute;
    margin: 0;
    padding: 0;
    color: white;
  }

  &.dark-contrast .ui-checkmark,
  &.dark-contrast .ui-mixedmark {
    color: #000;
  }
}

.ML__insert-template {
  font-size: 1em;
}

.ML__insert-label {
  opacity: 0.5;
  margin-left: 2ex;
}
