/*
 * <x-scaffold>: the FAB it places, and the margin its content region already draws.
 *
 * The rest of the scaffold — the rail, the navigation bar, the content region — is still drawn by
 * its Tailwind classes until its rewrite (plan step 36); this file holds only what step 35 added.
 *
 * `data-md-scaffold-fab` places the page's FAB as Compose's Scaffold places its floating action
 * button: fixed at the bottom-end corner (M3's adaptive placement for a FAB, "lower right (bottom
 * trailing) corner", docs/reference/m3/components-actions-communication-containment.md § FAB →
 * Behaviour), with M3's margin from the window's edges — 16px below medium and 24px from 600px
 * (docs/reference/m3/foundations-supplement.md § Breakpoints). `inset-inline-end` is the trailing
 * edge, so a right-to-left document puts it on the left, clear of the safe area on that side.
 *
 * From the bottom it clears, in order: the navigation bar, or the bottom safe area where there is
 * none — `max()`, since `--material-bottom-bar` already includes the safe area (the navigation bar
 * publishes it on the scaffold below medium); then a snackbar while one shows. <x-toast> sits 16px
 * above the bar and publishes its height as `--material-snackbar-height` while it is on screen, so
 * the FAB adds that height and the snackbar's own 16px (`min()` of the height and 16px is 16px when
 * a snackbar shows and 0px when none does) — M3: "snackbars should appear above FABs — never in
 * front of or behind one" (§ Snackbar → Placement). It moves there on the spatial spring, which
 * reduced motion makes instant. z-index 30 is the navigation bar's own layer: over the page, under
 * a scrim and the snackbar.
 *
 * `--md-layout-margin: 0px` on the content region tells a pane or canonical layout inside that the
 * region already keeps the window margin (layout/pane.css), so neither draws it a second time.
 *
 * In `material.layout`.
 */

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

@layer material.layout {
    [data-md-scaffold] main {
        --md-layout-margin: 0px;
    }

    [data-md-scaffold-fab] {
        --md-scaffold-fab-margin: var(--md-sys-measurement-space200);

        position: fixed;
        z-index: 30;
        inset-inline-end: max(
            var(--md-scaffold-fab-margin),
            var(--material-safe-right, env(safe-area-inset-right))
        );
        inset-block-end: calc(
            max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom)))
            + var(--md-scaffold-fab-margin)
            + var(--material-snackbar-height, 0px)
            + min(var(--material-snackbar-height, 0px), var(--md-sys-measurement-space200))
        );
        transition: inset-block-end var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);

        @media (width >= 600px) {
            --md-scaffold-fab-margin: var(--md-sys-measurement-space300);
        }
    }

    [data-md-scaffold-fab]:dir(rtl) {
        inset-inline-end: max(
            var(--md-scaffold-fab-margin),
            var(--material-safe-left, env(safe-area-inset-left))
        );
    }
}