/*
Drawer (nestable)
*/
.bc-drawer[data-edit], .bc-drawer[data-edit] *{
    pointer-events: none !important;
}
.bc-drawer__overlay{
    --overlay-duration: .4s;
    --overlay-easing: cubic-bezier(.32,.72,0,1);
    transition: opacity var(--overlay-duration) var(--overlay-easing); /*duration y ease del opacity de overlay*/
    opacity: 0;
    pointer-events: none;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 99998; /*zIndex*/
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.8); /*background*/
}
.bc-drawer__overlay[data-open]{
    opacity: 1;
    pointer-events: all;
}
.bc-drawer__drawer{
    --drawer-duration: .4s;
    --drawer-easing: cubic-bezier(.32,.72,0,1);
    transition: transform var(--drawer-duration) var(--drawer-easing); /*duration y ease del transform de drawer*/

    position: fixed;
    transform: translateY(100%);
    bottom: 0;
    left: 0;
    z-index: 99999; /*zIndex*/
    width: 100%;
    height: 500px;

    display: flex; /*display*/
    flex-direction: column;
    align-items: center;
    padding: 15px 150px; /*padding, background, shadow, border*/

    background-color: hsl(240 10% 3.9%);

    border: 1px solid #27272A;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    /*remove text selection*/
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.bc-drawer__drawer[data-close]{
    transform: translateY(100%) !important;
}
.bc-drawer__drawer[data-open]{
    transform: translateY(0%);
}
.bc-drawer__drag{ /*elemento en nestable*/
    width: 100px;
    height: 8px;

    border-radius: 100px;
    background-color: hsl(240 3.7% 15.9%);
}