From cae68949b94f5bf177ab2bce37c50214d8b7bde4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96m=C3=BCr=20Yan=C4=B1ko=C4=9Flu?=
 <hayatbiralem@gmail.com>
Date: Wed, 9 Mar 2022 04:40:51 +0300
Subject: [PATCH] add state support to search input

---
 scss/content/_form-alt-input-types.scss | 39 +++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/scss/content/_form-alt-input-types.scss b/scss/content/_form-alt-input-types.scss
index 56ea55d8..6024221e 100644
--- a/scss/content/_form-alt-input-types.scss
+++ b/scss/content/_form-alt-input-types.scss
@@ -232,6 +232,24 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="
     background-position: center left 1.125rem;
     background-size: 1rem auto;
     background-repeat: no-repeat;
+    
+    &[aria-invalid] {
+      @if $enable-important {
+        padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
+      } 
+      @else {
+        padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+      }
+      background-position: center left 1.125rem, center right 0.75rem;
+    }
+
+    &[aria-invalid="false"] {
+      background-image: var(--icon-search), var(--icon-valid);
+    }
+
+    &[aria-invalid="true"] {
+      background-image: var(--icon-search), var(--icon-invalid);
+    }
   }
 }
 
@@ -242,3 +260,24 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="
     display: none;
   }
 }
+
+[dir="rtl"] {
+  :where(input) {
+    &:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
+      &[type="search"] {
+        padding-right: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+        background-position: center right 1.125rem;
+        
+        &[aria-invalid] {
+          @if $enable-important {
+            padding-right: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
+          } 
+          @else {
+            padding-right: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+          }
+          background-position: center right 1.125rem, center left 0.75rem;
+        }
+      }
+    }
+  }
+}