.ProseMirror,
.equation-editor-popup {
  --text-dim: hsl(48, 5%, 40%);
  --invalid-equ-bg: #fce9e7;
  --empty-inline-equ-bg: hsl(220, 6%, 90%);
}

/* Block equation node. */
.ProseMirror .block-equation {
  padding: 4px 8px;
  margin-top: 8px;
  margin-bottom: 8px;
  border-radius: 10px;
  transition: background 20ms ease-in;
  /* Prevent katex-display's margins collapsing with outside margins */
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  --empty-hover-editing-bg: hsl(47, 12%, 94.5%);
}

.ProseMirror .block-equation.empty-equation {
  padding: 12px;
  padding-right: 36px;
  color: var(--text-dim);
  background: var(--empty-hover-editing-bg);
  flex-direction: unset;
  display: flex;
  align-items: center;
}

.ProseMirror .block-equation.invalid-equation {
  background: var(--invalid-equ-bg);
  border-radius: unset;
}

.ProseMirror[contenteditable='true'] .block-equation {
  cursor: pointer;
  user-select: none;
}

.ProseMirror[contenteditable='true']
  .block-equation:not(.invalid-equation, .empty-equation):hover,
.ProseMirror .block-equation.editing-equation:not(.invalid-equation) {
  background: var(--empty-hover-editing-bg);
}

/* Inline equation node. */
.ProseMirror span.inline-equation .katex {
  /* Prevent shifting content below an inline equation node when it toggles
  between being valid and being invalid (or empty) during editing. The
  root cause is due to "katex" class having `line-height: 1.2`. */
  /* We don't change the line-height of inline display equation nodes
  (which have `div.inline-equation`), so they their KaTeX-rendered parts
  look like block equation nodes. */
  /* Note that other than the KaTeX-rendered parts, inline display equation
  nodes should look like and work like normal equation nodes, even though
  the UX feels awkward. Inline display equation should be viewed as a
  compatibility mode for Markdown. We should prioritize normal inline
  equation use cases and encourage people to use block equation nodes if
  they want block display. */
  line-height: 1;
}

.ProseMirror .inline-equation.empty-equation {
  user-select: all;
  display: inline-flex;
  padding: 0px 4px;
  border-radius: 4px;
  background: var(--empty-inline-equ-bg);
  color: var(--text-dim);
}

.ProseMirror .inline-equation.invalid-equation {
  user-select: all;
  display: inline-flex;
  padding: 0px 4px;
  border-radius: 4px;
  background: var(--invalid-equ-bg);
  color: #eb5757;
}

.ProseMirror
  .inline-equation.editing-equation:not(.invalid-equation, .empty-equation) {
  user-select: all;
  border-radius: 4px;
  background: #e5f2fc;
}

.ProseMirror
  span.inline-equation.editing-equation:not(
    .invalid-equation,
    .empty-equation
  ) {
  display: inline-flex;
  /* Use padding with negative transform and negative margin to add a
  highlight effect without shifting the element's position. */
  padding: 0px 4px;
  transform: translate3d(-4px, 0, 0);
  margin-right: -8px;
  /* Notion needs to set these but it seems that we don't need to.
  align-items: center;
  vertical-align: top; */
}

/* Portal for positioning equation editor popup. */
.equation-editor-portal {
  position: fixed;
  inset: 0;
  pointer-events: auto;
  z-index: 10;
}

/* Equation editor popup. */
.equation-editor-popup {
  border-radius: 10px;
  background-color: rgb(247, 247, 245);
  box-shadow:
    0px 14px 28px -6px rgba(0, 0, 0, 0.12),
    0px 2px 4px -1px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(84, 72, 49, 0.08);
  padding: 4px 10px 4px 4px;
  position: absolute;
  max-width: calc(100vw - 24px); /* 12px padding */
  width: 400px;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: scale(0.98);
  will-change: opacity, transform;
  animation: equation-fade-scale-in 200ms ease forwards;
  --tex-editor-font-size: 0.875rem;
  --tex-editor-line-height: 1.5;
  --tex-editor-max-height: 50vh;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    monospace;
}

.equation-editor-popup > *:first-child {
  flex: 1 1 0%;
}

@keyframes equation-fade-scale-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes equation-fade-scale-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .equation-editor-popup {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* TeX editor placeholder. */
.tex-editor-placeholder {
  padding: 4px 2px 4px 6px;
  margin: 0;
  max-height: var(--tex-editor-max-height);
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: var(--tex-editor-font-size);
  line-height: var(--tex-editor-line-height);
  white-space: break-spaces;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: var(--text-dim);
  user-select: none;
  cursor: wait;
}

/* LaTeX syntax highlighting colors. */
.equation-editor-popup .cm-line .token.equation {
  color: #690;
}

.equation-editor-popup .cm-line .token.equation-command {
  color: #e90;
}

.equation-editor-popup .cm-line .token.function {
  color: #dd4a68;
}

.equation-editor-popup .cm-line .token.keyword {
  color: #07a;
}

.equation-editor-popup .cm-line .token.comment {
  color: #708090;
}

.equation-editor-popup .cm-line .token.punctuation {
  color: #999;
}

.equation-editor-popup .cm-line .token.cdata {
  color: #708090;
}

.equation-editor-popup .cm-line .token.url {
  color: #9a6e3a;
}

/* "Done ↵" button in equation editor popup. */
.equation-editor-confirm-btn {
  outline: none;
  border: none;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    'PingFang TC',
    'Hiragino Sans CNS',
    'Microsoft JhengHei',
    'Noto Sans',
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji';
  font-size: 0.875rem;
  line-height: 1.25;
  transition: background 0.1s ease-in-out;
  cursor: pointer;
  color: #f3f9fd;
  background: var(--equation-editor-confirm-btn-bg);
  align-self: flex-start;
  height: 1.5rem;
  padding: 0 0.375rem;
  margin: 4px 0 4px 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  --equation-editor-confirm-btn-bg: #2783de;
}

.equation-editor-confirm-btn:hover {
  background: hsl(from var(--equation-editor-confirm-btn-bg) h s calc(l + -5));
}

.equation-editor-confirm-btn:active {
  background: hsl(from var(--equation-editor-confirm-btn-bg) h s calc(l + -10));
}

.equation-editor-confirm-btn > .text {
  font-weight: 500;
}

.equation-editor-confirm-btn > .icon {
  line-height: 1;
  transform: translateY(0.095em);
}