/*
 * Change notes, see the mxn-change-table and mxn-change-note directives (_ext/mxn_change_table.py) and
 * mxn_change_table.js.
 *
 * Markup produced by the directives:
 *
 *   .mxn-change-table                    A titled list of notes.
 *     .mxn-change-title                  The title.
 *     .mxn-change-note                   One note, a card. .mxn-change-<type> sets the color of its type box.
 *       .mxn-change-header               The header, which toggles the body when the note has one.
 *         .mxn-change-type               The type of the change as a past tense verb, a tinted box which fills the left
 *                                        end of the header.
 *         .mxn-change-description        The rest of the sentence of the verb, one line.
 *       .mxn-change-body                 Any content. Optional, a note without a body cannot be expanded.
 *                                        .mxn-change-open on the note expands it by default.
 *
 * Without JavaScript all bodies are shown. mxn_change_table.js marks the table with .mxn-change-ready, adds the
 * chevron to the headers of the notes with a body, and collapses them.
 */

/* Docutils containers also get Bootstrap's .container padding and max-width, which must not apply here. */
.mxn-change-table.container,
.mxn-change-table .container {
    width: auto;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
}

.mxn-change-table {
    margin: 1.25rem 0 1.75rem;
}

.mxn-change-title {
    margin: 0 0 0.5rem !important;
    font-size: 1.1rem;
    font-weight: 600;
}

.mxn-change-note {
    --change-color: var(--color-text-muted);
    margin-bottom: 0.3rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-api-card-background);
}

/* The colors follow the scheme of the drawings: green, violet, blue, orange and red, as in mxn_math.js. */
.mxn-change-add { --change-color: #46a873; }
.mxn-change-fix { --change-color: #7a5bd6; }
.mxn-change-update { --change-color: #478fce; }
.mxn-change-deprecate { --change-color: #e8913a; }
.mxn-change-remove { --change-color: #d95847; }

/* The header has no padding on the left, so that the type box touches the border of the card. The selector must
   be more specific than the container reset above, which clears the padding of all nested containers. */
.mxn-change-table .mxn-change-header {
    display: flex;
    align-items: stretch;
    min-height: 1.9rem;
    padding: 0 0.75rem 0 0;
}

.mxn-change-header > p {
    margin: 0;
}

/* The type is only colored text in a box of a fixed width, so that the descriptions of all notes line up. The text is
   right aligned, so that it ends right before the description. */
.mxn-change-type {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    width: 5.25rem;
    padding: 0 0.25rem 0 0.75rem;
    background: none;
    color: color-mix(in srgb, var(--change-color) 80%, var(--color-text));
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mxn-change-description {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.25rem 0 0.25rem 0.75rem;
    font-size: 0.9rem;
}

/* The chevron is a square without padding, so that it rotates around the center of the glyph. */
.mxn-change-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-left: 0.75rem;
    color: var(--color-text-muted);
    transition: transform .15s;
}

.mxn-change-header[aria-expanded="false"] .mxn-change-chevron {
    transform: rotate(-90deg);
}

/* Only the notes with a body can be toggled. */
.mxn-change-header[role="button"] {
    cursor: pointer;
}

.mxn-change-header[role="button"]:hover {
    background-color: color-mix(in srgb, var(--color-control-hover) 40%, var(--color-api-card-background));
}

/* The focus is marked by the hover color rather than an outline. */
.mxn-change-header[role="button"]:focus,
.mxn-change-header[role="button"]:focus-visible {
    outline: none !important;
    background-color: color-mix(in srgb, var(--color-control-hover) 40%, var(--color-api-card-background));
}

/* The body, which holds any content, such as lists, tables or code. */
.mxn-change-table .mxn-change-body {
    padding: 0.6rem 0.75rem 0.75rem;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-api-card-background);
    font-size: 0.9rem;
}

.mxn-change-body[hidden] {
    display: none;
}

.mxn-change-body > :first-child {
    margin-top: 0;
}

.mxn-change-body > :last-child {
    margin-bottom: 0;
}

.mxn-change-body > table.docutils {
    width: 100%;
    table-layout: fixed;
}

@media (max-width: 700px) {
    .mxn-change-type {
        width: 4.25rem;
    }
}

/* The type column of a table is only as wide as the longest type word of that table. The table is a grid of three
   columns: type, description and chevron. The notes and their headers use the columns of the table as a subgrid, so
   that all notes of a table share them. Without subgrid, the types have a fixed width instead. */
@supports (grid-template-columns: subgrid) {
    .mxn-change-table {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr) max-content;
    }

    .mxn-change-table > *,
    .mxn-change-note > * {
        grid-column: 1 / -1;
    }

    .mxn-change-note,
    .mxn-change-table .mxn-change-header {
        display: grid;
        grid-template-columns: subgrid;
    }

    .mxn-change-type {
        width: auto;
    }
}