updated pannels

app/src/components/layout/sidebarLeft/visualization/widgets/Widgets.tsx

@@ -5,7 +5,7 @@ import Widgets3D from "./Widgets3D";
 import WidgetsFloating from "./WidgetsFloating";
 
 const Widgets = () => {
-  const [activeOption, setActiveOption] = useState("Floating");
+  const [activeOption, setActiveOption] = useState("2D");
 
   const handleToggleClick = (option: string) => {
     setActiveOption(option);

app/src/components/ui/Tools.tsx

@@ -57,78 +57,80 @@ const Tools: React.FC = () => {
 
   return (
     <div className="tools-container">
-      <div className="drop-down-icons">
+      {!isPlaying && (
-        <div className="activeDropicon">
+        <div className="drop-down-icons">
-          {activeSubTool == "cursor" && (
+          <div className="activeDropicon">
-            <div
+            {activeSubTool == "cursor" && (
-              className={`tool-button ${
+              <div
-                activeTool === "cursor" ? "active" : ""
+                className={`tool-button ${
-              }`}
+                  activeTool === "cursor" ? "active" : ""
-              onClick={() => {
+                }`}
-                setActiveTool("cursor");
+                onClick={() => {
-              }}
+                  setActiveTool("cursor");
-            >
+                }}
-              <CursorIcon isActive={activeTool === "cursor"} />
+              >
-            </div>
+                <CursorIcon isActive={activeTool === "cursor"} />
-          )}
+              </div>
-          {activeSubTool == "free-hand" && (
+            )}
-            <div
+            {activeSubTool == "free-hand" && (
-              className={`tool-button ${
+              <div
-                activeTool === "free-hand" ? "active" : ""
+                className={`tool-button ${
-              }`}
+                  activeTool === "free-hand" ? "active" : ""
-              onClick={() => {
+                }`}
-                setActiveTool("free-hand");
+                onClick={() => {
-              }}
+                  setActiveTool("free-hand");
-            >
+                }}
-              <FreeMoveIcon isActive={activeTool === "free-hand"} />
+              >
-            </div>
+                <FreeMoveIcon isActive={activeTool === "free-hand"} />
-          )}
+              </div>
-          {activeModule !== "visualization" && (
+            )}
-            <div
+            {activeModule !== "visualization" && (
-              className="drop-down-option-button"
+              <div
-              ref={dropdownRef}
+                className="drop-down-option-button"
-              onClick={() => {
+                ref={dropdownRef}
-                setOpenDrop(!openDrop);
+                onClick={() => {
-                console.log(openDrop);
+                  setOpenDrop(!openDrop);
-              }}
+                  console.log(openDrop);
-            >
+                }}
-              <ArrowIcon />
+              >
-              {openDrop && (
+                <ArrowIcon />
-                <div className="drop-down-container">
+                {openDrop && (
-                  <div
+                  <div className="drop-down-container">
-                    className="option-list"
+                    <div
-                    onClick={() => {
+                      className="option-list"
-                      setOpenDrop(false);
+                      onClick={() => {
-                      setActiveTool("cursor");
+                        setOpenDrop(false);
-                      setActiveSubTool("cursor");
+                        setActiveTool("cursor");
-                    }}
+                        setActiveSubTool("cursor");
-                  >
+                      }}
-                    <div className="active-option">
+                    >
-                      {activeSubTool === "cursor" && <TickIcon />}
+                      <div className="active-option">
+                        {activeSubTool === "cursor" && <TickIcon />}
+                      </div>
+                      <CursorIcon isActive={false} />
+                      <div className="option">Cursor</div>
                     </div>
-                    <CursorIcon isActive={false} />
+                    <div
-                    <div className="option">Cursor</div>
+                      className="option-list"
-                  </div>
+                      onClick={() => {
-                  <div
+                        setOpenDrop(false);
-                    className="option-list"
+                        setActiveTool("free-hand");
-                    onClick={() => {
+                        setActiveSubTool("free-hand");
-                      setOpenDrop(false);
+                      }}
-                      setActiveTool("free-hand");
+                    >
-                      setActiveSubTool("free-hand");
+                      <div className="active-option">
-                    }}
+                        {activeSubTool === "free-hand" && <TickIcon />}
-                  >
+                      </div>
-                    <div className="active-option">
+                      <FreeMoveIcon isActive={false} />
-                      {activeSubTool === "free-hand" && <TickIcon />}
+                      <div className="option">Free Hand</div>
                     </div>
-                    <FreeMoveIcon isActive={false} />
-                    <div className="option">Free Hand</div>
                   </div>
-                </div>
+                )}
-              )}
+              </div>
-            </div>
+            )}
-          )}
+          </div>
         </div>
-      </div>
+      )}
       {!toggleThreeD && activeModule === "builder" && (
         <>
           <div className="split"></div>
@@ -191,7 +193,7 @@ const Tools: React.FC = () => {
           </div>
         </>
       )}
-      {activeModule === "visualization" && (
+      {activeModule === "visualization" && !isPlaying && (
         <>
           <div className="split"></div>
           <div className="draw-tools">
@@ -210,40 +212,51 @@ const Tools: React.FC = () => {
           </div>
         </>
       )}
-      <div className="split"></div>
+      {!isPlaying && (
-      <div className="general-options">
+        <>
-        <div
+          <div className="split"></div>
-          className={`tool-button ${activeTool === "comment" ? "active" : ""}`}
+          <div className="general-options">
-          onClick={() => {
+            <div
-            setActiveTool("comment");
+              className={`tool-button ${
-          }}
+                activeTool === "comment" ? "active" : ""
-        >
+              }`}
-          <CommentIcon isActive={activeTool === "comment"} />
+              onClick={() => {
+                setActiveTool("comment");
+              }}
+            >
+              <CommentIcon isActive={activeTool === "comment"} />
+            </div>
+            <div
+              className={`tool-button ${activeTool === "play" ? "active" : ""}`}
+              onClick={() => {
+                setActiveTool("play");
+                setIsPlaying(!isPlaying);
+              }}
+            >
+              <PlayIcon isActive={activeTool === "play"} />
+            </div>
+          </div>
+          <div className="split"></div>
+          <div
+            className={`toggle-threed-button${toggleThreeD ? " toggled" : ""}`}
+            onClick={() => {
+              setToggleThreeD(!toggleThreeD);
+            }}
+          >
+            <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
+              2d
+            </div>
+            <div className={`toggle-option${toggleThreeD ? " active" : ""}`}>
+              3d
+            </div>
+          </div>
+        </>
+      )}
+      {isPlaying && (
+        <div className="exitPlay" onClick={() => setIsPlaying(false)}>
+          X
         </div>
-        <div
+      )}
-          className={`tool-button ${activeTool === "play" ? "active" : ""}`}
-          onClick={() => {
-            setActiveTool("play");
-            setIsPlaying(!isPlaying);
-          }}
-        >
-          <PlayIcon isActive={activeTool === "play"} />
-        </div>
-      </div>
-      <div className="split"></div>
-      <div
-        className={`toggle-threed-button${toggleThreeD ? " toggled" : ""}`}
-        onClick={() => {
-          setToggleThreeD(!toggleThreeD);
-        }}
-      >
-        <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
-          2d
-        </div>
-        <div className={`toggle-option${toggleThreeD ? " active" : ""}`}>
-          3d
-        </div>
-      </div>
     </div>
   );
 };

app/src/components/ui/componets/Panel.tsx

@@ -49,29 +49,30 @@ const Panel: React.FC<PanelProps> = ({ selectedZone, setSelectedZone }) => {
       const rightActive = previousPanels.includes("right");
       const topActive = previousPanels.includes("top");
       const bottomActive = previousPanels.includes("bottom");
+      const panelSize = isPlaying ? 355 : 305;
 
       switch (side) {
         case "top":
         case "bottom":
           return {
             width: `calc(100% - ${
-              (leftActive ? 204 : 0) + (rightActive ? 204 : 0)
+              (leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
             }px)`,
-            left: leftActive ? "204px" : "0",
+            height: `${panelSize - 5}px`,
-            right: rightActive ? "204px" : "0",
+            left: leftActive ? `${panelSize}px` : "0",
+            right: rightActive ? `${panelSize}px` : "0",
             [side]: "0",
-            height: "200px",
           };
         case "left":
         case "right":
           return {
+            width: `${panelSize - 5}px`,
             height: `calc(100% - ${
-              (topActive ? 204 : 0) + (bottomActive ? 204 : 0)
+              (topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
             }px)`,
-            top: topActive ? "204px" : "0",
+            top: topActive ? `${panelSize}px` : "0",
-            bottom: bottomActive ? "204px" : "0",
+            bottom: bottomActive ? `${panelSize}px` : "0",
             [side]: "0",
-            width: "200px",
           };
         default:
           return {};
@@ -83,53 +84,51 @@ const Panel: React.FC<PanelProps> = ({ selectedZone, setSelectedZone }) => {
   const handleDrop = (e: React.DragEvent, panel: Side) => {
     e.preventDefault();
     const { draggedAsset } = useWidgetStore.getState();
-    
     if (!draggedAsset) return;
     if (isPanelLocked(panel)) return;
-  
+
     const currentWidgetsCount = getCurrentWidgetCount(panel);
     const maxCapacity = calculatePanelCapacity(panel);
-  
+
     if (currentWidgetsCount >= maxCapacity) return;
-  
+
     addWidgetToPanel(draggedAsset, panel);
   };
-  
+
-  // Helper functions
+  const isPanelLocked = (panel: Side) =>
-  const isPanelLocked = (panel: Side) => 
     selectedZone.lockedPanels.includes(panel);
-  
+
-  const getCurrentWidgetCount = (panel: Side) => 
+  const getCurrentWidgetCount = (panel: Side) =>
-    selectedZone.widgets.filter(w => w.panel === panel).length;
+    selectedZone.widgets.filter((w) => w.panel === panel).length;
-  
+
   const calculatePanelCapacity = (panel: Side) => {
-    const CHART_WIDTH = 200;
+    const CHART_WIDTH = 250;
-    const CHART_HEIGHT = 200;
+    const CHART_HEIGHT = 250;
     const FALLBACK_HORIZONTAL_CAPACITY = 5;
     const FALLBACK_VERTICAL_CAPACITY = 3;
-  
+
     const dimensions = panelDimensions[panel];
     if (!dimensions) {
-      return panel === "top" || panel === "bottom" 
+      return panel === "top" || panel === "bottom"
         ? FALLBACK_HORIZONTAL_CAPACITY
         : FALLBACK_VERTICAL_CAPACITY;
     }
-  
+
     return panel === "top" || panel === "bottom"
       ? Math.floor(dimensions.width / CHART_WIDTH)
       : Math.floor(dimensions.height / CHART_HEIGHT);
   };
-  
+
   const addWidgetToPanel = (asset: any, panel: Side) => {
     const newWidget = {
       ...asset,
       id: generateUniqueId(),
       panel,
     };
-  
+
-    setSelectedZone(prev => ({
+    setSelectedZone((prev) => ({
       ...prev,
-      widgets: [...prev.widgets, newWidget]
+      widgets: [...prev.widgets, newWidget],
     }));
   };
 
@@ -187,7 +186,6 @@ const Panel: React.FC<PanelProps> = ({ selectedZone, setSelectedZone }) => {
               opacity: selectedZone.lockedPanels.includes(side) ? "0.8" : "1",
             }}
           >
-            <>{}</>
             {selectedZone.widgets
               .filter((w) => w.panel === side)
               .map((widget) => (
@@ -200,4 +198,4 @@ const Panel: React.FC<PanelProps> = ({ selectedZone, setSelectedZone }) => {
   );
 };
 
-export default Panel;
+export default Panel;

app/src/components/ui/componets/RealTimeVisulization.tsx

@@ -72,7 +72,7 @@ const RealTimeVisulization: React.FC = () => {
     <div
       ref={containerRef}
       id="real-time-vis-canvas"
-      className="realTime-viz canvas"
+      className={`realTime-viz canvas ${!isPlaying ? "playActiveFalse" : ""}`}
       style={{
         height: isPlaying ? "100vh" : "",
         width: isPlaying ? "100%" : "",

app/src/store/useModuleStore.ts

@@ -7,7 +7,7 @@ interface ModuleStore {
 }
 
 const useModuleStore = create<ModuleStore>((set) => ({
-  activeModule: "builder", // Initial state
+  activeModule: "visualization", // Initial state
   setActiveModule: (module) => set({ activeModule: module }), // Update state
 }));
 

app/src/styles/components/tools.scss

@@ -4,7 +4,7 @@
 .tools-container {
   @include flex-center;
   position: fixed;
-  bottom: 32px;
+  bottom: 50px;
   left: 50%;
   transform: translate(-50%, 0);
   padding: 8px;
@@ -14,12 +14,14 @@
   width: fit-content;
   transition: width 0.2s;
   background-color: var(--background-color);
+
   .split {
     height: 20px;
     width: 2px;
     border-radius: 2px;
     background: var(--highlight-accent-color);
   }
+
   .draw-tools,
   .general-options,
   .activeDropicon {
@@ -29,42 +31,46 @@
     width: 0;
     opacity: 0;
     animation: expandWidth 0.2s ease-in-out forwards;
+
     .tool-button {
       @include flex-center;
       height: 28px;
       width: 28px;
       cursor: pointer;
       border-radius: #{$border-radius-small};
+
       &:hover {
-        background: color-mix(
+        background: color-mix(in srgb,
-          in srgb,
+            var(--highlight-accent-color) 60%,
-          var(--highlight-accent-color) 60%,
+            transparent);
-          transparent
-        );
       }
     }
+
     .active {
       background-color: var(--accent-color);
+
       &:hover {
         background-color: var(--accent-color);
       }
     }
   }
+
   .activeDropicon {
     gap: 2px;
+
     .drop-down-option-button {
       @include flex-center;
       height: 28px;
       cursor: pointer;
       border-radius: #{$border-radius-small};
       position: relative;
+
       &:hover {
-        background: color-mix(
+        background: color-mix(in srgb,
-          in srgb,
+            var(--highlight-accent-color) 60%,
-          var(--highlight-accent-color) 60%,
+            transparent);
-          transparent
-        );
       }
+
       .drop-down-container {
         position: absolute;
         bottom: 40px;
@@ -72,6 +78,7 @@
         box-shadow: #{$box-shadow-medium};
         padding: 8px;
         border-radius: #{$border-radius-large};
+
         .option-list {
           margin: 4px 0;
           display: flex;
@@ -80,18 +87,22 @@
           border-radius: #{$border-radius-medium};
           gap: 6px;
           padding: 4px;
+
           &:hover {
             background-color: var(--highlight-accent-color);
             color: var(--accent-color);
+
             path {
               stroke: var(--accent-color);
             }
           }
+
           .active-option {
             height: 12px;
             width: 12px;
             @include flex-center;
           }
+
           .option {
             color: inherit;
           }
@@ -99,6 +110,7 @@
       }
     }
   }
+
   .toggle-threed-button {
     @include flex-center;
     padding: 3px;
@@ -106,12 +118,14 @@
     background-color: var(--highlight-accent-color);
     gap: 2px;
     position: relative;
+
     .toggle-option {
       font-size: var(--font-size-small);
       padding: 2px;
       z-index: 1;
       transition: all 0.2s;
     }
+
     &::after {
       content: "";
       position: absolute;
@@ -123,15 +137,38 @@
       border-radius: #{$border-radius-small};
       transition: all 0.2s;
     }
+
     .active {
       color: var(--highlight-accent-color);
     }
   }
+
   .toggled {
     &::after {
       left: 24px;
     }
   }
+
+  .exitPlay {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: var(--accent-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+    transition: background-color 0.3s, transform 0.3s;
+    color: var(--background-color);
+  }
+
+
+  .exitPlay:hover {
+    background-color: var(--accent-color);
+    transform: scale(1.1);
+  }
+
 }
 
 @keyframes expandWidth {
@@ -139,8 +176,9 @@
     width: 0;
     opacity: 0;
   }
+
   to {
     width: fit-content;
     opacity: 1;
   }
-}
+}

app/src/styles/pages/realTimeViz.scss

@@ -1,148 +1,26 @@
 @use "../abstracts/variables.scss" as *;
+@use "../abstracts/mixins.scss" as *;
 
 // Main Container
 .realTime-viz {
   background-color: var(--background-color);
   border-radius: 20px;
   box-shadow: $box-shadow-medium;
-  width: calc(100% - (320px + 270px + 90px));
+  width: 100%;
-  height: calc(100% - (200px + 80px));
+  height: 100%;
   position: absolute;
-  top: 50%;
+  top: 0;
-  left: calc(270px + 45px);
+  left: 0;
-  transform: translate(0, -50%);
+  transform: scale(1);
-
-  .icon {
-    display: flex;
-    align-items: center;
-    position: relative;
-  }
-
-  .icons-container {
-    .icon {
-      &:first-child {
-        &::after {
-          display: none;
-        }
-      }
-    }
-  }
-
-  .zoon-wrapper {
-    display: flex;
-    background-color: var(--background-color);
-    position: absolute;
-    bottom: 10px;
-    left: 50%;
-    transform: translate(-50%, 0);
-    gap: 6px;
-    padding: 4px;
-    border-radius: 8px;
-    max-width: 80%;
-    overflow: auto;
-    max-width: calc(100% - 450px);
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    .zone {
-      width: auto;
-      background-color: var(--background-color);
-      border-radius: 6px;
-      padding: 4px 8px;
-      white-space: nowrap;
-      font-size: $small;
-    }
-
-    .active {
-      background-color: var(--accent-color);
-      color: var(--background-color);
-      // color: #FCFDFD !important;
-    }
-  }
-
-  .zoon-wrapper.bottom {
-    bottom: 210px;
-  }
-
-  @media (max-width: 1024px) {
-    width: 80%; // Increase width to take more space on smaller screens
-    height: 500px; // Reduce height to fit smaller screens
-    left: 50%; // Center horizontally
-
-    .main-container {
-      margin: 0 15px; // Reduce margin for better spacing
-    }
-
-    .zoon-wrapper {
-      bottom: 5px; // Adjust position for smaller screens
-
-      &.bottom {
-        bottom: 150px; // Adjust for bottom placement
-      }
-    }
-  }
-
-  .content-container {
-    display: flex;
-    height: 100vh;
-    transition: all 0.3s ease;
-  }
-
-  .main-container {
-    position: relative;
-    flex: 1;
-    height: 600px;
-    background-color: rgb(235, 235, 235);
-    margin: 0 30px;
-    transition: height 0.3s ease, margin 0.3s ease;
-
-    .zoon-wrapper {
-      display: flex;
-      background-color: rgba(224, 223, 255, 0.5);
-      position: absolute;
-      bottom: 10px;
-      left: 50%;
-      transform: translate(-50%, 0);
-      gap: 6px;
-      padding: 4px;
-      border-radius: 8px;
-      max-width: 80%;
-      overflow: auto;
-      transition: transform 0.3s ease;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
-      .zone {
-        width: auto;
-        background-color: $background-color;
-        border-radius: 6px;
-        padding: 4px 8px;
-        white-space: nowrap;
-        cursor: pointer;
-        transition: background-color 0.3s ease;
-
-        &.active {
-          background-color: var(--primary-color);
-          color: var(--accent-color);
-        }
-      }
-
-      &.bottom {
-        bottom: 210px;
-      }
-    }
-  }
 
+  // Panels
   .panel {
     position: absolute;
     background: white;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
     border-radius: 6px;
-    overflow: visible !important;
+    overflow: hidden;
 
     .panel-content {
       position: relative;
@@ -159,7 +37,7 @@
       }
 
       .chart-container {
-        width: 100%;
+        width: 229px;
         height: 200px;
         max-height: 100%;
         border: 1px dotted #a9a9a9;
@@ -179,53 +57,89 @@
         color: var(--primary-color);
       }
     }
+  }
 
+  // Panels for each side
+  .left-panel,
+  .right-panel {
+    .chart-container {
+      padding: 10px;
+      width: 100% !important;
+      height: 250px !important;
 
-    &.top-panel,
-    &.bottom-panel {
-      left: 0;
-      right: 0;
-
-      .fullScreen {
-        background-color: red;
-      }
-
-      .panel-content {
-        display: flex;
-        flex-direction: row;
-
-        .chart-container {
-          height: 100%;
-          width: 200px;
-        }
-      }
-    }
-
-    &.top-panel {
-      top: 0;
-    }
-
-    &.bottom-panel {
-      bottom: 0;
-    }
-
-    &.left-panel {
-      left: 0;
-      top: 0;
-      bottom: 0;
-
-      .chart-container {
-        width: 100%;
-        height: 180px;
-      }
-    }
-
-    &.right-panel {
-      right: 0;
-      top: 0;
-      bottom: 0;
     }
   }
+
+  .top-panel,
+  .bottom-panel {
+    .chart-container {
+      padding: 10px;
+      width: 300px !important;
+      height: 100% !important;
+    }
+  }
+
+  // Zone Wrapper
+  .zoon-wrapper {
+    display: flex;
+    background-color: var(--background-color);
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    gap: 6px;
+    padding: 4px;
+    border-radius: 8px;
+    max-width: 80%;
+    overflow: auto;
+    max-width: calc(100% - 450px);
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .zone {
+      width: auto;
+      background-color: var(--background-color);
+      border-radius: 6px;
+      padding: 4px 8px;
+      white-space: nowrap;
+      font-size: $small;
+    }
+
+    .active {
+      background-color: var(--accent-color);
+      color: var(--background-color);
+    }
+  }
+
+  .zoon-wrapper.bottom {
+    bottom: 210px;
+  }
+
+  .content-container {
+    display: flex;
+    height: 100vh;
+    transition: all 0.3s ease;
+  }
+
+  .main-container {
+    position: relative;
+    flex: 1;
+    height: 600px;
+    background-color: rgb(235, 235, 235);
+    margin: 0 30px;
+    transition: height 0.3s ease, margin 0.3s ease;
+  }
+}
+
+.playActiveFalse {
+  position: absolute;
+  top: 50%;
+  left: calc(270px + 45px);
+  transform: translate(0, -50%) scaleX(0.6) scaleY(0.65);
+  transform-origin: left;
+  width: 100%;
 }
 
 // Side Buttons
@@ -267,7 +181,6 @@
     height: 18px;
     display: flex;
     justify-content: center;
-    // align-items: center;
     background-color: var(--accent-color);
     border: none;
     color: var(--background-color);
@@ -307,84 +220,18 @@
   }
 }
 
-.right.side-button-container {
+.right.side-button-container,
-  .extra-Bs {
-    flex-direction: column;
-  }
-}
-
 .left.side-button-container {
   .extra-Bs {
     flex-direction: column;
   }
 }
 
-// Theme Container
+.top-panel,
-.theme-container {
+.bottom-panel {
-  width: 250px;
+  .panel-content {
-  padding: 12px;
-  box-shadow: 1px -3px 4px 0px rgba(0, 0, 0, 0.11);
-  border-radius: 8px;
-  background-color: white;
-  position: absolute;
-  top: 20px;
-  right: -100%;
-  transform: translate(-0%, 0);
 
-  h2 {
-    font-size: 12px;
-    margin-bottom: 8px;
-    color: #2b3344;
-  }
-
-  .theme-preset-wrapper {
     display: flex;
-    gap: 5px;
+    flex-direction: row !important;
-    flex-wrap: wrap;
-
-    .theme-preset {
-      display: flex;
-      gap: 2px;
-      margin-bottom: 10px;
-      border: 1px solid $border-color;
-      padding: 5px 10px;
-      border-radius: 4px;
-      transition: border 0.3s ease;
-
-      &.active {
-        border: 1px solid var(--primary-color);
-
-        &::after {
-          content: "";
-          position: absolute;
-          top: 1px;
-          left: 1px;
-          width: 10px;
-          height: 10px;
-          background-color: var(--primary-color);
-          border-radius: 50%;
-        }
-      }
-    }
-  }
-
-  .custom-color {
-    display: flex;
-    justify-content: space-between;
-
-    .color-displayer {
-      display: flex;
-      gap: 5px;
-      align-items: center;
-      border: 1px solid var(--accent-color);
-      border-radius: 4px;
-      padding: 0 5px;
-
-      input {
-        border: none;
-        outline: none;
-        border-radius: 50%;
-      }
-    }
   }
 }