flex-splitter-directive/styles2.css

Dead simple pane-splitter control based on flexbox.

:where([data-flex-splitter-horizontal], [data-flex-splitter-vertical]) {
  display: flex;
  height: 100%;
}
:where(:is([data-flex-splitter-horizontal], [data-flex-splitter-vertical]) > *) {
  flex: none;
  overflow: auto;
  box-sizing: border-box;
}
:where(:is([data-flex-splitter-horizontal], [data-flex-splitter-vertical]) > [role="separator"]) {
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(160, 160, 160, 0.15);
}
:where(:is([data-flex-splitter-horizontal], [data-flex-splitter-vertical]) > [role="separator"])::before {
  content: "";
  box-sizing: border-box;
  border: 1.25px rgba(160, 160, 160, 0.8);
}
:where([data-flex-splitter-horizontal] > [role="separator"]) {
  cursor: ew-resize;
  width: 8px;
}
:where([data-flex-splitter-horizontal] > [role="separator"])::before {
  width: 4px;
  height: 24px;
  border-style: none solid;
}
:where([data-flex-splitter-vertical]) {
  flex-direction: column;
}
:where([data-flex-splitter-vertical] > [role="separator"]) {
  cursor: ns-resize;
  height: 8px;
}
:where([data-flex-splitter-vertical] > [role="separator"])::before {
  width: 24px;
  height: 4px;
  border-style: solid none;
}