@import '../shared/shared';

#container { 

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

    &.autoplace-true { 

        width: panel-width;
        position: fixed;
        top: 0;

        &.docked-false {

            right: 20px;

            &.open-true { 
                
            }

            &.open-false { 

            }

        }

        &.docked-true {
            
            right: 0;
            bottom: 0;
            
            #controllers { 
                position: absolute;
                width: 100%;
                bottom: 0;
                top: 0;
                overflow: auto;
            }

            &.open-true {

            }
    
            &.open-false { 
                transform: translate3d( panel-width, 0, 0 );
            }

        }

    }

}


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

    &:hover { 
        background: panel-color;
    }

}

#closeButtonDocked { 
    
    position: absolute;
    right: panel-width;
    
    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%;

}