make DotButton content overflow & add depart styling

src/components/globals/DotButton.vue

@@ -55,18 +55,44 @@ export default {
 
   &:not(.show),
   &.hide {
-    min-height: 1.1875rem;
-    min-width: 1.1875rem;
+    height: 1.1875rem;
+    width: 1.1875rem;
     padding: 0;
 
     &.dot-btn-depart {
-      min-height: 1.875rem;
-      min-width: 1.875rem;
+      height: 1.875rem;
+      width: 1.875rem;
     }
 
     span {
       display: none;
     }
   }
+
+  &.hide:hover {
+    span {
+      pointer-events: none;
+      position: absolute;
+      display: block;
+      transform: translate(calc(-100% + 1.1875rem), -50%);
+      border-radius: 50rem;
+      padding: 0 $input-btn-padding-x;
+      line-height: 1.5;
+    }
+
+    @each $color, $value in $theme-colors {
+      &.dot-btn-#{$color} {
+        span {
+          background-color: lighten($value, 15%);
+        }
+        &:active,
+        &.active {
+          span {
+            background-color: $value;
+          }
+        }
+      }
+    }
+  }
 }
 </style>