/*
 * Transitions are based in a model of 'covers'. A Cover is a representation
 * of the current panel which will be animated. "z-index" is a key here, so the
 * the structure is:
 * - Regular panel: 'z-index:0' ;
 * - Covers: 'z-index:10' ;
 * - Drawer background: 'z-index:15' ;
 * - Drawer (Settings): 'z-index:20' ;
 * - Overlay: 'z-index:30' ;
 */


#startup-panel,
#basic-tutorial-panel,
#signin-panel,
#main-panel,
#application-panel,
#group-panel,
#pairing-panel,
#startup-tutorial-panel,
#pairing-tutorial-panel,
#security-panel,
#log-panel{
    transform: translate(0, 0);
    z-index: 0;
    left: 100%;
}

.cover {
    height: 100%;
    width: 100%;
    position: absolute;
    background-position: center;
    left: 0;

}

body.startup #startup-panel ,
body.basic-tutorial #basic-tutorial-panel,
body.signin #signin-panel,
body.main #main-panel,
body.application #application-panel,
body.group #group-panel,
body.security #security-panel,
body.pairing #pairing-panel,
body.pairing-tutorial #pairing-tutorial-panel,
body.startup-tutorial #startup-tutorial-panel,
body.log #log-panel{
    left: 0;
}

/* LEFT EFFECT */

body[data-cover-status="left"] #current-cover{
    left: 0;
    transform: translate(-1px, 0);
    z-index: 10;
}

body[data-cover-status="left"] #next-cover{
    left: 0;
    transform: translate(100%, 0);
    z-index: 10;
}

body[data-transition-effect="left"] #current-cover{
    transition: transform 0.4s  ease-in-out;
    transform: translate(-100%, 0);
}

body[data-transition-effect="left"] #next-cover{
    transition: transform 0.38s  ease-in-out;
    transform: translate(0, 0);
}

/* UP EFFECT */

body[data-cover-status="up"] #current-cover{
    left: 0;
    transform: translate(0, 1px);
    z-index: 10;
}

body[data-cover-status="up"] #next-cover{
    left: 0;
    transform: translate(0, 100%);
    z-index: 10;
}

body[data-transition-effect="up"] #current-cover{
    transition: transform 0.4s ease;
    transform: translate(0, -100%);
}

body[data-transition-effect="up"] #next-cover{
    transition: transform 0.4s ease;
    transform: translate(0, 0);
}

/* DOWN EFFECT */

body[data-cover-status="down"] #current-cover{
    left: 0;
    transform: translate(0, 1px);
    z-index: 10;
}

body[data-cover-status="down"] #next-cover{
    left: 0;
    transform: translate(0, -100%);
    z-index: 10;
}

body[data-transition-effect="down"] #current-cover{
    transition: transform 0.4s ease;
    transform: translate(0, 100%);
}

body[data-transition-effect="down"] #next-cover{
    transition: transform 0.4s ease;
    transform: translate(0, 0);
}

/* RIGHT EFFECT */

body[data-cover-status="right"] #current-cover{
    left: 0;
    transform: translate(1px, 0);
    z-index: 10;
}

body[data-cover-status="right"] #next-cover{
    left: 0;
    transform: translate(-100%, 0);
    z-index: 10;
}

body[data-transition-effect="right"] #current-cover{
    transition: transform 0.4s ease-in-out;
    transform: translate(100%, 0);
}

body[data-transition-effect="right"] #next-cover{
    transition: transform 0.38s ease-in-out;
    transform: translate(0, 0);
}

#current-cover{
    transform: translate(0, 0);
}

#current-cover {
    -moz-box-sizing: border-box;
    /*border: 1rem solid green;*/
}

#next-cover {
    -moz-box-sizing: border-box;
    /*border: 1rem solid red;*/
}



