/*
For mathematical notation CSS, a good consistency choice is:

rem for layout spacing that should scale with the document/root font size (gaps, margins, padding).

em for dimensions that should scale with the local math font size (matrix brackets, fraction spacing, borders that visually belong to the glyph).

px only for hairline/structural details such as borders.
*/

div.equations {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2rem;
}

div.equation {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

span.fraction {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

/* using two 1px borders instead of a single 2px border to ensure the fraction bar is vertically centered between the numerator and denominator */

span.fraction > span:first-child {
    /* numerator */
    display: block;
    border-bottom: 1px solid currentColor;
    /*padding: 0.15em 0.25em 0.25em;*/
    white-space: nowrap; /* prevent line-wrapping */
}

span.fraction > span:last-child {
    /* denominator */
    display: block;
    border-top: 1px solid currentColor;
    /*padding: 0.25em 0.25em 0.15em;*/
    white-space: nowrap; /* prevent line-wrapping */
}

table.matrix {
    position: relative;
    display: inline-table;
    border-collapse: collapse;
    margin: 0 0.5rem;
}

table.matrix td {
    padding: 0.25rem 0.5rem;
    text-align: center;
    border: none;
}

table.matrix::before,
table.matrix::after {
    content: "";
    position: absolute;
    top: -0.125rem;
    bottom: -0.125rem;
    width: 0.5rem;
}

table.matrix::before {
    left: -0.5rem;
    border-left: 2px solid currentColor;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

table.matrix::after {
    right:  -0.5rem;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}