
/* Scales as percentages */
$mobileScale: 0.238;
$tabletScale: 0.487;
$desktopScale: 0.735;
$browserWidth: 1440px;
$browserHeight: 900px;

/**
 * Shared styles for preview
 */
.site-preview,
.layout-preview {

    /* This container helps the thumbnail behave as if
    it were an unscaled IMG element */
    .thumbnail-container {
        display: inline-block;
        overflow: hidden;
        position: relative;
        width: 100%;

        /* This is a masking container for the zoomed iframe element */
        .thumbnail {
            width: fit-content;
            -ms-zoom: $mobileScale;
            -moz-transform: scale($mobileScale);
            -moz-transform-origin: 0 0;
            -o-transform: scale($mobileScale);
            -o-transform-origin: 0 0;
            -webkit-transform: scale($mobileScale);
            -webkit-transform-origin: 0 0;

            /* This facilitates the fade-in transition instead of flicker.
            It also helps us maintain the illusion that this is an image,
            since some webpages will have a preloading animation or wait
            for some images to download */
            iframe {
                opacity: 0;
                vertical-align: initial;
                margin: 0;
                padding: 0;
                float: none;
                transition: all 300ms ease-in-out;
                pointer-events: none;
                overflow-y: scroll;
            }

            /* This is our screen sizing */
            @media (min-width: 768px) {
                -ms-zoom: $tabletScale;
                -moz-transform: scale($tabletScale);
                -o-transform: scale($tabletScale);
                -webkit-transform: scale($tabletScale);
            }
            @media (min-width: 1024px) {
                -ms-zoom: $desktopScale;
                -moz-transform: scale($desktopScale);
                -o-transform: scale($desktopScale);
                -webkit-transform: scale($desktopScale);
            }

            &:not(.layout) {
                iframe {
                    min-height: 900px;
                }
            }

            /* Height override */
            &.header-01,
            &.header-02,
            &.header-03,
            &.header-04,
            &.header-05 {
                iframe {
                    min-height: 200px;
                }
            }

            &.footer-01,
            &.footer-02,
            &.footer-03,
            &.footer-04 {
                iframe {
                    min-height: 400px;
                }
            }
            &.footer-05 {
                iframe {
                    min-height: 475px;
                }
            }
        }

        /* This is our screen sizing */
        .thumbnail iframe {
            width: $browserWidth;
        }

        /* This pseudo element masks the iframe, so that mouse wheel
        scrolling and clicking do not affect the simulated "screenshot" */
        .disabled {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            &:hover {
                cursor: not-allowed;
            }
        }
    }
}
