diff --git a/style.css b/style.css
index 106809868..2f19bafae 100644
--- a/style.css
+++ b/style.css
@@ -250,7 +250,7 @@ textarea {
 input {
   max-width: 100%;
   box-sizing: border-box;
-  transition: border .12s ease-in-out;
+  transition: border 0.12s ease-in-out;
 }
 
 input:not([type="checkbox"]) {
@@ -1073,11 +1073,34 @@ ul {
 }
 
 /***** Search field *****/
+.search-container {
+  position: relative;
+}
+
 .search {
   display: flex;
   position: relative;
 }
 
+.search input[type="search"],
+.search .clear-button {
+  background-color: #fff;
+  border-color: #ddd;
+  border-radius: 30px;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.search input[type="search"]:focus,
+.search .clear-button:focus {
+  border-color: $brand_color;
+}
+
+.search-full input[type="search"],
+.search-full .clear-button {
+  border-color: #fff;
+}
+
 .search input[type="search"] {
   appearance: none;
   -webkit-appearance: none;
@@ -1085,18 +1108,10 @@ ul {
   color: #666;
   flex: 1 1 auto;
   height: 40px;
-  padding-left: 40px;
-  padding-right: 20px;
   width: 100%;
 }
 
-[dir="rtl"] .search input[type="search"] {
-  padding-right: 40px;
-  padding-left: 20px;
-}
-
 .search input[type="search"]:focus {
-  border: 1px solid $brand_color;
   color: #555;
 }
 
@@ -1104,41 +1119,64 @@ ul {
   -webkit-appearance: none;
 }
 
-.search input[type="search"],
 .search .clear-button {
-  background-color: #fff;
-  border: 1px solid #ddd;
-  border-radius: 30px;
+  align-items: center;
+  box-sizing: border-box;
+  color: #777;
+  display: none;
+  flex: none;
+  justify-content: center;
+  padding: 0 15px;
+  transition: border 0.12s ease-in-out, color 0.12s ease-in-out;
 }
 
-.search-full input[type="search"],
-.search-full .clear-button {
-  border: 1px solid #fff;
+.search .clear-button:focus {
+  border: 1px solid $brand_color;
+  outline: none;
 }
 
-.search-has-value input[type="search"] {
+.search-has-value .clear-button {
+  display: flex;
+}
+
+[dir="ltr"] .search input[type="search"] {
+  padding-left: 40px;
+  padding-right: 20px;
+}
+
+[dir="ltr"] .search-has-value input[type="search"] {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
   border-right-color: transparent;
 }
 
-[dir="rtl"] .search-has-value input[type="search"] {
+[dir="ltr"] .search-has-value input[type="search"]:focus {
+  border-right-color: $brand_color;
+}
+
+[dir="ltr"] .search .clear-button {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
   border-left-color: transparent;
 }
 
-.search .clear-button {
-  align-items: center;
+[dir="ltr"] .search .clear-button:focus {
+  border-left-color: $brand_color;
+}
+
+[dir="rtl"] .search input[type="search"] {
+  padding-left: 20px;
+  padding-right: 40px;
+}
+
+[dir="rtl"] .search-has-value input[type="search"] {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
   border-left-color: transparent;
-  color: #777;
-  display: none;
-  flex: none;
-  justify-content: center;
-  padding: 0 15px;
-  transition: border .12s ease-in-out, color .12s ease-in-out;
+}
+
+[dir="rtl"] .search-has-value input[type="search"]:focus {
+  border-left-color: $brand_color;
 }
 
 [dir="rtl"] .search .clear-button {
@@ -1147,13 +1185,8 @@ ul {
   border-right-color: transparent;
 }
 
-.search .clear-button:focus {
-  border: 1px solid $brand_color;
-  outline: none;
-}
-
-.search-has-value .clear-button {
-  display: flex;
+[dir="rtl"] .search .clear-button:focus {
+  border-right-color: $brand_color;
 }
 
 .search-icon {
@@ -1170,12 +1203,8 @@ ul {
 }
 
 [dir="rtl"] .search-icon {
-  right: 15px;
   left: auto;
-}
-
-.search-container {
-  position: relative;
+  right: 15px;
 }
 
 /***** Hero component *****/
diff --git a/styles/_base.scss b/styles/_base.scss
index df691ce6f..972367acc 100644
--- a/styles/_base.scss
+++ b/styles/_base.scss
@@ -69,7 +69,7 @@ textarea {
 input {
   max-width: 100%;
   box-sizing: border-box;
-  transition: border .12s ease-in-out;
+  transition: border $input-transition;
 
   &:not([type="checkbox"]) {
     outline: none;
diff --git a/styles/_search.scss b/styles/_search.scss
index 69773eeee..3c65ff06b 100644
--- a/styles/_search.scss
+++ b/styles/_search.scss
@@ -1,13 +1,35 @@
 /***** Search field *****/
 
+$icon-color: #777;
 $padding-left: 40px;
 $padding-right: 20px;
-$icon-color: #777;
+
+.search-container {
+  position: relative;
+}
 
 .search {
   display: flex;
   position: relative;
 
+  input[type="search"], 
+  .clear-button {
+    background-color: #fff;
+    border-color: $border-color;
+    border-radius: 30px;
+    border-style: solid;
+    border-width: 1px;
+
+    &:focus {
+      border-color: $brand_color;
+    }
+  }
+
+  &-full input[type="search"], 
+  &-full .clear-button {
+    border-color: #fff;
+  }
+
   input[type="search"] {
     appearance: none;
     -webkit-appearance: none;
@@ -15,17 +37,9 @@ $icon-color: #777;
     color: $field-text-color;
     flex: 1 1 auto;
     height: 40px;
-    padding-left: $padding-left;
-    padding-right: $padding-right;
     width: 100%;
 
-    [dir="rtl"] & {
-      padding-right: $padding-left;
-      padding-left: $padding-right;
-    }
-
     &:focus {
-      border: 1px solid $brand_color;
       color: $field-text-focus-color;
     }
 
@@ -48,60 +62,85 @@ $icon-color: #777;
 
   }
 
-  input[type="search"], 
   .clear-button {
-    background-color: #fff;
-    border: 1px solid $border-color;
-    border-radius: 30px;
+    align-items: center;
+    box-sizing: border-box;
+    color: $icon-color;
+    display: none;
+    flex: none;
+    justify-content: center;
+    padding: 0 15px;
+    transition: border $input-transition, color $input-transition;
+
+    &:focus {
+      border: 1px solid $brand_color;
+      outline: none;
+    }
+
   }
 
-  &-full input[type="search"], 
-  &-full .clear-button {
-    border: 1px solid #fff;
+  &-has-value .clear-button {
+    display: flex;
   }
-  
+
+}
+
+[dir="ltr"] .search {
+  input[type="search"] {
+    padding-left: $padding-left;
+    padding-right: $padding-right;
+  }
+
   &-has-value input[type="search"] {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
     border-right-color: transparent;
 
-    [dir="rtl"] & {
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
-      border-left-color: transparent;
+    &:focus {
+      border-right-color: $brand_color;
     }
 
   }
 
   .clear-button {
-    align-items: center;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
     border-left-color: transparent;
-    color: $icon-color;
-    display: none;
-    flex: none;
-    justify-content: center;
-    padding: 0 15px;
-    transition: border .12s ease-in-out, color .12s ease-in-out;
 
-    [dir="rtl"] & {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
-      border-right-color: transparent;
+    &:focus {
+      border-left-color: $brand_color;
     }
+    
+  }
+}
+
+[dir="rtl"] .search {
+  input[type="search"] {
+    padding-left: $padding-right;
+    padding-right: $padding-left;
+  }
+
+  &-has-value input[type="search"] {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    border-left-color: transparent;
 
     &:focus {
-      border: 1px solid $brand_color;
-      outline: none;
+      border-left-color: $brand_color;
     }
 
   }
 
-  &-has-value .clear-button {
-    display: flex;
-  }
+  .clear-button {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    border-right-color: transparent;
+
+    &:focus {
+      border-right-color: $brand_color;
+    }
 
+  }
 }
 
 .search-icon {
@@ -115,11 +154,7 @@ $icon-color: #777;
   pointer-events: none;
 
   [dir="rtl"] & {
-    right: 15px;
     left: auto;
+    right: 15px;
   }
 }
-
-.search-container {
-  position: relative;
-}
diff --git a/styles/_variables.scss b/styles/_variables.scss
index 1b140d51f..ba809ef8f 100644
--- a/styles/_variables.scss
+++ b/styles/_variables.scss
@@ -27,3 +27,6 @@ $desktop-width: 1024px;
 $max-width-container: 1160px;
 
 $font-weight-semibold: 600;
+
+// Transitions
+$input-transition: .12s ease-in-out;
\ No newline at end of file