From 1b18a0276d4b9cb348633e341030f5f3b2c1ff33 Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Wed, 4 Sep 2024 12:45:35 +0100
Subject: [PATCH] update separator color on resize

---
 .../src/components/containers/GridRootStyles.ts     | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
index 35d9e73c96624..0c574a7bf3c72 100644
--- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts
+++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -436,16 +436,17 @@ export const GridRootStyles = styled('div', {
     [`& .${c['columnSeparator--resizable']}`]: {
       cursor: 'col-resize',
       touchAction: 'none',
+      [`&.${c['columnSeparator--resizing']}`]: {
+        color: (t.vars || t).palette.primary.main,
+      },
       // Always appear as draggable on touch devices
       '@media (hover: none)': {
         [`& .${c.iconSeparator} rect`]: separatorIconDragStyles,
-        color: borderColor,
       },
-      [`&:hover, &.${c['columnSeparator--resizing']}`]: {
-        color: (t.vars || t).palette.primary.main,
-        [`& .${c.iconSeparator} rect`]: separatorIconDragStyles,
-        '@media (hover: none)': {
-          color: borderColor,
+      '@media (hover: hover)': {
+        '&:hover': {
+          color: (t.vars || t).palette.primary.main,
+          [`& .${c.iconSeparator} rect`]: separatorIconDragStyles,
         },
       },
       '& svg': {