From 643402ca5e379867edc05d830f5ae3f862d18024 Mon Sep 17 00:00:00 2001
From: Zoe Hayes <zoehayes286@gmail.com>
Date: Thu, 25 Apr 2024 14:29:55 -0400
Subject: [PATCH] fix: remove LESS syntax from query-item.css

---
 .../data-entry/QueryItem/query-item.css       | 116 ++++++++----------
 1 file changed, 52 insertions(+), 64 deletions(-)

diff --git a/src/components/data-entry/QueryItem/query-item.css b/src/components/data-entry/QueryItem/query-item.css
index 2f61d1b65..12969637b 100644
--- a/src/components/data-entry/QueryItem/query-item.css
+++ b/src/components/data-entry/QueryItem/query-item.css
@@ -16,72 +16,60 @@
   align-items: center;
   box-shadow: none;
   border-style: solid;
-
-  &:hover {
-    border-color: var(--mp-query-item-border-color-active) !important;
-    background-color: var(--mp-query-item-bg-color-hover) !important;
-  }
-
-  &:focus {
-    border-color: var(--mp-query-item-border-color-active) !important;
-    box-shadow: var(--mp-query-item-shadow-focus);
-    background-color: var(--mp-query-item-bg-color) !important;
-  }
-
-  &:active {
-    border-color: var(--mp-query-item-border-color-active) !important;
-    border-width: var(--mp-query-item-border-width-active) !important;
-    background-color: var(--mp-query-item-bg-color-active) !important;
-    box-shadow: var(--mp-query-item-shadow-active);
-  }
-
-  &[disabled] {
-    color: var(--mp-query-item-color-disabled) !important;
-    border-color: var(--mp-query-item-border-color-disabled) !important;
-  }
-
-  &.query-item--input-text {
-    color: var(--mp-query-item-value-selector-color);
-    font-weight: var(--mp-query-item-value-selector-font-weight);
-  }
-
-  &.query-item--action {
-    color: var(--mp-query-item-action-primary-color) !important;
-
-    gap: var(--mp-query-item-gap);
-  }
-  &.query-item--secondary {
-    color: var(--mp-query-item-action-secondary-color) !important;
-
-    &:hover {
-      background-color: var(--mp-query-item-bg-color-hover) !important;
-    }
-
-    &:active {
-      border-width: var(--mp-query-item-border-width-active);
-      background-color: var(--mp-query-item-bg-color-active) !important;
-    }
-  }
-
-  &.query-item--selected > input {
-    color: var(--mp-query-item-value-selector-color) !important;
-    font-weight: var(--mp-query-item-value-selector-font-weight) !important;
-  }
-  &.query-item--error {
-    border-color: var(--mp-query-item-border-color-error) !important;
-  }
-  &.query-item--open {
-    border-color: var(--mp-query-item-border-color-active) !important;
-    border-width: var(--mp-query-item-border-width-active) !important;
-    background-color: var(--mp-query-item-bg-color-active) !important;
-  }
-
-  /* Need to override the inner padding on Select... */
-  & .ant-select-selector {
-    padding: 0 !important;
-  }
 }
+.query-item:hover {
+  border-color: var(--mp-query-item-border-color-active) !important;
+  background-color: var(--mp-query-item-bg-color-hover) !important;
+}
+.query-item:focus {
+  border-color: var(--mp-query-item-border-color-active) !important;
+  box-shadow: var(--mp-query-item-shadow-focus);
+  background-color: var(--mp-query-item-bg-color) !important;
+}
+.query-item:active {
+  border-color: var(--mp-query-item-border-color-active) !important;
+  border-width: var(--mp-query-item-border-width-active) !important;
+  background-color: var(--mp-query-item-bg-color-active) !important;
+  box-shadow: var(--mp-query-item-shadow-active);
+}
+.query-item[disabled] {
+  color: var(--mp-query-item-color-disabled) !important;
+  border-color: var(--mp-query-item-border-color-disabled) !important;
+}
+.query-item.query-item--input-text {
+  color: var(--mp-query-item-value-selector-color);
+  font-weight: var(--mp-query-item-value-selector-font-weight);
+}
+.query-item.query-item--action {
+  color: var(--mp-query-item-action-primary-color) !important;
 
+  gap: var(--mp-query-item-gap);
+}
+.query-item.query-item--secondary {
+  color: var(--mp-query-item-action-secondary-color) !important;
+}
+.query-item.query-item--secondary:hover {
+  background-color: var(--mp-query-item-bg-color-hover) !important;
+}
+.query-item.query-item--secondary:active {
+  border-width: var(--mp-query-item-border-width-active);
+  background-color: var(--mp-query-item-bg-color-active) !important;
+}
+.query-item.query-item--selected > input {
+  color: var(--mp-query-item-value-selector-color) !important;
+  font-weight: var(--mp-query-item-value-selector-font-weight) !important;
+}
+.query-item.query-item--error {
+  border-color: var(--mp-query-item-border-color-error) !important;
+}
+.query-item.query-item--open {
+  border-color: var(--mp-query-item-border-color-active) !important;
+  border-width: var(--mp-query-item-border-width-active) !important;
+  background-color: var(--mp-query-item-bg-color-active) !important;
+}
+.query-item .ant-select-selector {
+  padding: 0 !important;
+}
 
 /* This is temporary until the new icon component is available where sizes can be controlled without CSS */
 .query-item__icon {