refactor: tighten up css

created a bunch of utility classes and use those instead

src/lib/Input.svelte

@@ -13,19 +13,15 @@
  }
 </script>
 
-<div class="container">
-    <textarea bind:value="{input}" on:keydown={keydown} class="input" />
+<div class="container p-relative d-flex pa-16 pt-0">
+    <textarea bind:value="{input}" on:keydown={keydown} class="input grow-1 radius-16 border-0 pa-8 bg-700 color-300" />
 </div>
 
 <style>
  .container {
      height: calc(2 * var(--message-line-height));
-     display: flex;
-     padding: 16px;
-     padding-top: 0;
      margin-top: -12px;
      z-index: 100;
-     position: relative
  }
 
  .container::before, .container::after {
@@ -41,14 +37,8 @@
  .container::after  { right: 0; }
 
  .input {
-     flex-grow: 1;
      resize: none;
-     border-radius: 16px;
-     border: none;
      z-index: 100;
-     padding: 8px;
-     background: var(--base-700);
-     color: var(--base-300);
  }
 
  .input:focus {