@layer components {
  /* -- Resizer --------------------------------------------------
     Wraps ONE container element and adds draggable handles on any subset of
     its 8 positions (sides + corners). The wrapper is the positioning context;
     handles overhang the border box by design, so keep overflow visible.
     Sizing behavior (px vs w-/h- classes) is driven by the runtime - this
     sheet owns only the handle geometry, cursors and feedback states. */
  .resizer {
    position: relative;
    /* block box hugging the wrapped element (its intrinsic width) so handles
       sit on the BOX's edges, not the container's; an explicit authored/
       runtime width overrides this (e.g. the CodeExample toolbar writes px) */
    width: fit-content;
  }

  /* The resizer owns resizing: a native CSS `resize` on the wrapped element
     (e.g. a resizable canvas) would double the affordances - the runtime
     neutralizes it inline; this is the authored-CSS fallback. */
  .resizer[data-resize-mode] {
    resize: none;
  }

  .resizer-handle {
    position: absolute;
    z-index: 5;
    display: block;
    box-sizing: border-box;
    width: 0.375rem;
    height: 0.375rem;
    background: var(--background);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-2xs);
    touch-action: none; /* the pointer-drag is ours - no scroll/pinch steal */
    opacity: 0.85;
    transition: opacity 120ms ease, background-color 120ms ease, transform 120ms ease;

    /* generous hit area around the small visible chip */
    &::after {
      content: '';
      position: absolute;
      inset: -0.5rem;
    }

    &:hover {
      opacity: 1;
      background: var(--primary);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
      opacity: 1;
    }
  }

  /* drag in progress - the active handle (and the box) read as engaged */
  .resizer[data-resizing] > .resizer-handle {
    opacity: 1;
    background: var(--primary);
  }
  .resizer[data-resizing] {
    outline: 1px dashed var(--ring);
    outline-offset: 2px;
  }
  /* the box must track the pointer 1:1 - a size TRANSITION on the wrapped
     element (e.g. the sidebar's `transition: width 200ms`) would ease toward
     the drag instead of following it, which reads as the handle lagging
     behind the mouse. Only during the drag; authored transitions resume after
     (trigger-toggle collapse animation stays intact) */
  .resizer[data-resizing] > * {
    transition-duration: 0s;
  }

  /* -- side geometry: edge centers + corners, with the right cursor -------- */
  .resizer-handle[data-handle='n'] {
    top: -0.1875rem;
    left: 50%;
    translate: -50% -50%;
    cursor: ns-resize;
  }
  .resizer-handle[data-handle='s'] {
    bottom: -0.1875rem;
    left: 50%;
    translate: -50% 50%;
    cursor: ns-resize;
  }
  .resizer-handle[data-handle='e'] {
    right: -0.1875rem;
    top: 50%;
    translate: 50% -50%;
    cursor: ew-resize;
  }
  .resizer-handle[data-handle='w'] {
    left: -0.1875rem;
    top: 50%;
    translate: -50% -50%;
    cursor: ew-resize;
  }
  .resizer-handle[data-handle='ne'] {
    top: -0.1875rem;
    right: -0.1875rem;
    translate: 50% -50%;
    cursor: nesw-resize;
  }
  .resizer-handle[data-handle='nw'] {
    top: -0.1875rem;
    left: -0.1875rem;
    translate: -50% -50%;
    cursor: nwse-resize;
  }
  .resizer-handle[data-handle='se'] {
    bottom: -0.1875rem;
    right: -0.1875rem;
    translate: 50% 50%;
    cursor: nwse-resize;
  }
  .resizer-handle[data-handle='sw'] {
    bottom: -0.1875rem;
    left: -0.1875rem;
    translate: -50% 50%;
    cursor: nesw-resize;
  }

  /* -- Divider: a split pane's edge (data-variant="divider") ----------------
     The edge handles become full-length strips along the box - invisible until
     hovered, focused or dragged, then a thin line - and the box gets no dashed
     outline while it resizes. Corners keep their chip. */
  .resizer[data-variant='divider'] {
    & > .resizer-handle:is([data-handle='e'], [data-handle='w'], [data-handle='n'], [data-handle='s']) {
      width: 0.5rem;
      height: 0.5rem;
      border: 0;
      border-radius: 0;
      background: none;
      box-shadow: none;
      opacity: 1;
      &::before {
        content: '';
        position: absolute;
        inset: 0;
        margin: auto;
        background: var(--primary);
        opacity: 0;
        transition: opacity 120ms ease;
      }
      &::after { inset: 0; }
      &:hover::before, &:focus-visible::before { opacity: 0.6; }
      &:focus-visible { outline: none; }
    }
    & > .resizer-handle:is([data-handle='e'], [data-handle='w']) {
      top: 0;
      bottom: 0;
      height: auto;
      translate: 0 0;
      cursor: col-resize;
      &::before { width: 2px; }
    }
    & > .resizer-handle[data-handle='e'] { right: -0.25rem; }
    & > .resizer-handle[data-handle='w'] { left: -0.25rem; }
    & > .resizer-handle:is([data-handle='n'], [data-handle='s']) {
      left: 0;
      right: 0;
      width: auto;
      translate: 0 0;
      cursor: row-resize;
      &::before { height: 2px; }
    }
    & > .resizer-handle[data-handle='n'] { top: -0.25rem; }
    & > .resizer-handle[data-handle='s'] { bottom: -0.25rem; }
    &[data-resizing] { outline: none; }
    &[data-resizing] > .resizer-handle { background: none; }
    &[data-resizing] > .resizer-handle::before { opacity: 1; }
  }

  /* -- Accessibility media features (REQUIRED) ------------------ */
  @media (prefers-reduced-motion: reduce) {
    .resizer-handle,
    .resizer[data-resizing] > .resizer-handle,
    .resizer[data-variant='divider'] > .resizer-handle::before {
      transition: none;
    }
  }

  @media (prefers-contrast: more) {
    /* a divider always shows its line */
    .resizer[data-variant='divider'] > .resizer-handle::before { opacity: 0.5; }
    .resizer-handle {
      width: 0.625rem;
      height: 0.625rem;
      opacity: 1;
      border-width: 2px;
    }
  }

  @media (forced-colors: active) {
    .resizer-handle {
      background: Canvas;
      border-color: CanvasText;
      forced-color-adjust: none;
    }
    .resizer[data-resizing] > .resizer-handle {
      background: Highlight;
      border-color: Highlight;
    }
    .resizer[data-variant='divider'] > .resizer-handle::before { background: Highlight; }
  }
}