/* Project preview top bar (templates/shuffle/editor/preview/iframe.html.twig) */

/* Fixed height: the page iframe, grid and mobile stage start 60px from the top */
.preview-topbar {
    height: 60px;
}

/* Device size buttons */
.rwd-button.active {
    background-color: oklch(92.8% 0.006 264.531);
    color: rgba(55, 88, 249, 1);
}

/* Leaves the preview frame, an icon button like the device size buttons */
.preview-close {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    color: #536387;
    transition: background-color .15s, color .15s, box-shadow .15s;
}

.preview-close:hover {
    background: #fff;
    color: #0d172a;
    box-shadow: 0 1px 2px rgba(166, 175, 195, .25), 0 0 0 1px rgba(15, 23, 42, .04);
}

.preview-close:focus-visible {
    outline: 2px solid rgba(55, 88, 249, .6);
    outline-offset: 1px;
}

/* Browser | Grid */
#iframe-address-bar {
    box-shadow: 0 1px 2px rgba(166, 175, 195, .25), 0 0 0 1px rgba(15, 23, 42, .04);
}

.preview-view-mode {
    position: absolute;
    top: 50%;
    left: 100%;
    display: flex;
    gap: 2px;
    margin-left: 8px;
    padding: 3px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(166, 175, 195, .25), 0 0 0 1px rgba(15, 23, 42, .04);
    transform: translateY(-50%);
}

.preview-logo-icon { display: none; }

.preview-view-mode button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #536387;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.preview-view-mode button:hover { color: #0d172a; }
.preview-view-mode button.active { background: #EEF1FE; color: rgba(55, 88, 249, 1); }
.preview-view-mode button:focus-visible { outline: 2px solid rgba(55, 88, 249, .6); outline-offset: 1px; }

@media (min-width: 768px) {
    .preview-view-mode { margin-left: 12px; }
}

/* Phones: the address bar moves left to make room, the switch shows icons only */
@media (max-width: 767px) {
    .preview-address { margin-right: 92px; }

    .preview-close { display: none; }

    .preview-view-mode button {
        justify-content: center;
        width: 32px;
        padding: 0;
    }

    .preview-view-mode button span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

@media (max-width: 399px) {
    .preview-address { width: 112px; }
    .preview-logo-full { display: none; }
    .preview-logo-icon { display: block; }
}

.preview-grid {
    position: fixed;
    inset: 60px 0 0;
    background: #F4F5F7;
}

.preview-grid[hidden],
.preview-grid__loader[hidden] { display: none; }

.preview-grid__iframe {
    display: block;
    width: 100%;
    height: 100%;
}

/* Same as the loader inside the grid, so the hand-over isn't visible */
.preview-grid__loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: #F4F5F7;
    color: #536387;
    font-size: 14px;
    font-weight: 500;
}

.preview-grid__spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #E3E6EC;
    border-top-color: rgba(55, 88, 249, 1);
    border-radius: 50%;
    animation: preview-grid-spin .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .preview-grid__spinner { animation-duration: 2.4s; }
}

@keyframes preview-grid-spin {
    to { transform: rotate(360deg); }
}

/* Only the device size change animates, coming back from the grid shows the page at once */
#preview-iframe {
    transition-property: max-width, box-shadow;
}

/* Hidden under the grid but still laid out, a page selected in the grid loads there in the background */
body.preview-view-grid #preview-iframe,
body.preview-view-grid #mobile-stage { visibility: hidden; }

body.preview-view-grid #preview-browser-controls .rwd-button { display: none !important; }
body.preview-view-grid .display-none-grid { display: none !important; }

/* Mobile app designs */
.mobile-stage {
    position: fixed;
    inset: 60px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    background: radial-gradient(circle at 50% 35%, #f1f5f9, #dfe5ee);
}

/* Takes the scaled size of the device, so the stage centers and scrolls by what is visible */
.mobile-device-sizer {
    flex-shrink: 0;
    margin: auto;
}

/* Sized by the iframe, not by the sizer, which already holds the scaled size */
.mobile-device {
    width: max-content;
    padding: 12px;
    background: #0b0d12;
    border-radius: 64px;
    box-shadow: 0 0 0 2px #2b2f38, 0 30px 70px -20px rgba(15, 23, 42, .45), 0 12px 24px -12px rgba(15, 23, 42, .35);
    transform-origin: top left;
}

.mobile-device--android {
    padding: 10px;
    border-radius: 44px;
}

.mobile-device iframe {
    display: block;
    background: #fff;
    border-radius: 52px;
}

.mobile-device--android iframe {
    border-radius: 34px;
}