radial thing

src/lib/components/RingInput.svelte

@@ -8,65 +8,67 @@
     ["g", "h", "i"],
     ["j", "k", "l"],
   ]
-
-  /**
-   * @param index {number}
-   * @returns number
-   */
-  function calcLayerPosition(index) {
-    return index - activeLayer
-  }
 </script>
 
 <div class="radial">
-  {#each Array.from({length: layers}) as _, i}
+  {#each layout as key, j}
     <!--suppress Stylelint -->
-    <div
-      class="layer"
-      style="translate: -50% -50% {((i - activeLayer + 1) % 2) - 1}px; filter: brightness({1 -
-        Math.log(1 + Math.abs(i - activeLayer))})"
-      class:active={activeLayer === i}
-    >
-      <button on:click={() => (activeLayer = (activeLayer + 1) % layers)}>{i}</button>
-      <button>{i}</button>
-      <button>{i}</button>
-      <button>{i}</button>
-    </div>
+    <button on:click={() => (activeLayer = (activeLayer + 1) % layers)}>
+      {#each key as value, i}
+        <span class:active={activeLayer === i} style="offset-distance: {j * 25 + (i - activeLayer) * 8}%"
+          >{value}</span
+        >
+      {/each}
+    </button>
   {/each}
 </div>
 
 <style lang="scss">
   $border-width: 18px;
   $gap: 6px;
-  $size: 96px;
+  $size: 96;
+  $offset: 14;
   $scale-difference: 0.2;
 
   .radial {
     position: relative;
-    width: 0;
-    height: 0;
-    perspective: 3px;
-  }
-
-  .layer {
-    pointer-events: none;
-
-    position: absolute;
-    z-index: -1;
-    transform-style: preserve-3d;
-    translate: -50% -50% 0;
 
     container: radial / size;
 
-    width: $size;
-    height: $size;
+    width: #{$size * 1px};
+    height: #{$size * 1px};
 
     transition: all 250ms ease;
   }
 
-  .layer.active {
-    pointer-events: all;
-    z-index: 1;
+  span {
+    $cr: $size / 2 - 2 * $offset;
+
+    scale: 0.9;
+    offset-path: path(
+      "M#{$size / 2} #{$offset}A#{$cr} #{$cr} 0 1 1 #{$size / 2} #{$size - $offset}A#{$cr} #{$cr} 0 1 1 #{$size / 2} #{$offset}Z"
+    );
+    offset-rotate: 0deg;
+
+    display: flex;
+    grid-column: 1;
+    grid-row: 1;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    height: 100%;
+
+    font-size: 16px;
+
+    opacity: 0.3;
+
+    transition: all 250ms ease;
+
+    &.active {
+      scale: 1;
+      opacity: 1;
+    }
   }
 
   button {
@@ -74,11 +76,11 @@
 
     position: absolute;
 
-    display: flex;
+    display: grid;
 
     width: 100cqw;
     height: 100cqh;
-    padding: 5px;
+    padding: 0;
 
     font-family: "Noto Sans Mono", monospace;
     font-size: 16px;
@@ -99,26 +101,18 @@
     }
 
     &:nth-child(1) {
-      align-items: flex-start;
-      justify-content: center;
       clip-path: polygon(50% 50%, 0 0, 100% 0);
     }
 
     &:nth-child(2) {
-      align-items: center;
-      justify-content: flex-end;
       clip-path: polygon(50% 50%, 100% 0, 100% 100%);
     }
 
     &:nth-child(3) {
-      align-items: flex-end;
-      justify-content: center;
       clip-path: polygon(50% 50%, 0 100%, 100% 100%);
     }
 
     &:nth-child(4) {
-      align-items: center;
-      justify-content: flex-start;
       clip-path: polygon(50% 50%, 0 0, 0 100%);
     }
   }