@import '../index';

.page
    background-color:  $app['palette']['bg-primary']['1']
    color:  $app['palette']['text-primary']['1']
    height: 100%
    overflow: hidden
    box-shadow: 0px 1px 7px black
    box-sizing: content-box

.page-header,
.page-body,
.page-footer
    padding: 0 0.5em;
    box-sizing: border-box;

.page-header
    background-color:  $app['palette']['bg-primary']['2']
    color:  $app['palette']['text-primary']['2']
    position: absolute
    width: 100%
    height: 3em
    line-height: 3em;
    vertical-align: middle;

.page-body
    background-color:  $app['palette']['bg-primary']['1']
    color:  $app['palette']['text-primary']['1']
    top: 3em
    position: absolute
    bottom: 2em
    overflow-y: auto
    overflow-x: hidden
    width: 100%

.page-footer
    background-color:  $app['palette']['bg-primary']['2']
    color:  $app['palette']['text-primary']['2']
    position: absolute
    bottom: 0
    min-height: 2em
    height: 2em;
    width: 100%
//height: 2em
//line-height: 2em;

//.page-footer > .buttons > .button label,
//.page-footer > .buttons > .button-async label
//    background-color:  $app['palette']['bg-primary']['1']
//    border-color:  $app['palette']['border-primary']
//    color:  $app['palette']['text-primary']['1']

.page-bottom-layout
    position: fixed
    bottom: 2.5em
    right: 1em
    text-align: right
    z-index: 1

.page-bottom-layout > div
    float: right
    margin: 0 1em