1 files changed, 51 insertions, 44 deletions

diff --git a/source/library/components/Splitter.svelte b/source/library/components/Splitter.svelte
index 73d0e10..a758385 100644
--- a/source/library/components/Splitter.svelte
+++ b/source/library/components/Splitter.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  /*** UTILITY ------------------------------------------ ***/
   type Props = {
     label?: string;
     max?: number;
@@ -27,33 +28,7 @@
   let startX = $state(0);
   let startY = $state(0);
 
-  function onPointerDown(event: PointerEvent) {
-    event.preventDefault();
-    dragging = true;
-    startX = event.clientX;
-    startY = event.clientY;
-    event.currentTarget instanceof Element &&
-      event.currentTarget.setPointerCapture(event.pointerId);
-    onDragStart?.();
-  }
-
-  function onPointerMove(event: PointerEvent) {
-    if (!dragging)
-      return;
-
-    onDrag(event.clientX - startX, event.clientY - startY);
-  }
-
-  function onPointerUp(event: PointerEvent) {
-    if (!dragging)
-      return;
-
-    dragging = false;
-    event.currentTarget instanceof Element &&
-      event.currentTarget.releasePointerCapture(event.pointerId);
-    onDragEnd?.();
-  }
-
+  /*** HELPER ------------------------------------------- ***/
   function onKeydown(event: KeyboardEvent) {
     if (!onKeyAdjust)
       return;
@@ -76,49 +51,82 @@
       }
     }
   }
+
+  function onPointerDown(event: PointerEvent) {
+    event.preventDefault();
+    dragging = true;
+    startX = event.clientX;
+    startY = event.clientY;
+    event.currentTarget instanceof Element && event.currentTarget.setPointerCapture(event.pointerId);
+    onDragStart?.();
+  }
+
+  function onPointerMove(event: PointerEvent) {
+    if (!dragging)
+      return;
+
+    onDrag(event.clientX - startX, event.clientY - startY);
+  }
+
+  function onPointerUp(event: PointerEvent) {
+    if (!dragging)
+      return;
+
+    dragging = false;
+    event.currentTarget instanceof Element && event.currentTarget.releasePointerCapture(event.pointerId);
+    onDragEnd?.();
+  }
 </script>
 
 <style lang="scss">
   .splitter {
     align-items: center;
-    background: transparent;
     display: flex;
     justify-content: center;
     position: relative;
     touch-action: none;
     user-select: none;
 
-    &:hover::after,
-    &.dragging::after {
-      background: var(--graphiql-accent, #0e639c);
-    }
-
     &::after {
-      background: var(--graphiql-border, #333);
+      border-radius: 25rem;
       content: "";
       position: absolute;
       transition: background 120ms ease;
     }
 
+    &:not(:hover):not(.dragging) {
+      background-color: transparent;
+
+      &::after {
+        background-color: inherit;
+      }
+    }
+
+    &:hover,
+    &.dragging {
+      background-color: oklch(var(--uchu-gray-2-raw) / 25%);
+
+      &::after,
+      &::after {
+        background-color: var(--uchu-orange-4);
+      }
+    }
+
     &.horizontal {
+      width: 6px; height: 100%;
       cursor: col-resize;
-      height: 100%;
-      width: 6px;
 
       &::after {
-        height: 100%;
-        width: 1px;
+        width: 3px; height: 60%;
       }
     }
 
     &.vertical {
+      width: 100%; height: 6px;
       cursor: row-resize;
-      height: 6px;
-      width: 100%;
 
       &::after {
-        height: 1px;
-        width: 100%;
+        width: 60%; height: 3px;
       }
     }
   }
@@ -139,5 +147,4 @@
   onpointermove={onPointerMove}
   onpointerup={onPointerUp}
   role="separator"
-  tabindex="0"
-></div>
+  tabindex="0"></div>