diff --git a/imports/plugins/core/checkout/client/components/cartItems.js b/imports/plugins/core/checkout/client/components/cartItems.js
index f64851f7e8e..087dcba1a3e 100644
--- a/imports/plugins/core/checkout/client/components/cartItems.js
+++ b/imports/plugins/core/checkout/client/components/cartItems.js
@@ -50,6 +50,7 @@ class CartItems extends Component {
{
"icon-only": true,
"status-badge": true
});
+ } else if (otherProps.kind === "removeItem") {
+ buttonClassName = classnames({
+ "icon-only": true,
+ "variant-edit": true,
+ "remove-item-aria-container": true
+ });
} else {
buttonClassName = classnames({
"icon-only": true,
diff --git a/imports/plugins/included/default-theme/client/styles/cart/cartItems.less b/imports/plugins/included/default-theme/client/styles/cart/cartItems.less
index 8f308d58517..83e695c59d8 100644
--- a/imports/plugins/included/default-theme/client/styles/cart/cartItems.less
+++ b/imports/plugins/included/default-theme/client/styles/cart/cartItems.less
@@ -28,13 +28,18 @@
white-space: pre-wrap;
}
+ .remove-item-aria-container {
+ position: absolute;
+ top: -8px;
+ .right(-8px);
+ }
+
.remove-cart-item {
position: absolute;
- top: 8px;
- .right(8px);
+ top: 0px;
+ .right(0px);
color: @gray;
- background-color: @alert-warning-bg;
- border: 2px solid @gray;
+ background-color: @black15;
padding: 5px;
border-radius: 50%;
z-index: 99;