js-drop{display:flex;flex-direction: column; align-items: center;justify-content: center;}
js-drop .container{width:calc(100%);height:calc(100%);}
drop-head{width: calc(100% - 20px);height:calc(100% - 20px)}
drop-head input{user-select: none;}
js-drop .container{display: flex;flex-direction: column;height:100%;position: relative;}

js-drop drop-body >  drop-search{opacity: 0;visibility: hidden;}

drop-body{
    position:absolute;
    left:0;
    display:flex;
    width: 100%;
    height:0;
    
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:10px;
    max-height:0px;
    /* overflow: hidden; */
    
    transition:max-height 0.5s ease-in-out ;
   
    
    
}

drop-search{padding-inline:5px}
drop-search input-generator{border:1px solid;}
drop-search input-generator .btn{background-color: transparent;box-shadow: none;border: none;}
drop-search input{
    width:100%;
}

js-drop.active drop-body .container:not(:empty){padding:8px}
js-drop.active,js-drop.active drop-body{z-index: 20;}



js-drop.active drop-body > drop-search{opacity: 1;transition-delay: 0.4s;transition: 0.5s;visibility: visible;}



js-drop.active drop-body{max-height:300px;height: fit-content; padding: 10px;z-index: 2;}
js-drop input-generator .clear{color:snow}



js-drop.opposite drop-body{flex-direction: column-reverse;}

drop-body drop-search{width:100%;height:42px;margin-top:10px;}


js-drop:not(.opposite) drop-body{top:100%;}
js-drop.opposite drop-body{bottom:calc(100% - 4px);}

js-drop:not(.opposite):not(.collapsed) drop-body{transform: translate(0,15px);}
js-drop.opposite:not(.collapsed) drop-body{transform: translate(0,-15px);}
js-drop.collapsed:not(.opposite) drop-search{margin-top:-7px}

js-drop.active.collapsed:not(.opposite){border-bottom-left-radius: 0px;border-bottom-right-radius:0px ;}
js-drop.active.opposite.collapsed{border-top-left-radius: 0px;border-top-right-radius:0px ;}

/* js-drop:not(.collapsed) .container{margin-top:10px} */


js-drop.collapsed.opposite drop-body{border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;}
js-drop.collapsed:not(.opposite) drop-body{border-top-left-radius: 0px; border-top-right-radius: 0px;}

/* js-drop.active.opposite:not(.collapsed)  drop-body{border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;} */




    

js-drop rows{position:relative;width: 100%;min-height: 40px;display: flex; padding: 5px 8px 5px 8px !important;cursor: pointer;justify-content: space-between;}
js-drop rows:hover,js-drop rows.active{box-shadow: inset 26px 38px 31px rgba(26, 34, 38, 0.2);}
js-drop rows ::selection{outline: none !important;}


js-drop subbody{
    position:fixed;
    left:inherit;
    display:flex;
    width: 250px;
    height:auto;
    top:inherit;
    
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
   
    /* overflow: hidden; */
    display: none;

}

js-drop subbody .content{
    width:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    background-color: hsl(var(--dark-bg-standart));
    align-items: center;
    gap:10px;
    height:auto;
    max-height: 300px;
    padding:10px;
}

js-drop subbody[data-dir='right']{
    left:0;padding-left : 15px;
    transform: translate(calc(100% - 60px),0);
}

js-drop subbody[data-dir='left']{
    padding-right : 35px;
    transform: translate(calc(-100%),0);
}

js-drop.active  drop-body .container rows:hover subbody{
    display:flex;
}