/*
Resizable

<div class="resizable" data-orientation="horizontal|vertical">   flex row or column
  <div class="resizable-panel" data-panel-size data-collapsed>   flex-grow = its percent
  <div class="resizable-handle" role="separator" data-state>     a hairline with a wider hit area
    <div class="resizable-grip">                                 withHandle
  <div class="resizable-panel">

The controller writes each panel's flex-grow; the hairline and grip never
change size, so hover, focus and drag change only color and the ring.
*/

@layer components {

.resizable {
  display:  flex;
  width:    100%;
  height:   100%;
  min-width:  0;
  min-height: 0;
  overflow: hidden;
}

.resizable[data-orientation="vertical"] {
  flex-direction: column;
}

.resizable-panel {
  flex:       1 1 0px;
  min-width:  0;
  min-height: 0;
  overflow:   hidden;
}

.resizable-handle {
  position:        relative;
  flex:            none;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           var(--space-px);
  background:      var(--rule);
  outline:         none;
  touch-action:    none;
  user-select:     none;
  cursor:          col-resize;
  transition:      background-color var(--duration-fast) var(--ease-out);
}

.resizable[data-orientation="vertical"] > .resizable-handle {
  width:  auto;
  height: var(--space-px);
  cursor: row-resize;
}

/* The hit area: wider than the hairline, centered on it. */
.resizable-handle::after {
  content:   "";
  position:  absolute;
  top:       0;
  bottom:    0;
  left:      50%;
  width:     var(--space-2);
  transform: translateX(-50%);
}

.resizable[data-orientation="vertical"] > .resizable-handle::after {
  top:       50%;
  bottom:    auto;
  left:      0;
  right:     0;
  width:     auto;
  height:    var(--space-2);
  transform: translateY(-50%);
}

@media (pointer: coarse) {
  .resizable-handle::after {
    width: var(--control-height-sm);
  }

  .resizable[data-orientation="vertical"] > .resizable-handle::after {
    width:  auto;
    height: var(--control-height-sm);
  }
}

.resizable-handle[data-state="hover"],
.resizable-handle[data-state="drag"] {
  background: var(--rule-strong);
}

/* resizePreviewMode separator: the handle rides a transform ahead of the
   panels, drawn in the focus color above them. */
.resizable-handle[data-preview] {
  z-index:    1;
  background: var(--focus);
}

.resizable-handle:focus-visible {
  box-shadow: var(--focus-ring);
  z-index:    1;
}

.resizable-handle[data-disabled] {
  cursor: default;
}

.resizable[data-disabled] > .resizable-handle {
  cursor: default;
}

.resizable-grip {
  position:        relative;
  z-index:         1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex:            none;
  width:           var(--space-3);
  height:          var(--space-4);
  border:          var(--control-border-width) solid var(--rule);
  border-radius:   var(--radius-item);
  background:      var(--rule);
  color:           var(--ink-dim);
}

.resizable-grip .icon {
  width:  var(--space-2-5);
  height: var(--space-2-5);
}

.resizable[data-orientation="vertical"] > .resizable-handle > .resizable-grip {
  transform: rotate(90deg);
}

/* A fixed size splitter toggles between two positions on Enter or a click. */
.resizable-handle[data-fixed] {
  cursor: pointer;
}

/* F6 focuses a pane with nothing tabbable in it: an inset ring, so the
   group's overflow never clips it and nothing moves. */
.resizable-panel:focus-visible {
  outline:    none;
  box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus);
}

/*
Resizable grid

<div class="resizable-grid" data-grid>                      a CSS grid; the controller writes its tracks
  <div class="resizable-cell" data-cell>                    placed with grid-column and grid-row
  <div class="resizable-gridline" data-type="column|row">   absolutely placed on its track's leading edge

A gridline is a hit area centered on the boundary and takes no space; its
hairline is ::before. Hover, focus and drag change only color and the ring.
*/

.resizable-grid {
  position:   relative;
  display:    grid;
  width:      100%;
  height:     100%;
  min-width:  0;
  min-height: 0;
  overflow:   hidden;
}

.resizable-cell {
  min-width:  0;
  min-height: 0;
  overflow:   hidden;
}

.resizable-cell:focus-visible {
  outline:    none;
  box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus);
}

.resizable-gridline {
  --resizable-hit: var(--space-2);
  position:        absolute;
  z-index:         1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  outline:         none;
  touch-action:    none;
  user-select:     none;
}

@media (pointer: coarse) {
  .resizable-gridline {
    --resizable-hit: var(--control-height-sm);
  }
}

.resizable-gridline[data-type="column"] {
  inset-block:          0;
  inset-inline-start:   0;
  width:                var(--resizable-hit);
  margin-inline-start:  calc(var(--resizable-hit) / -2);
  cursor:               col-resize;
}

.resizable-gridline[data-type="row"] {
  inset-inline:  0;
  top:           0;
  height:        var(--resizable-hit);
  margin-top:    calc(var(--resizable-hit) / -2);
  cursor:        row-resize;
}

/* The hairline. */
.resizable-gridline::before {
  content:    "";
  position:   absolute;
  background: var(--rule);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.resizable-gridline[data-type="column"]::before {
  inset-block:          0;
  inset-inline-start:   50%;
  width:                var(--space-px);
  margin-inline-start:  calc(var(--space-px) / -2);
}

.resizable-gridline[data-type="row"]::before {
  inset-inline: 0;
  top:          50%;
  height:       var(--space-px);
  margin-top:   calc(var(--space-px) / -2);
}

.resizable-gridline[data-state="hover"]::before,
.resizable-gridline[data-state="drag"]::before {
  background: var(--rule-strong);
}

.resizable-gridline:focus-visible::before {
  box-shadow: var(--focus-ring);
}

.resizable-gridline[data-disabled] {
  cursor: default;
}

/* Where a column gridline crosses a row gridline, or at a bare edge. */
.resizable-grid[data-cursor="move"],
.resizable-grid[data-cursor="move"] > .resizable-gridline {
  cursor: move;
}

.resizable-grid[data-cursor="col-resize"] {
  cursor: col-resize;
}

.resizable-grid[data-cursor="row-resize"] {
  cursor: row-resize;
}

/* disableCursor: no resize cursors at all. */
.resizable-grid[data-disable-cursor] > .resizable-gridline {
  cursor: auto;
}

.resizable-gridline > .resizable-grip {
  z-index: 1;
}

.resizable-gridline[data-type="row"] > .resizable-grip {
  transform: rotate(90deg);
}

}