/*    
 * native - everything static. popups are full screen with no animation or chrome
 * i.e. most options are turned off
 *
 * expanding iframe - mostly static display, but viewport has absolute positioning
 * and overflow hidden to prevent giant iframes on iOS. only valid for simple in-page
 * apps. If new header works without position absolute, no need for complex page
 * padding etc.
 *
 * expanding - all static.
 *
 * fixed - block pages get absolute positioning. 
 */
$viewportType: "fixed" !default;
$pageMargins: () !default;

/* 
 * padding - Fixed header and footer elements may be transparent, so they sit over the
 * content, which has padding to compensate.  
 *
 * margin - Margins are added, with header and footer appearing
 * outside of the scroll areas. Exists mostly to deal with ugly scrollbars on windows.
 */

$pageMarginType: "padding" !default;

.chondric-viewport {
    // default styling - don't need much, but make sure we have a stacking context and that anything animated from
    // off screen won't trigger scrolling.
    z-index: 1;
    overflow: hidden;
    @if $viewportType == "native" {
        -webkit-user-select: none;
    }
    @if $viewportType == "fixed" {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
}

@if $viewportType == "expanding" {
    .chondric-viewport.embedded {
        position: relative;
    }
    .chondric-viewport.fullscreen {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        .chondric-page.block {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            @each $sel, $val in $pageMargins {
                @if $pageMarginType == "margin" {
                    &#{$sel} {
                        margin: nth($val, 1) nth($val, 2) nth($val, 3) nth($val, 4);
                    }
                }
                @if $pageMarginType == "padding" {
                    &#{$sel} > .page-content {
                        padding: nth($val, 1) nth($val, 2) nth($val, 3) nth($val, 4);
                    }
                }
            }
        }
    }
}

@if $viewportType == "fixed" {
    .chondric-page.block {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        > .page-content {
            box-sizing: border-box;
            min-height: 100%;
            position: relative;
        }
        @each $sel, $val in $pageMargins {
            @if $pageMarginType == "margin" {
                &#{$sel} {
                    margin: nth($val, 1) nth($val, 2) nth($val, 3) nth($val, 4);
                }
            }
            @if $pageMarginType == "padding" {
                &#{$sel} > .page-content {
                    padding: nth($val, 1) nth($val, 2) nth($val, 3) nth($val, 4);
                }
            }
        }
    }
}

.chondric-page {
    display: none;
}

.chondric-page.active {
    display: block;
    opacity: 1;
    z-index: 10;
}

/*
.chondric-viewport {
    position: relative !important;
    overflow: visible !important;
    padding-top: 47px;
    padding-bottom: 20px;
    padding-left: 15px;
    padding-right: 15px;
 
    border: solid 2px #6B8C00;
    border-radius: 15px ;
    
    background-color: #E7E7E7;
}

*/

.chondric-page.popup-page {
    position: absolute;
    background-color: #fff;
    width: 630px;
    height: 630px;
    left: 50%;
    top: 50%;
    margin-left: -315px;
    margin-top: -315px;
    z-index: 1100;
}

.chondric-page.active-popup {
    display: block;
    opacity: 1;
    z-index: 100;
}