:root{
  --sidebar-width:190px;
}

.layout{
  grid-template-columns:var(--sidebar-width) minmax(0,1fr)!important;
}

.sidebar{
  position:sticky;
  overflow:visible;
}

.sidebarResizeHandle{
  position:absolute;
  top:0;
  right:-5px;
  bottom:0;
  width:10px;
  z-index:80;
  cursor:col-resize;
  touch-action:none;
  user-select:none;
  outline:none;
}

.sidebarResizeHandle::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:4px;
  width:2px;
  background:transparent;
  transition:background .15s ease, box-shadow .15s ease;
}

.sidebarResizeHandle:hover::before,
.sidebarResizeHandle:focus-visible::before,
.sidebarResizeHandle.dragging::before{
  background:#2f7bd4;
  box-shadow:0 0 0 1px #2f7bd433,0 0 8px #2f7bd466;
}

body.resizingSidebar,
body.resizingSidebar *{
  cursor:col-resize!important;
  user-select:none!important;
}

.sidebarResizeHandle.disabled{
  display:none;
}

@media(max-width:900px){
  .layout{
    grid-template-columns:1fr!important;
  }
  .sidebarResizeHandle{
    display:none!important;
  }
}