/*
 * Item list, see the mxn-item-list and mxn-item directives (_ext/mxn_item_list.py) and mxn_item_list.js.
 *
 * Markup produced by the directives:
 *
 *   .mxn-item-list                      The root, a two-column grid: navigation and the selected item.
 *     .mxn-item-list-nav                The navigation, a vertical list of links with optional group headings.
 *       .mxn-item-list-group            A group heading.
 *       .mxn-item-list-link             A link to an item, .mxn-item-list-active marks the selected one.
 *         .mxn-item-list-name           The text of the link.
 *     .mxn-item-list-display            Holds all items, of which only the selected one is visible.
 *       .mxn-item-list-item             One item.
 *         .mxn-item-list-header         The header of the item, containing .mxn-item-list-title.
 *
 * Items are hidden until mxn_item_list.js selects one and marks the root with .mxn-item-list-ready.
 */

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

/* The root: fixed-width navigation on the left, the selected item filling the rest. */
.mxn-item-list {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    margin: 1.25rem 0;
}

/* The navigation card. */
.mxn-item-list-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-normal);
    background-color: var(--color-api-card-background);
}

.mxn-item-list-nav > p {
    margin: 0;
}

/* Group headings of the navigation. */
.mxn-item-list-group {
    margin: 0.75rem 0 0.25rem !important;
    padding: 0 0.6rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.mxn-item-list-group:first-child {
    margin-top: 0.25rem !important;
}

/* A navigation link. Selection and hover fill the full width of the card and are deliberately not rounded, the
   transparent left border is reserved for the marker of the selected link. */
.mxn-item-list-link,
.mxn-item-list-link:visited {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0.35rem 0.6rem;
    border-left: 3px solid transparent;
    border-radius: 0;
    color: var(--color-link);
    text-decoration: none;
}

.mxn-item-list-link:hover {
    background-color: color-mix(in srgb, var(--color-control-hover) 40%, var(--color-api-card-background));
    color: var(--color-link);
    text-decoration: none;
}

.mxn-item-list-link:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: -2px;
}

.mxn-item-list-name {
    font-weight: 500;
}

/* The selected link, set by mxn_item_list.js. */
.mxn-item-list-link.mxn-item-list-active {
    border-left-color: var(--color-link);
    background-color: color-mix(in srgb, var(--color-link) 12%, transparent);
}

/* The area showing the items. min-width: 0 lets wide content, such as code, scroll instead of stretching the grid. */
.mxn-item-list-display {
    min-width: 0;
}

.mxn-item-list-item {
    display: none;
    min-width: 0;
}

/* Reveal only the selected panel after initialization; malformed lists fall back to showing every item. */
.mxn-item-list-ready .mxn-item-list-item:not([hidden]),
.mxn-item-list-fallback .mxn-item-list-item {
    display: block;
}

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

.mxn-item-list-title {
    margin-bottom: 0.75rem !important;
    font-size: 1.15rem;
    font-weight: 600;
}

.mxn-item-list-display .highlight {
    overflow-x: auto;
}

/* Narrow screens: the navigation becomes a wrapping row of tabs above the item, without group headings, and the
   selection is marked below the link instead of next to it. */
@media (max-width: 820px) {
    .mxn-item-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .mxn-item-list-nav {
        flex-flow: row wrap;
    }

    .mxn-item-list-group {
        display: none;
    }

    .mxn-item-list-link {
        border-left: 0;
        border-bottom: 3px solid transparent;
    }

    .mxn-item-list-link.mxn-item-list-active {
        border-bottom-color: var(--color-link);
    }
}