@import '../shared/shared'

// redefine touch because we are the host ... 
touch( val = true )
     { '.touch-' + val } &
        { block }

dur = 0.4s

#panel  
    transition transform dur cubic-bezier( 0, 0.8, 0, 1 )
    background color-panel
    
    .autoplace-true &
        width panel-width
        position fixed
        top 0

    .autoplace-true.touch-true &
        width panel-width-touch

    .docked-false &
        right 20px

    .docked-true &
        right 0
        bottom 0
        overflow auto
        -webkit-overflow-scrolling touch

    .docked-true.open-false &
        transform translate3d( panel-width, 0, 0 )
        overflow visible

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


#controllers  
    
    panel-font()
    
    .docked-true &
        position absolute
        width 100%
        

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


#dockedContent:not(:empty)
    position fixed
    top 0
    left 0
    bottom 0

    // needs to be dynamic if we do panel resizing again
    right: panel-width
        
    .open-false &
        right: 0
    


gui-button
    panel-font()
    background color-panel
    height row-height
    position absolute
    transition all dur cubic-bezier( 0, 0.8, 0, 1 )

    // .open-false &
    //     transition-delay stagger * 0.5
    .docked-true & 
        top 0
        right 0
        width row-height*1.5
        height row-height*1.5
        box-sizing border-box
        background color-panel


    .docked-true.open-false &
        transform translate3d( - panel-width, 0, 0 )

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


    .docked-false & 
        right 0
        left 0