.mathjax-wrapper {
    position: relative;
    /* Set z-index in order to create a new stacking context. This lets us set
     * the z-index of the copyable TeX relative to the rendered math. */
    z-index: 0;
    display: inline-block;
}

.mathjax-copyable-text {
    display: inline-block;
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    bottom: 0;
    overflow: hidden;
    user-select: all;
}

.mathjax-copyable-text > svg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.mathjax-copyable-text text::selection {
    /* color: transparent is needed for compatibility with flavors of Linux
     * that normally force the foreground color of selected text to be white or
     * black. If we didn't override this, the copyable TeX would be visible when
     * selected.
     *
     * !important is used to override styles from the Dark Reader browser
     * extension, and similar extensions that change the selection color.
     */
    color: transparent !important;
    stroke: transparent !important;
    fill: transparent !important;
    background: Highlight;
}

/* Ensure that unicode characters in mjx-utext elements aren't double-copied.
 * We only want the TeX in .mathjax-copyable-text to be copyable. */
mjx-utext {
    user-select: none;
}

.copy-menu-hack {
    display: inline-block;
    width: 0;
    overflow: hidden;
}

/* Make the size of MathJax-rendered math visually the same as the size of
 * KaTeX-rendered math. KaTeX defaults the font size to 1.21em (see
 * dist/katex.css in the "katex" NPM package).
 *
 * We need to use CSS to set the font size instead of the CHTML output jax's
 * `scale` parameter. Setting `scale` sets the font size via the `style`
 * attribute on the MathJax DOM element, which overrides font-size tweaks
 * done by Perseus via CSS (e.g. reducing the font size for inline math).
 *
 * `mjx-container.MathJax` is needed to override font-size styling added by
 * MathJax 2 (which is loaded dynamically, and is sometimes present on the page
 * at the same time as MathJax 3, e.g. when the legacy renderer (KaTeX+MathJax2)
 * uses the MathJax 2 fallback on /devadmin/tex or in the exercise editor).
 * MathJax 2 uses the .MathJax selector, so we use a more specific selector
 * here to override it.
 */
mjx-container.MathJax {
    font-size: 120%;
}

/* Defeat appshell's global box-sizing reset, which messes with the heights of
 * stretchy operators (brackets, parens, and braces). The .MathJax class is
 * needed to give the selector sufficient specificity to override the global
 * reset.
 * TODO(benchristel): remove this rule and instead reduce the specificity of
 * appshell's global box-sizing reset so it doesn't conflict with MathJax's
 * styles. We can do this once we no longer have to support Safari < 14. See
 * this thread for context:
 * https://khanacademy.slack.com/archives/C0918TZ5G/p1693428093059629?thread_ts=1693413262.368939&cid=C0918TZ5G
 */
mjx-container.MathJax,
mjx-container.MathJax * {
    box-sizing: border-box;
}

/* Override MathJax's styling for assistive MML. MathJax uses the selector
 * `mjx-assistive-mml` We scope our selector to the container so it will be more
 * specific and override MathJax's styles.
 */
mjx-container > mjx-assistive-mml {
    /* Ensure the MML has zero width, so it doesn't cause scrollbars to appear
     * when the MML contents are wider than the visibly rendered math.
     * We need to use !important to override MathJax's styles, which also use
     * !important. */
    width: 0 !important;
}

/* HACK(benchristel): these CSS rules are needed to get \text{} to render
 * nicely on Safari. See this issue:
 * https://github.com/mathjax/MathJax/issues/2866
 * The :not(mjx-base) selectors prevent this rule from applying to characters
 * that have accents or other modifiers (like vector arrows or hats) placed
 * over them.
 */
/* TODO(benchristel): Once we no longer need to support Safari < 14, refactor
 * this to use :where().
 */
:not(mjx-base) > :not(mjx-base) > :not(mjx-base) > :not(mjx-base) > mjx-mn > mjx-c::before,
:not(mjx-base) > :not(mjx-base) > :not(mjx-base) > :not(mjx-base) > mjx-mtext > mjx-c::before,
:not(mjx-base) > :not(mjx-base) > :not(mjx-base) > :not(mjx-base) > mjx-mi:not(.mjx-i) > mjx-c::before,
:not(mjx-base) > :not(mjx-base) > :not(mjx-base) > :not(mjx-base) > mjx-utext > mjx-c::before {
    padding-top: 0.8em !important;
}
/* MathJax inserts extra space under the bar of square roots. This is a visual
 * difference from KaTeX, and looks bad when combined with the padding hack
 * above. So we remove the extra space. The ::before pseudo-element with
 * min-height ensures that the square root is always at least tall enough to
 * accommodate one line of text.
 */
mjx-sqrt > mjx-box {
    padding-top: 0 !important;
}
mjx-sqrt > mjx-box > :first-child:not(mjx-mover)::before {
    min-height: 0.8em;
    width: 0;
    display: inline-block;
    content: '';
}
/* The fix for square roots results in another problem: if the square root
 * contains a display-style fraction with only a variable in the numerator, not
 * enough space is left between the square root bar and the numerator. To fix
 * this, we make sure that fraction numerators are always at least the height
 * of a full line of text.
 */
mjx-frac[type=d] > mjx-num::before {
    min-height: 0.8em;
    width: 0;
    display: inline-block;
    content: '';
}

/* Add space above parens in display style square roots */
mjx-table mjx-sqrt > mjx-box > mjx-mo > .mjx-c28,
mjx-table mjx-sqrt > mjx-box > mjx-mrow > mjx-mo > .mjx-c28 {
    padding-top: 0.42em;
}
/* ...but not in square roots inside fractions */
mjx-table mjx-frac mjx-sqrt > mjx-box > mjx-mo > .mjx-c28,
mjx-table mjx-frac mjx-sqrt > mjx-box > mjx-mrow > mjx-mo > .mjx-c28 {
    padding-top: 0;
}
/* ...and if the square root has a fraction inside and the paren is in the
 * numerator, there's slightly less space added */
mjx-table mjx-sqrt > mjx-box > mjx-mstyle > mjx-mfrac > mjx-frac > mjx-num > mjx-mrow > mjx-mo > .mjx-c28 {
    padding-top: 0.2em;
}