@import '../shared/shared'


// redefine touch because we are the host ... 

touch( val = true )
    { '.touch-' + val } &
        { block }


#container  

    background color-panel
    transition transform 0.4s cubic-bezier( 0, 0.8, 0, 1 )

    &.autoplace-true  
        
        width panel-width
        
        &.touch-true
            width panel-width-touch
        
        position fixed
        top 0

        &.docked-false 
            right 20px
    
        &.docked-true 
            right 0
            bottom 0
            
            #controllers  
                position absolute
                width 100%
                bottom 0
                top 0
                overflow auto
            
            &.open-false  
                transform translate3d( panel-width, 0, 0 )

                &.touch-true
                    transform translate3d( panel-width-touch, 0, 0 )


#closeButton  
    
    panel-font()
    
    user-select none
    cursor pointer
    text-align center
    padding padding * 0.75 padding
    background black

    +hover()
        background color-panel
    

#closeButtonDocked  
    
    position absolute
    right 100%
    
    cursor pointer

    top 0
    color black

    width 60px
    height 60px

    padding 10px
    box-sizing border-box

#closeButtonDockedInner 

    border-radius 3px
    background #fff

    width 100%
    height 100%