first commit

app/src/styles/components/tools.scss

@@ -0,0 +1,215 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.tools-container {
+  @include flex-center;
+  position: fixed;
+  bottom: 32px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  padding: 8px;
+  gap: 10px;
+  box-shadow: #{$box-shadow-medium};
+  border-radius: #{$border-radius-large};
+  width: fit-content;
+  background: var(--background-color);
+  backdrop-filter: blur(20px);
+  z-index: 2;
+  outline: 1px solid var(--border-color);
+  outline-offset: -1px;
+  transition: transform 0.4s ease-in-out 0.01s;
+
+  &.visible {
+    transform: translate(-50%, -310px);
+  }
+
+  .split {
+    height: 20px;
+    width: 2px;
+    border-radius: #{$border-radius-small};
+    background: var(--text-disabled);
+  }
+
+  .draw-tools,
+  .general-options,
+  .activeDropicon {
+    @include flex-center;
+    gap: 2px;
+    // stylelint-disable-next-line
+    interpolate-size: allow-keywords;
+    width: 0;
+    opacity: 0;
+    animation: expandWidth 0.2s ease-in-out forwards;
+    will-change: width;
+
+    .tool-button {
+      @include flex-center;
+      height: 28px;
+      width: 28px;
+      cursor: pointer;
+      border-radius: #{$border-radius-medium};
+      position: relative;
+
+      &:hover {
+        background: color-mix(
+          in srgb,
+          var(--highlight-accent-color) 60%,
+          transparent
+        );
+
+        .tooltip {
+          opacity: 1;
+          transform: translateY(-2px);
+        }
+      }
+    }
+
+    .active {
+      background: var(--background-color-accent);
+
+      &:hover {
+        background: var(--background-color-accent);
+      }
+    }
+  }
+
+  .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(
+          in srgb,
+          var(--highlight-accent-color) 60%,
+          transparent
+        );
+      }
+
+      .drop-down-container {
+        position: absolute;
+        bottom: 40px;
+        left: 0;
+        padding: 2px 4px;
+        border-radius: #{$border-radius-medium};
+        background: var(--background-color);
+        backdrop-filter: blur(8px);
+        contain: layout paint;
+        will-change: backdrop-filter;
+
+        .option-list {
+          display: flex;
+          align-items: center;
+          white-space: nowrap;
+          border-radius: #{$border-radius-medium};
+          gap: 6px;
+          padding: 2px;
+          padding-right: 12px;
+          margin: 2px 0;
+
+          &:hover {
+            background: 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;
+          }
+        }
+      }
+    }
+  }
+
+  .toggle-threed-button {
+    @include flex-center;
+    padding: 4px;
+    border-radius: #{$border-radius-medium};
+    background: var(--background-color);
+    outline: 1px solid var(--border-color);
+    outline-offset: -1px;
+    gap: 5px;
+    position: relative;
+
+    &:hover {
+      .tooltip {
+        opacity: 1;
+        transform: translateY(-4px);
+      }
+    }
+
+    .toggle-option {
+      font-size: var(--font-size-small);
+      padding: 2px;
+      z-index: 1;
+      transition: all 0.2s;
+      pointer-events: none;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      background: var(--background-color-accent);
+      left: 2px;
+      top: 2px;
+      height: 23px;
+      width: 23px;
+      border-radius: #{$border-radius-medium};
+      transition: all 0.2s;
+      pointer-events: none;
+    }
+
+    .active {
+      color: var(--text-button-color);
+    }
+  }
+
+  .toggled {
+    &::after {
+      left: 25px;
+    }
+  }
+}
+
+
+@keyframes pulse {
+  0% {
+    opacity: 0;
+    scale: 0.5;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    scale: 2;
+  }
+}
+
+@keyframes expandWidth {
+  from {
+    width: 0;
+    opacity: 0;
+  }
+
+  to {
+    width: fit-content;
+    opacity: 1;
+  }
+}