/* ==========================================================================
   Block: React App
   ==========================================================================
   The shadow root inside <hl-react-app> already blocks every selector-based
   style, in both directions. What it does not block is inheritance: font,
   colour, line-height and friends still flow across the boundary from the
   theme. `all: initial` on the host cuts that off, after which the app's own
   stylesheet is the only thing styling its contents.
   ========================================================================== */

.block-react-app {
    position: relative;
    width: 100%;
}

.block-react-app__app {
    /* Order matters: `all` is a shorthand, so the declarations after it win. */
    all: initial;
    display: block;
    width: 100%;
    height: var(--hl-react-app-height, 100dvh);

    /* Re-stated because `all: initial` would otherwise drop the app to the
       browser default serif — the bundle asks for Maax, which the theme
       registers as a document-level @font-face that shadow trees can use. */
    font-family: "Maax", sans-serif;

    /* Matches the app's own #root background, so there is no white flash
       between first paint and the bundle booting. */
    background-color: rgb(242, 243, 240);
}

/* Editor placeholder, and the front-end "nothing configured" state. */
.block-react-app__placeholder {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 2rem;
    border: 1px dashed var(--wp--preset--color--accent-3, #b0bac2);
    border-radius: 4px;
    background-color: var(--wp--preset--color--accent-5, rgba(0, 0, 0, 0.05));
}

.block-react-app__placeholder code {
    font-size: 0.75rem;
    word-break: break-all;
}

.block-react-app__noscript {
    padding: 2rem;
}