/*
 * <x-list-detail>: M3's list-detail canonical layout — a list, and the detail of what it selected.
 *
 * Its visible-panes table, row by row (docs/reference/m3/foundations-supplement.md § Canonical
 * layouts → List-detail):
 *
 *   Compact (0–599)        1 pane    list, or the detail once something is selected
 *   Medium (600–839)       1 or 2    1, M3's recommendation for a layout that is not low-density
 *   Expanded (840+)        2         list and detail side by side
 *   Large (1200–1599)      2         the same
 *   Extra-large (1600+)    2         the same
 *
 * Below 840px one pane shows: the list while `data-md-selected` is absent, the detail while it is
 * there, with a back button — M3: "a Back button appears in the detail view only for single-pane
 * layouts". From 840px the list is a fixed pane and the detail flexible, 24px apart: the fixed pane
 * is 360dp at expanded and 412dp from large (§ Breakpoints, "fixed-and-flexible layout's fixed pane
 * defaults to 360dp" at expanded and "412dp" at large and extra-large; 24dp margins and spacer),
 * and every back button inside is hidden. Grid columns run in the inline direction, so in a
 * right-to-left document the list is on the right — the mirror M3 requires of every canonical
 * layout (docs/reference/m3/foundations.md § Layout → Bidirectionality / RTL) — and the back arrow
 * turns with it.
 *
 * The layout keeps its content off the window's edge by M3's margin (16px below medium, 24px from
 * it) unless it is inside something that already does (`--md-layout-margin`, pane.css), and tells
 * what is inside it that the margin is drawn. A pane that is focused as a whole draws no outline:
 * it is not a control, and the element focus lands on inside it is what shows the ring.
 *
 * In `material.layout`; the state and focus are resources/js/layout.js.
 */

@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

@import './visibility.css';

@layer material.layout {
    [data-md-list-detail] {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space200));

        @media (width >= 600px) {
            padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space300));
        }

        @media (width >= 840px) {
            grid-template-columns: 360px minmax(0, 1fr);
            column-gap: var(--md-sys-measurement-space300);
        }

        @media (width >= 1200px) {
            grid-template-columns: 412px minmax(0, 1fr);
        }
    }

    [data-md-list-detail] > * {
        --md-layout-margin: 0px;
    }

    [data-md-list-detail-pane] {
        min-inline-size: 0;
        outline: none;
    }

    [data-md-list-detail-back-row] {
        display: flex;
        align-items: center;
        min-block-size: var(--md-sys-measurement-space800);
    }

    [data-md-list-detail-back] [data-md-icon]:dir(rtl) {
        transform: scaleX(-1);
    }

    @media (width < 840px) {
        [data-md-list-detail]:not([data-md-selected]) > [data-md-list-detail-pane='detail'],
        [data-md-list-detail][data-md-selected] > [data-md-list-detail-pane='list'] {
            display: none;
        }
    }

    @media (width >= 840px) {
        [data-md-list-detail-back-row],
        [data-md-list-detail] [data-md-list-detail-back] {
            display: none;
        }
    }
}