From cfcd1ac76e5758409664c5a393514930f1ad0ba1 Mon Sep 17 00:00:00 2001
From: Markus Winter <m.winter@sap.com>
Date: Mon, 6 Jan 2025 11:25:28 +0000
Subject: [PATCH] Fix background of Spacing select when using dark theme (#384)

Co-authored-by: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
---
 src/main/resources/scss/pages/_spacing.scss | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/main/resources/scss/pages/_spacing.scss b/src/main/resources/scss/pages/_spacing.scss
index 1c88d40f..e963f6d0 100644
--- a/src/main/resources/scss/pages/_spacing.scss
+++ b/src/main/resources/scss/pages/_spacing.scss
@@ -16,10 +16,6 @@
   div {
     position: relative;
     display: flex;
-    background: color-mix(in srgb, var(--text-color-secondary) 2.5%, transparent);
-    border: var(--jdl-border-translucent);
-    border-radius: 4px;
-    transition: background var(--standard-transition);
 
     &::after {
       content: "";
@@ -43,8 +39,8 @@
 
     select {
       appearance: none;
-      background: none;
-      border: none;
+      border: var(--jdl-border-translucent);
+      border-radius: 4px;
       outline: none;
       width: 100%;
       font-size: var(--font-size-sm);
@@ -53,21 +49,24 @@
       padding: 0 20px 0 0;
       height: 2rem;
       font-family: var(--font-family-mono);
+      transition: var(--standard-transition);
+
+      &:hover {
+        border-color: var(--input-border-hover);
+      }
     }
 
-    &:first-of-type {
+    &:first-of-type select {
       border-top-left-radius: 18px;
       border-bottom-left-radius: 18px;
     }
 
-    &:last-of-type {
+    &:last-of-type select {
       border-top-right-radius: 18px;
       border-bottom-right-radius: 18px;
     }
 
     &:hover {
-      background: color-mix(in srgb, var(--text-color-secondary) 10%, transparent);
-
       &::after {
         translate: 0 1px;
       }