feat: init split layouts

assets/scss/styles.scss

@@ -178,8 +178,6 @@ select {
   @apply cursor-pointer;
   @apply appearance-none;
 
-  // height: 40px;
-
   &::-ms-expand {
     @apply hidden;
   }
@@ -295,3 +293,64 @@ input[type="checkbox"] {
     margin-bottom: env(safe-area-inset-bottom);
   }
 }
+
+.splitpanes__splitter {
+  @apply relative;
+  @apply bg-primaryLight;
+  @apply transition;
+}
+
+.splitpanes--vertical > .splitpanes__splitter {
+  @apply w-1;
+}
+
+.splitpanes--horizontal > .splitpanes__splitter {
+  @apply h-1;
+}
+
+.splitpanes__splitter::before {
+  @apply absolute;
+  @apply inset-0;
+  @apply bg-dividerLight;
+  @apply opacity-0;
+  @apply z-1;
+  @apply transition;
+
+  content: "";
+}
+
+.splitpanes__splitter::after {
+  @apply absolute;
+  @apply inset-0;
+  @apply z-1;
+  @apply transition;
+  @apply flex;
+  @apply items-center;
+  @apply justify-center;
+  @apply text-dividerDark;
+  @apply font-icon;
+}
+
+.splitpanes--vertical > .splitpanes__splitter::after {
+  content: "\e5d4";
+}
+
+.splitpanes--horizontal > .splitpanes__splitter::after {
+  content: "\e5d3";
+}
+
+.splitpanes__splitter:hover::before {
+  @apply opacity-100;
+}
+
+.splitpanes--vertical > .splitpanes__splitter::before {
+  left: -2px;
+  right: -2px;
+  height: 100%;
+}
+
+.splitpanes--horizontal > .splitpanes__splitter::before {
+  top: -2px;
+  bottom: -2px;
+  width: 100%;
+}