/* Split view (design/v5/V5Work.dc.html): two sides and a thin divider that drags; the side not in
   use dims to .7, all but its name (UI-12: that's the top row's). */

.panes {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.panes > .sheet { flex: 1 1 0; min-width: 0; }
/* the right side's set width never squeezes the left below its minimum when the window narrows */
.panes > .sheet-right { max-width: calc(100% - 268px); animation: rise 200ms var(--ease) backwards; }
.panes.split > .sheet:not(.pane-on) > :not(.note-title, .note-title-in) { opacity: .7; }

/* a 1px rule in a 12px handle, from under the toolbar to near the bottom */
.splitdiv {
  position: relative;
  z-index: 4;
  display: flex;
  flex: none;
  justify-content: center;
  width: 12px;
  margin: 56px -6px 16px;
  cursor: col-resize;
  touch-action: none;
}
.splitdiv > i { width: 1px; height: 100%; background: var(--sep); transition: background-color 120ms var(--ease); }
.splitdiv.active > i,
.splitdiv:focus-visible > i { background: var(--accent); }
@media (hover: hover) {
  .splitdiv:hover > i { background: var(--muted); }
}