@import '../../index';

.sidePanel
    position: fixed;
    z-index: 999;
    top: 0
    right: 0
    bottom: 0
    width: 50em;

.sidePanel-container
    height: 100%
    position: relative

.sidePanel-content
    border: 1px solid $app['palette']['border-thirdary']
    background-color: transparent
    position: absolute
    box-sizing: border-box;
    height:  100%
    width: 100%

.sidePanel-content > .page-header
    background-color:  $app['palette']['border-primary']

.sidePanel-content > .page-body
    background-color:  $app['palette']['bg-primary']

.sidePanel-content > .page-footer
    background-color:  $app['palette']['bg-primary']

.sidePanel-close svg
    fill:  $app['palette']['text-primary']

.sidePanel-close label
    display: none

.sidePanel-close.button
    background-color:  $app['palette']['bg-primary']
    position: absolute
    top: 0
    right: 0
    cursor: pointer