diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss
index 6b634a2ab..1b1270e10 100644
--- a/packages/common/src/styles/_variables-theme-material.scss
+++ b/packages/common/src/styles/_variables-theme-material.scss
@@ -129,11 +129,8 @@ $slick-row-move-plugin-icon: url('data:image/svg+
$slick-editor-input-height: 100% !default;
$slick-editor-input-group-clear-btn-icon-color: $slick-icon-color !default;
$slick-editor-input-group-clear-btn-icon: url('data:image/svg+xml,') !default;
-$slick-editor-input-group-clear-btn-icon-margin-top: inherit !default;
$slick-editor-input-group-clear-btn-icon-padding: 1px 6px !default;
$slick-editor-input-group-clear-btn-icon-size: calc(#{$slick-icon-font-size} + 2px) !default;
-$slick-editor-input-group-clear-btn-icon-vertical-align: initial !default;
-$slick-editor-input-group-clear-btn-icon-height: 14px !default;
$slick-editor-input-group-clear-btn-icon-width: 14px !default;
$slick-row-mouse-hover-color: #ebfaef !default;
$slick-row-selected-color: #d4f6d7 !default;
diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss
index 4ad3dcfbf..e9d695779 100644
--- a/packages/common/src/styles/_variables-theme-salesforce.scss
+++ b/packages/common/src/styles/_variables-theme-salesforce.scss
@@ -157,11 +157,8 @@ $slick-row-move-plugin-icon: url('data:image/sv
$slick-editor-input-height: 100% !default;
$slick-editor-input-group-clear-btn-icon-color: $slick-icon-color !default;
$slick-editor-input-group-clear-btn-icon: url('data:image/svg+xml,') !default;
-$slick-editor-input-group-clear-btn-icon-margin-top: inherit !default;
$slick-editor-input-group-clear-btn-icon-padding: 1px 6px !default;
$slick-editor-input-group-clear-btn-icon-size: calc(#{$slick-icon-font-size} + 2px) !default;
-$slick-editor-input-group-clear-btn-icon-vertical-align: initial !default;
-$slick-editor-input-group-clear-btn-icon-height: 14px !default;
$slick-editor-input-group-clear-btn-icon-width: 14px !default;
$slick-editor-focus-box-shadow: 0 0 3px $slick-primary-color !default;
$slick-editor-modal-container-radius: var(--lwc-borderRadiusMedium, 0.25rem) !default;
diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
index c2a98ba7f..c7ec6134f 100644
--- a/packages/common/src/styles/_variables.scss
+++ b/packages/common/src/styles/_variables.scss
@@ -425,12 +425,10 @@ $slick-editor-input-height: 24px !default;
$slick-editor-focus-border-color: $slick-input-focus-border-color !default;
$slick-editor-focus-box-shadow: $slick-input-focus-box-shadow !default;
$slick-editor-input-group-clear-btn-icon: "\f00d" !default;
-$slick-editor-input-group-clear-btn-icon-margin-top: -14px !default;
$slick-editor-input-group-clear-btn-icon-padding: 6px !default;
$slick-editor-input-group-clear-btn-icon-size: inherit !default;
-$slick-editor-input-group-clear-btn-icon-height: initial !default;
+$slick-editor-input-group-clear-btn-icon-height: auto !default;
$slick-editor-input-group-clear-btn-icon-width: initial !default;
-$slick-editor-input-group-clear-btn-icon-vertical-align: middle !default;
$slick-date-editor-input-padding: 0 0 0 2px !default;
$slick-date-editor-focus-border-color: $slick-input-focus-border-color !default;
$slick-date-editor-focus-box-shadow: $slick-input-focus-box-shadow !default;
diff --git a/packages/common/src/styles/slick-editors.scss b/packages/common/src/styles/slick-editors.scss
index 6ffbbf20c..69a8062bd 100644
--- a/packages/common/src/styles/slick-editors.scss
+++ b/packages/common/src/styles/slick-editors.scss
@@ -83,15 +83,17 @@
border-bottom-right-radius: var(--slick-text-editor-border-radius, $slick-text-editor-border-radius);
cursor: pointer;
height: var(--slick-date-editor-height, $slick-date-editor-height);
+ &.icon-clear {
+ display: flex;
+ align-items: center;
+ }
&.icon-clear:before {
font-family: var(--slick-icon-font-family, $slick-icon-font-family);
font-size: var(--slick-editor-input-group-clear-btn-icon-size, $slick-editor-input-group-clear-btn-icon-size);
content: var(--slick-editor-input-group-clear-btn-icon, $slick-editor-input-group-clear-btn-icon);
- vertical-align: var(--slick-editor-input-group-clear-btn-icon-vertical-align, $slick-editor-input-group-clear-btn-icon-vertical-align);
display: inline-block;
height: var(--slick-editor-input-group-clear-btn-icon-height, $slick-editor-input-group-clear-btn-icon-height);
width: var(--slick-editor-input-group-clear-btn-icon-width, $slick-editor-input-group-clear-btn-icon-width);
- margin-top: var(--slick-editor-input-group-clear-btn-icon-margin-top, $slick-editor-input-group-clear-btn-icon-margin-top);
}
}
}