feat: use styled-components for panel resizer (#1131)

packages/web/src/stylesheets/_main.scss

@@ -4,7 +4,6 @@ $z-index-editor-title-bar: 100;
 $z-index-dropdown-menu: 1002;
 
 $z-index-resizer-overlay: 1000;
-$z-index-panel-resizer: 1001;
 
 $z-index-component-view: 1000;
 
@@ -19,6 +18,10 @@ $z-index-purchase-flow: 4000;
 $z-index-lock-screen: 10000;
 $z-index-modal: 10000;
 
+:root {
+  --z-index-panel-resizer: 1001;
+}
+
 html {
   font-size: 100%;
 }
@@ -126,64 +129,6 @@ $footer-height: 2rem;
   vertical-align: top;
   width: 100%;
 
-  panel-resizer,
-  .panel-resizer {
-    top: 0;
-    right: 0;
-    z-index: $z-index-panel-resizer;
-    width: 4px;
-    height: 100%;
-    position: absolute;
-    cursor: col-resize;
-    background-color: var(--panel-resizer-background-color);
-    opacity: 0;
-    border-top: none;
-    border-bottom: none;
-
-    @keyframes fade {
-      0% {
-        opacity: 0;
-      }
-
-      50% {
-        opacity: 1;
-      }
-
-      100% {
-        opacity: 0;
-      }
-    }
-
-    &.left {
-      left: 0;
-      right: none;
-    }
-
-    &.always-visible {
-      opacity: 1;
-    }
-
-    &.collapsed {
-      opacity: 1;
-    }
-
-    &.dragging {
-      opacity: 1;
-    }
-
-    &.animate-opacity {
-      animation-duration: 1.6s;
-      animation-name: fade;
-      animation-delay: 0.25s;
-    }
-
-    &.hoverable {
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-
   .section {
     padding-bottom: 0px;
     height: 100%;