configurable size and position of chatbox

src/components/_chat.scss

@@ -26,14 +26,56 @@
   }
 }
 
+
+@keyframes slideInDown {
+  from {
+    transform: translate3d(0, -100%, 0);
+    display: inherit;
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideOutUp {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    display: none;
+    visibility: hidden;
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
 .docked-widget {
   position: fixed;
-  bottom: 10px;
-  right: 10px;
   z-index: 9999;
-  width: 400px;
   max-width: 100vw;
   font-size: $base-font-size;
+
+  &.size-large {
+    width: 400px;
+
+    .dock {
+      width: 400px;
+    }
+  }
+
+  &.size-small {
+    #open-chatbox-label {
+      display: flex;
+      align-items: center;
+
+      .icon {
+        margin-left: 0.5em;
+        font-size: 1.2em;
+      }
+    }
+  }
 }
 
 .dock {
@@ -41,7 +83,6 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 400px;
   max-width: calc(100vw - 10px);
   color: $white;
   font-family: $theme-font;
@@ -53,6 +94,7 @@
   background-color: transparent;
   padding: 5px;
 
+
   #open-chatbox-label {
     background: $theme-color;
     padding: 0.75em;
@@ -105,6 +147,10 @@
 
   &-entering {
     animation-name: slideInUp;
+
+    &.position-top {
+      animation-name: slideInDown;
+    }
   }
   &-entered {
     display: inherit;
@@ -112,6 +158,10 @@
   }
   &-exiting {
     animation-name: slideOutDown;
+
+    &.position-top {
+      animation-name: slideOutUp;
+    }
   }
   &-exited {
     display: none;