/* Resizable mapping. ui-viz has no Resizable spec, so these are current HM values built from the HM Semantic / Primitive tokens.
   react-resizable-panels v4 owns the drag, constraints, keyboard and the pointer target (it expands the target around the thin
   separator); here only the divider and the optional grip are styled. The separator state is the library's `data-separator`
   ("inactive" | "hover" | "active") and `:focus-visible`. Panels and Group keep the library's inline sizing.
   The divider look is in `@layer components` so a consumer's utility classes still win. Nothing here references Separator tokens. */
:root, [data-hm-theme] {
  --hm-resizable-divider-width: 1px;
  --hm-resizable-divider-color: var(--hm-sem-stroke-input-default);
  /* Hover: a stronger neutral; dragging and keyboard focus: the primary color. The divider widens by a halo, not by layout. */
  --hm-resizable-hover-color: var(--hm-sem-stroke-default);
  --hm-resizable-active-color: var(--hm-sem-action-primary);
  --hm-resizable-focus-color: var(--hm-sem-stroke-input-focus);
  --hm-resizable-halo-width: 1px;

  --hm-resizable-grip-width: 12px;
  --hm-resizable-grip-height: 16px;
  --hm-resizable-grip-radius: 2px;
  --hm-resizable-grip-background: var(--hm-sem-bg-surface);
  --hm-resizable-grip-border-color: var(--hm-sem-stroke-input-default);
  --hm-resizable-grip-icon-size: 10px;
  --hm-resizable-grip-icon-color: var(--hm-sem-fg-secondary);

  /* Current HM value for this component only; not a global Disabled rule. */
  --hm-resizable-disabled-opacity: 0.6;
}

@layer components {
  [data-slot="resizable-handle"] {
    flex-shrink: 0;
    background: var(--hm-resizable-divider-color);
  }
  /* A separator between side-by-side panels is vertical; between stacked panels it is horizontal. */
  [data-slot="resizable-handle"][aria-orientation="vertical"] {
    width: var(--hm-resizable-divider-width);
  }
  [data-slot="resizable-handle"][aria-orientation="horizontal"] {
    height: var(--hm-resizable-divider-width);
  }

  [data-slot="resizable-handle"][data-separator="hover"] {
    background: var(--hm-resizable-hover-color);
    box-shadow: 0 0 0 var(--hm-resizable-halo-width) var(--hm-resizable-hover-color);
  }
  [data-slot="resizable-handle"][data-separator="active"] {
    background: var(--hm-resizable-active-color);
    box-shadow: 0 0 0 var(--hm-resizable-halo-width) var(--hm-resizable-active-color);
  }
  [data-slot="resizable-handle"]:focus-visible {
    background: var(--hm-resizable-focus-color);
    box-shadow: 0 0 0 var(--hm-resizable-halo-width) var(--hm-resizable-focus-color);
  }
  [data-slot="resizable-handle"][data-disabled],
  [data-slot="resizable-handle"][aria-disabled="true"] {
    opacity: var(--hm-resizable-disabled-opacity);
  }

  [data-slot="resizable-handle-grip"] {
    box-sizing: border-box;
    width: var(--hm-resizable-grip-width);
    height: var(--hm-resizable-grip-height);
    border: 1px solid var(--hm-resizable-grip-border-color);
    border-radius: var(--hm-resizable-grip-radius);
    background: var(--hm-resizable-grip-background);
    color: var(--hm-resizable-grip-icon-color);
  }
  [data-slot="resizable-handle-grip"] > svg {
    width: var(--hm-resizable-grip-icon-size);
    height: var(--hm-resizable-grip-icon-size);
  }
  /* Between stacked panels the grip lies down. */
  [data-slot="resizable-handle"][aria-orientation="horizontal"] [data-slot="resizable-handle-grip"] {
    transform: rotate(90deg);
  }
}