// Read the docs in the directive : app-canvas
// Acts as a drawer on mobile
// collapsible on tablet
// full width on desktop

.app-canvas{

    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;

    > .side-pane, > .content-pane{
        position: absolute;
        left: 0px;
        height: 100%;
        overflow-x: hidden;
    }

    > .side-pane{

        background: $appSideBarBackground;
        width: $sideBarMobileWidth;
        @include transition(width 140ms);

        @media(min-width: $screen-md){
            width: $sideBarTabletWidth;
        }

        @media(min-width: $screen-lg){
            width: $sideBarDesktopWidth;
        }
    }

    > .content-pane{

        width: $sideBarMobileWidth;
        @include transition(transform 140ms);

        @media(min-width: $screen-md){
            left: $sideBarTabletWidth;
            @include experimental(width, calc(100% - #{$sideBarTabletWidth}));
        }

        @media(min-width: $screen-lg){
            left: $sideBarDesktopWidth;
            @include experimental(width, calc(100% - #{$sideBarDesktopWidth}));
        }
    }

    // Mobile & Portrait Tablet Behavior
    @media(max-width: $screen-md){
        > .side-pane.open ~ .content-pane{
            @include translate( #{$sideBarTabletExpandedWidth - 20px});
        }

    }

    // Landscape tablet behavior
    @media(min-width: $screen-md) and (max-width: $screen-lg){


        //> .side-pane:hover,
        > .side-pane.open {
            width: $sideBarTabletExpandedWidth;
        }

        //> .side-pane:hover ~ .content-pane,
        > .side-pane.open ~ .content-pane{
            @include translate( #{$sideBarTabletExpandedWidth} );
        }
    }
}