From a5e10dcb5072dcee51c6358a8dc33df0b190e131 Mon Sep 17 00:00:00 2001
From: Juan Martin <martinmuda@gmail.com>
Date: Mon, 1 May 2023 20:17:39 -0300
Subject: [PATCH] arc shape done

---
 src/_core-elements.scss | 23 ++++++++++++++++-------
 src/_radial-grid.scss   | 37 +++++++++++++++++++------------------
 2 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/src/_core-elements.scss b/src/_core-elements.scss
index 8ba4d43..a2848cc 100644
--- a/src/_core-elements.scss
+++ b/src/_core-elements.scss
@@ -6,7 +6,7 @@
     grid-template-columns: minmax(var(--radius), 1fr);
     grid-template-rows: minmax(var(--radius), 1fr);
     border: 1px dashed black;
-    @include alignment;
+    place-items: center;
     padding: 30px;
 }
 
@@ -15,8 +15,8 @@
     background-color: rgb(255, 255, 255);
     border: 1px solid black;
     grid-area: 1/1/1/1;
-    @include alignment;
-    z-index: 1;
+    place-items: center;
+    //z-index: 1;
 }
 
 //defaults
@@ -30,8 +30,12 @@
 .arc {
     display: grid;
     grid-area: 1/1/1/1;
-    //@include alignment;
-    z-index: 1;
+}
+.arc:after {
+    content: "";
+    z-index: 70;
+    position:absolute;
+
 }
 .content {
     padding: 5px;
@@ -70,7 +74,7 @@
     border-radius: 50%;
     border: 1px solid rgb(255, 5, 5);
     grid-area: 1/1/1/1;
-    align-items: center;
+    place-items: center;
     z-index: $max-rings;
 }
 
@@ -79,8 +83,13 @@ div[class^="ring-"] {
     border-radius: 50%;
     border: 1px dashed rgba(155, 155, 155, 0.5);
     grid-area: 1/1/1/1;
-    @include alignment;
+    place-items: center;
+}
+/* hack doesnt work on ffox 
+div[class^="ring-"]:has(.item) {
+    place-items: center;
 }
+*/
 
 @each $size,
 $var in $sizes {
diff --git a/src/_radial-grid.scss b/src/_radial-grid.scss
index 8e3cce3..baa8d68 100644
--- a/src/_radial-grid.scss
+++ b/src/_radial-grid.scss
@@ -117,28 +117,29 @@
    }
 
    .z-container>.ring-#{$i}>.arc {
-    transform:rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(calc(var(--radius-#{$i - 1})), 0) rotate(45deg) ;
-    --length: calc(var(--radius-#{$i}));
-    --semi: calc((90 - var(--angle)) / 2 * 1deg);
+    --length: calc(var(--radius-#{$i})*2);
+    --half: calc(var(--length)/2);
+    --quarter: calc(var(--half)/2);
+    transform:rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(var(--quarter), 0);
+    --semi: calc(var(--angle) / 2 * 1deg);
     --arc-gap: 1px;
-    --length-percent: calc(var(--radius-#{$i}) - var(--arc-gap) - var(--length) * tan(var(--semi)));
+    --length-percent: calc(var(--half) + var(--arc-gap) - var(--half) * tan(var(--semi)));
     --color: orange;
-    --tickness: 5px;
-    width: var(--length);
-    aspect-ratio: 1;
-    border: none;
-    border-top: var(--tickness) solid var(--color);
-    border-right: var(--tickness) solid var(--color);
-    background-color: black;
-    border-radius: 0% 100% 0% 0% / 0% 100% 0% 0%;
+    --tickness: 49px;
+    height: var(--length);
+    width: var(--half);
+    border: var(--tickness) solid var(--color);
+    border-left: none;
+    background-color: transparent;
+    border-radius: 0% 100% 100% 0% / 100% 50% 50% 0%;
     box-sizing: border-box;
-    /* top | left*/
     clip-path: polygon(
-      calc(100% - var(--length-percent)) 0,
-      100% 0,
-      100% calc(var(--length-percent)),
-      0% 100%
-      );
+      0 50%,
+    /* left center pivot*/ 100% calc(100% - var(--length-percent)),
+    /* right to bottom arc increase*/ 100% 100%,
+    /* right top corner*/ 100% 0,
+    /* right bottom corner*/ 100% var(--length-percent)
+    ); /* right to top ar decrease*/
   }
   .z-container>.ring-#{$i}>.arc:hover {
     border-top-color: coral;