/* Resize handles on the side cards */
.rs-handle { position: absolute; z-index: 1; touch-action: none; }
.rs-w { top: 0; bottom: 16px; width: 8px; cursor: ew-resize; }
.rs-h { left: 0; right: 16px; bottom: 0; height: 8px; cursor: ns-resize; }
.rs-c { bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; }
.rs-w.rs-left, .rs-c.rs-left { right: 0; }
.rs-w.rs-right, .rs-c.rs-right { left: 0; }
.rs-h.rs-left { right: 16px; left: 0; }
.rs-c.rs-right { cursor: nesw-resize; }
.rs-h.rs-right { left: 16px; right: 0; }
.rs-w::after, .rs-h::after { content: ""; position: absolute; background: var(--accent); opacity: 0; transition: opacity 120ms; }
.rs-w::after { top: 0; bottom: 0; width: 2px; }
.rs-w.rs-left::after { right: 0; }
.rs-w.rs-right::after { left: 0; }
.rs-h::after { left: 0; right: 0; bottom: 0; height: 2px; }
.rs-handle:hover::after, .rs-handle.dragging::after, .rs-handle:focus-visible::after { opacity: 1; }
.rs-handle:focus-visible { outline: none; }
.rs-c::before {
  content: ""; position: absolute; bottom: 4px; width: 8px; height: 8px; opacity: 0.7;
  background: radial-gradient(circle, var(--text-faint) 1px, transparent 1.5px) 0 0 / 4px 4px;
}
.rs-c.rs-left::before { right: 4px; }
.rs-c.rs-right::before { left: 4px; }
.rs-c:hover::before, .rs-c.dragging::before { opacity: 1; }
body.is-resizing { user-select: none; -webkit-user-select: none; }