.#{$prefix}viewport,
.#{$prefix}viewport > .#{$prefix}body {
    margin: 0;
    padding: 0;
    border: 0 none;
}

.#{$prefix}viewport {
    // the viewport must have an explicit height and width so that we can make the
    // body fill the viewport (see below)
    width: 100%;
    height: 100%;
    position: static;
}

.#{$prefix}viewport > .#{$prefix}body {
    // position has to be set to fixed here due to a known issue with
    // Unwanted scrolling when focusing an input inside the modal
    // see: http://stackoverflow.com/questions/37287148/ios-safari-chrome-unwanted-scrolling-when-focusing-an-input-inside-the-modal
    position: fixed;
    top: 0;
    left: 0;
    // min-height/width ensures that the body element fills the viewport if its content is
    // smaller than the viewport (when using an auto layout on the viewport), while allowing
    // the body element to expand if the content does not fit within the viewport.
    min-width: 100%;
    min-height: 100%;
}

@media print {
    // if the body position is not set to static, it will only print the
    // frist page of multi-paged apps.
    .#{$prefix}viewport > .#{$prefix}body {
        position: static;
    }
}