refactor: Логика координат точки на круге вынесена в отельную функцию, исправлены стили

src/widgets/TimeFrameSlider/ui/CircleTimeline/CircleTimeline.module.scss

@@ -1,6 +1,4 @@
 .circleContainer {
-    $border-color: var(--color-primary);
-
     position: absolute;
     top: 50%;
     left: 50%;
@@ -8,7 +6,7 @@
     width: calc(var(--circle-radius, 265px) * 2);
     height: calc(var(--circle-radius, 265px) * 2);
 
-    border: 1px solid rgb($border-color / 20%);
+    border: 1px solid rgba(#42567A, 0.2);
     border-radius: 50%;
 
     transform: translate(-50%, -50%);
@@ -17,46 +15,48 @@
 .point {
     position: absolute;
 
-    width: 6px;
-    height: 6px;
-    margin-top: -3px;
-    margin-left: -3px;
+    width: 56px;
+    height: 56px;
+    margin-top: -28px;
+    margin-left: -28px;
+
+    border: 25px solid transparent; 
+    
+    border-radius: 50%;
+
+    background: var(--color-text);
+    background-clip: content-box;
 
     cursor: pointer;
 
-    background: var(--color-text);
-    border-radius: 50%;
+    transform-origin: center;
 
     transition: all 0.3s ease;
-    transform-origin: center;
 
     &:hover,
     &.active {
         z-index: 10;
 
         display: flex;
-        align-items: center;
         justify-content: center;
+        align-items: center;
 
-        width: 56px;
-        height: 56px;
-        margin-top: -28px;
-        margin-left: -28px;
-
-        border: 1px solid rgb(48 62 88 / 50%);
+        border: 1px solid rgba(#303E58, 0.5);
 
         background: #F4F5F9;
-    }
 
-    .label {
-        display: none;
-
-        font-size: 20px;
-        color: var(--color-text);
+        background-clip: padding-box;
     }
 
     &:hover .label,
     &.active .label {
         display: block;
     }
+
+    .label {
+        display: none;
+
+        color: var(--color-text);
+        font-size: 20px;
+    }
 }