[Feature] Website live chat (#187)

Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>
Co-authored-by: Sojan Jose <sojan@pepalo.com>

app/javascript/widget/assets/scss/_forms.scss

@@ -0,0 +1,71 @@
+// scss-lint:disable PropertySortOrder DeclarationOrder QualifyingElement
+$form-border-width: 1px;
+$input-height: $space-two * 2;
+
+.form-input {
+  @include placeholder {
+    color: $color-gray;
+  }
+
+  appearance: none;
+  background: $color-white;
+  border: $form-border-width solid $color-border;
+  border-radius: $border-radius;
+  box-sizing: border-box;
+  color: $color-body;
+  display: block;
+  font-size: $font-size-default;
+  height: $input-height;
+  line-height: 1.3;
+  max-width: 100%;
+  outline: none;
+  padding: $space-small $space-slab;
+  position: relative;
+  transition: background .2s, border .2s, box-shadow .2s, color .2s;
+  width: 100%;
+
+  &:focus {
+    border-color: $color-primary;
+  }
+
+  &::placeholder {
+    color: $color-gray;
+  }
+
+  // Input sizes
+  &.small {
+    font-size: $font-size-small;
+    height: $space-large;
+    padding: $space-small $space-slab;
+  }
+
+  &.large {
+    font-size: $font-size-medium;
+    height: $space-larger;
+    padding: $space-slab $space-two;
+  }
+
+  &.input-inline {
+    display: inline-block;
+    vertical-align: middle;
+    width: auto;
+  }
+
+  // Input types
+  &[type="file"] {
+    height: auto;
+  }
+}
+
+// Form element: Textarea
+textarea.form-input {
+  @include placeholder {
+    color: $color-light-gray;
+  }
+
+  &,
+  &.large,
+  &.small {
+    height: auto;
+  }
+}