From f211f9d68aed3e5538c4896d6f39afb227799e27 Mon Sep 17 00:00:00 2001
From: Lisa Meyer <84317589+Lisa18289@users.noreply.github.com>
Date: Fri, 18 Oct 2024 11:23:29 +0200
Subject: [PATCH] fix(NumberField): fix mobile styles (#858)

---
 .../NumberField/NumberField.module.scss       | 47 +++++++++++--------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/packages/components/src/components/NumberField/NumberField.module.scss b/packages/components/src/components/NumberField/NumberField.module.scss
index 82d9e3834..1a263d4ba 100644
--- a/packages/components/src/components/NumberField/NumberField.module.scss
+++ b/packages/components/src/components/NumberField/NumberField.module.scss
@@ -10,7 +10,7 @@
 
   .input {
     grid-area: input;
-    
+
     @include formControl.formControl();
   }
 
@@ -85,30 +85,37 @@
   .group {
     grid-template-columns: auto 1fr auto;
     grid-template-areas: "decrement input increment";
-  }
 
-  .input {
-    border-radius: 0;
-  }
+    .input {
+      border-radius: 0;
+    }
 
-  .decrementButton,
-  .incrementButton {
-    padding-inline: var(--form-control--padding-x);
+    .decrementButton,
+    .incrementButton {
+      padding-inline: var(--button--padding);
+
+      .coarsePointerIcon {
+        width: var(--icon--size--m);
+        height: var(--icon--size--m);
+      }
+
+      svg:not(.coarsePointerIcon) {
+        display: none;
+      }
+    }
 
-    :not(.touchIcon) {
-      display: none;
+    .decrementButton {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+      border-inline-end: none;
     }
-  }
 
-  .decrementButton {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-    border-inline-end: none;
+    .incrementButton {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      border-inline-start: none;
+    }
   }
 
-  .incrementButton {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-    border-inline-start: none;
-  }
+
 }