Animated input placeholder

src/scss/style.scss

@@ -8,6 +8,7 @@ $placeholder-color: #9e9e9e;
 $border-radius: 8px;
 $border-radius-medium: 10px;
 $border-radius-big: 12px;
+$border-radius-huge: 16px;
 
 $hover-alpha: .08;
 
@@ -65,6 +66,7 @@ $chat-input-inner-padding-handhelds: .25rem;
   --tabs-transition: .25s ease-in-out;
   --btn-menu-transition: .2s cubic-bezier(.4, 0, .2, 1);
   --esg-transition: var(--btn-menu-transition);
+  --input-transition: .2s ease-out;
   --popup-transition-function: cubic-bezier(.4, 0, .2, 1);
   --popup-transition-time: .15s;
   //--layer-transition: .3s cubic-bezier(.33, 1, .68, 1);
@@ -919,11 +921,26 @@ img.emoji {
 }
 
 [contenteditable][data-placeholder] {
-  &:empty:before {
+  &:before {
     content: attr(data-placeholder);
     color: #a2acb4;
     display: block; /* For Firefox By Ariel Flesler */
     pointer-events: none;
+    position: absolute;
+    opacity: 0;
+    
+    @include animation-level(2) {
+      transform: translateX(1.75rem);
+      transition: opacity var(--input-transition) .01s, transform var(--input-transition) .01s;
+    }
+  }
+  
+  &:empty:before {
+    opacity: 1;
+    
+    @include animation-level(2) {
+      transform: translateX(0);
+    }
   }
 }