From 370385e18843e6706dedd5aad8bf5203d3d17087 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 27 Aug 2018 12:45:06 -0400
Subject: [PATCH] Fixed alignment and coloring of form control clear button

---
 src/components/form/form_control_layout/_mixins.scss | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/form/form_control_layout/_mixins.scss b/src/components/form/form_control_layout/_mixins.scss
index 37380b8c548..19c03564c0e 100644
--- a/src/components/form/form_control_layout/_mixins.scss
+++ b/src/components/form/form_control_layout/_mixins.scss
@@ -17,9 +17,9 @@
   pointer-events: all;
 
   @include size($clearSize);
-  background-color: transparentize($euiColorMediumShade, .5);
+  background-color: lightOrDarkTheme($euiColorMediumShade, $euiColorDarkShade);
   border-radius: $clearSize;
-  line-height: $clearSize;
+  line-height: 0; // ensures the icon stays vertically centered
 
   &:focus {
     @include euiFocusRing;
@@ -30,8 +30,5 @@
     fill: $euiColorEmptyShade;
     stroke: $euiColorEmptyShade;
     stroke-width: 3px; // increase thickness of icon at such a small size
-    // better vertical position fix that works with IE
-    position: relative;
-    top: -2px;
   }
 }