@media screen{
    .hy-drawer-scrim{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:100vw;
    opacity:0;
    pointer-events:none;
    transform:translateX(0);
    -webkit-tap-highlight-color:transparent;
    background:rgba(0,0,0,0.5);
    background:var(--hy-drawer-scrim-background,rgba(0,0,0,0.5));
    z-index:998
    }
    
    .hy-drawer-content nav{
        height:100vh;
        padding:0!important;
        display:block;
    }
    
    .hy-drawer-content{
        position:fixed;
        top:0;
        right:100px;
        height:100vh;
        overflow-x:hidden;
        overflow-y:auto;
        transform:translateX(0);
        contain:strict;
        -webkit-overflow-scrolling:touch;
        width:300px;
        width:var(--hy-drawer-width,300px);
        z-index:999;
    }
    
    .hy-drawer-content.hy-drawer-left{
        left:-300px;
        left:calc(-1 * var(--hy-drawer-slide-width,var(--hy-drawer-width,300px)));
    }

    .hy-drawer-content.hy-drawer-right{
        /* right:-300px;
        right:calc(-1 * var(--hy-drawer-slide-width,var(--hy-drawer-width,300px))); */
        right: -100%;
        width: 100%;
    }
    
    .hy-drawer-grab{
        cursor:move;
        cursor:-webkit-grab;
        cursor:-moz-grab;
        cursor:grab;
    }
    
    .hy-drawer-grabbing{
        cursor:-webkit-grabbing;
        cursor:-moz-grabbing;
        cursor:grabbing;
    }

}

@media print{
    .hy-drawer-scrim{
        display:none!important;
    }

    .hy-drawer-content{
        transform:none!important;
    }
}