#wp-admin-bar-drag-handle,
#wp-admin-bar-hide-btn{
  position: static !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: !important;
}

#wp-admin-bar-drag-handle .ab-empty-item,
#wp-admin-bar-hide-btn .ab-empty-item{
  display: none !important;
}

.handle {
  position: absolute !important;
  left: 50%;
  transform: translate(-50%,-50%);
  height: calc( 32px + 50px ) !important;
  top: 16px;
  /* background-color: #aa5555; */
  width: calc( 8vw + 30px ) !important;
  z-index: -10;
}

.handle.position-1 {
  left: 0;
  transform: translate(25% , -50%);
}

.handle.position-2 {
  left: 100%;
  transform: translate(-125% , -50%);
}

.trapezoid-1,
.trapezoid-2{
  cursor: grabbing;
  background-color: #23282d;
}

.trapezoid-1{
  width: 100% !important;
  height: 30px !important;
  top: 0 !important;
  right: 0 !important;
  position: absolute !important;
  -webkit-transform: perspective(200px) rotateX(40deg) !important;    
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
}



.trapezoid-1:after{
  content: "";
  position: absolute;
  top: 14px;

  height: 100%;
  background: linear-gradient(180deg,
  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 2px, 
  rgba(255,255,255,0) 2px,

  rgba(255,255,255,0) 5px,
  rgba(255,255,255,1) 5px,
  rgba(255,255,255,1) 7px, 
  rgba(255,255,255,0) 7px
  );
opacity: 0.2;
}

.trapezoid-2{
  width: 100% !important;
  height: 30px !important;
  bottom: 0 !important;
  right: 0 !important;
  position: absolute !important;
  -webkit-transform: perspective(200px) rotateX(-40deg) !important;    
  border-bottom-right-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  }

.trapezoid-2:after{
  content: "";
  position: absolute;
  bottom: 14px;
  height: 100%;
  background: linear-gradient(180deg,
  rgba(255,255,255,0) calc( 100% - 7px ), 
  rgba(255,255,255,1) calc( 100% - 7px ),
  rgba(255,255,255,1) calc( 100% - 5px ),
  rgba(255,255,255,0) calc( 100% - 5px ),


  rgba(255,255,255,0) calc( 100% - 2px ),
  rgba(255,255,255,1) calc( 100% - 2px ), rgba(255,255,255,1) 100%
  
  );
  opacity: 0.2;
}

#wpadminbar * {
  position: relative;
}

.trapezoid-1::after,
.trapezoid-2::after{
  transition: width 0.4s, opacity 0.4s, left 0.4s;
  transition-timing-function: ease-in;
  left: calc( ( 100% - 50% ) / 2 );
  width: 50%;
}

.trapezoid-1:hover::after,
.trapezoid-2:hover::after{
  opacity: 0.45;
  left: 20%;
  width: 60%;
}


#wpadminbar .ab-top-secondary {
  margin-right: 70px;
}

#wpadminbar .hide-btn-menu{
  position: absolute !important;
  right: 20px;
  height: 24px;
  width: 24px;
  position: absolute;
  top: calc( 32px / 2 );
  border-radius: 100%;
  background-color: rgba(156,156,156, 1);
  cursor: pointer;
  transform: translateY(-50%) scale(0.75);
  transition: 0.35s all;
}

#wpadminbar .hide-btn-menu:after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 14px;
  border: 2px solid white;
  transition: 0.35s all;
}


.hide-menu-wp *:not(.hide-btn-menu){
  visibility: hidden !important;
  pointer-events: unset !important;
}

.hide-menu-wp{
  background-color: transparent !important;
  transition: top 0.35s;
  transition-timing-function: ease-in-out;
}

#wpadminbar.hide-menu-wp .hide-btn-menu:after{
  height: 14px !important;
}

#wpadminbar.hide-menu-wp .hide-btn-menu{
  transform: translateY(-50%) scale(1);
}