/* Live demo of the Appway Design System archive inside its case study.

   Everywhere: a browser-like window with the archive in an iframe. The iframe
   ignores the pointer until someone asks to explore it, so a wheel or a swipe
   over the window keeps scrolling the case study instead of getting trapped.

   Wide screens with motion allowed (the takeover): the window is laid out at
   the full viewport size and scaled down to sit in the column. As it scrolls
   up to the top of the viewport, ds-live-demo.js eases --dsd-z from 0 to 1 and
   the scale grows to 1, so the docs take over the screen. The takeover rules
   only apply once the script has measured the page ([data-ready]). */

.main > .dsLive {
    float: none;
    clear: both;
    width: 100%;
    max-width: 100%;
    margin: var(--space-6, 48px) 0 0;
    box-sizing: border-box;
}

.dsLive {
    --dsd-ink: #131214;
    --dsd-line: rgb(19 18 20 / 0.14);
    --dsd-chrome: #f4f3f7;
    --dsd-radius: 12px;
    --dsd-chrome-size: 12px;
    --dsd-z: 0;
    --dsd-s: 1;
    --dsd-dx: 0px;
    position: relative;
    line-height: 1.4;
}

.dsLive__box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: min(78svh, 680px);
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
    color: var(--dsd-ink);
    border: 1px solid var(--dsd-line);
    border-radius: var(--dsd-radius);
    box-shadow:
        0 1px 2px rgb(15 23 42 / 0.06),
        0 12px 24px -12px rgb(15 23 42 / 0.16),
        0 32px 64px -24px rgb(75 34 199 / 0.28);
}

.dsLive__bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 1em;
    height: 3.2em;
    padding: 0 1em;
    background: var(--dsd-chrome);
    border-bottom: 1px solid var(--dsd-line);
    font-family: var(--font-meta, ui-monospace, monospace);
    font-size: var(--dsd-chrome-size);
}

.dsLive__dots { display: flex; gap: 0.5em; flex: none; }
.dsLive__dots span { width: 0.85em; height: 0.85em; border-radius: 50%; background: #ff5f57; }
.dsLive__dots span:nth-child(2) { background: #febc2e; }
.dsLive__dots span:nth-child(3) { background: #28c840; }

.dsLive__url {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    opacity: 0.7;
}

.dsLive__action {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.25em 0.85em;
    border: 1px solid var(--dsd-line);
    border-radius: 999px;
    background: #fff;
    color: var(--dsd-ink);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.dsLive__action[hidden] { display: none; }
.dsLive__action:hover { border-color: #4b22c7; color: #4b22c7; }
.dsLive__action:focus-visible { outline: 2px solid #4b22c7; outline-offset: 2px; }

.dsLive__iframe {
    flex: 1;
    display: block;
    width: 100%;
    min-height: 0;
    border: 0;
    background: #fff;
}

.dsLive__activate {
    position: absolute;
    inset: calc(var(--dsd-chrome-size) * 3.2) 0 0 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* High enough to clear the page's floating back-to-top pill, which sits
       bottom centre over the window once it fills the screen. */
    padding: 0 0 7em;
    border: 0;
    background: transparent;
    font-size: var(--dsd-chrome-size);
    cursor: pointer;
}
.dsLive__activate[hidden] { display: none; }
.dsLive__activate span {
    padding: 0.85em 1.5em;
    border-radius: 999px;
    background: #4b22c7;
    color: #fff;
    font-family: var(--font-meta, ui-monospace, monospace);
    font-size: 1.15em;
    font-weight: 600;
    box-shadow: 0 8px 24px -8px rgb(75 34 199 / 0.6);
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.dsLive__activate:hover span { background: #3a1a9c; transform: translateY(-2px); }
.dsLive__activate:focus-visible span { outline: 3px solid #e21b67; outline-offset: 3px; }

.dsLive:not(.is-live) .dsLive__iframe { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .dsLive__activate span { transition: none; }
}

/* The takeover. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .main > .dsLive[data-ready] {
        width: var(--dsd-vw, 100vw);
        max-width: none;
        margin-left: var(--dsd-left, 0px);
    }
    .dsLive[data-ready] .dsLive__frame {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
    .dsLive[data-ready] .dsLive__box {
        flex: none;
        width: var(--dsd-vw, 100vw);
        height: 100vh;
        transform: translateX(calc(var(--dsd-dx) * (1 - var(--dsd-z)))) scale(var(--dsd-s));
        /* Radius and border are divided by the scale so they read at a constant
           size while the window grows, and fade out as it fills the screen. */
        border-radius: calc(var(--dsd-radius) * (1 - var(--dsd-z)) / var(--dsd-s));
        border-width: calc(1px * (1 - var(--dsd-z)) / var(--dsd-s));
        box-shadow:
            0 1px 2px rgb(15 23 42 / calc(0.06 * (1 - var(--dsd-z)))),
            0 calc(12px / var(--dsd-s)) calc(24px / var(--dsd-s)) calc(-12px / var(--dsd-s)) rgb(15 23 42 / calc(0.16 * (1 - var(--dsd-z)))),
            0 calc(32px / var(--dsd-s)) calc(64px / var(--dsd-s)) calc(-24px / var(--dsd-s)) rgb(75 34 199 / calc(0.28 * (1 - var(--dsd-z))));
        will-change: transform;
    }
    /* Keep the window chrome at its reading size while the window is scaled
       down: everything in it is sized in em off this one value. */
    .dsLive[data-ready] {
        z-index: 40;
        --dsd-chrome-size: calc(12px / var(--dsd-s));
    }
}