Semi working conditions for the new ui

public/css/searchbox.css

@@ -6,13 +6,13 @@
   --panel: #ffffff;
   --panel2: #f2f4fb;
 
-  --stroke: rgba(16, 24, 40, .10);
-  --stroke2: rgba(16, 24, 40, .14);
+  --stroke: #1018281a;
+  --stroke2: #10182824;
 
-  --text: rgba(16, 24, 40, .92);
-  --muted: rgba(16, 24, 40, .62);
+  --text: #101828eb;
+  --muted: #1018289e;
 
-  --shadow: 0 18px 45px rgba(16,24,40,.12);
+  --shadow: 0 18px 45px #1018281f;
   --r: 14px;
 
   --cardMin: 240;
@@ -21,6 +21,9 @@
   --filterW: 170px;
   --filterWOpen: 360px;
 
+  --toggle-bg-color: #4281A4;
+  --toggle-nub-color: #FF686B;
+
   --topbarH: 64px;
 
   /* Basic font reset for the component only */
@@ -369,14 +372,70 @@
 }
 .pexpo-core-filterPanelHeader b { color: var(--text); }
 
-.pexpo-core-jsonBox {
+.pexpo-core-filterPanelBody {
+  display: flex;
   padding: 10px;
-  flex: 1 1 auto;
+  flex-direction: column;
   overflow:auto;
   min-height: 0;
+  gap: 10px;
 }
 
-.pexpo-core-textarea {
+.pexpo-core-toggle {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.pexpo-core-toggle input[type="checkbox"] {
+  display: none;
+}
+
+.pexpo-core-toggle label {
+  position: relative;
+  display: block;
+  width: 50px;
+  height: 25px;
+  cursor: pointer;
+}
+
+.pexpo-core-toggle label::before {
+  content: '';
+  display: block;
+  width: 100%; 
+  height: 100%;
+  border-radius: 4px;
+  background: var(--toggle-bg-off);
+  border: 1.5px solid color-mix(in srgb, var(--toggle-bg-off), black var(--darker));
+  box-sizing: border-box;
+  transition: all 0.2s ease-in;
+}
+
+.pexpo-core-toggle label::after {
+  content: '';
+  display: block;
+  height: 21px;
+  width: 21px;
+  border-radius: 2px;
+  background: var(--toggle-nub-color);
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  transition: all 0.2s ease-in;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+.pexpo-core-toggle input:checked + label::before {
+  background: var(--toggle-bg-on);
+  border: 1.5px solid color-mix(in srgb, var(--toggle-bg-on), black var(--darker));
+}
+
+.pexpo-core-toggle input:checked + label::after {
+  left: 27px;
+}
+
+/* .pexpo-core-textarea {
   width: 100%;
   height: 210px;
   resize: vertical;
@@ -395,7 +454,7 @@
 .pexpo-core-textarea:focus {
   border-color: rgba(44,52,137,.45);
   box-shadow: 0 0 0 3px rgba(44,52,137,.14);
-}
+} */
 
 .pexpo-core-hint {
   margin-top: 8px;