1 files changed, 37 insertions, 12 deletions

diff --git a/packages/ui/src/components/accordion.css b/packages/ui/src/components/accordion.css
index 7bf287fe5..b4d6323d0 100644
--- a/packages/ui/src/components/accordion.css
+++ b/packages/ui/src/components/accordion.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 8px;
+  gap: 0px;
   align-self: stretch;
 
   [data-slot="accordion-item"] {
@@ -11,7 +11,11 @@
     flex-direction: column;
     align-items: flex-start;
     align-self: stretch;
-    overflow: clip;
+    overflow: visible;
+
+    & + [data-slot="accordion-item"] {
+      margin-top: -1px;
+    }
 
     [data-slot="accordion-header"] {
       width: 100%;
@@ -31,9 +35,10 @@
         cursor: default;
         user-select: none;
 
-        background-color: var(--surface-base);
+        background-color: var(--background-stronger);
         border: 1px solid var(--border-weak-base);
-        border-radius: var(--radius-md);
+        border-radius: 0;
+        box-shadow: none;
         overflow: clip;
         color: var(--text-strong);
         transition: background-color 0.15s ease;
@@ -47,7 +52,10 @@
         letter-spacing: var(--letter-spacing-normal);
 
         &:hover {
-          background-color: var(--surface-base);
+          background-color: var(--surface-base-hover);
+        }
+        &:active {
+          background-color: var(--surface-base-active);
         }
         &:focus-visible {
           outline: none;
@@ -58,23 +66,40 @@
       }
     }
 
-    &[data-expanded] {
-      [data-slot="accordion-trigger"] {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
+    &:first-child {
+      [data-slot="accordion-header"] [data-slot="accordion-trigger"] {
+        border-top-left-radius: var(--radius-lg);
+        border-top-right-radius: var(--radius-lg);
+      }
+    }
+
+    &:last-child:not([data-expanded]) {
+      [data-slot="accordion-header"] [data-slot="accordion-trigger"] {
+        border-bottom-left-radius: var(--radius-lg);
+        border-bottom-right-radius: var(--radius-lg);
       }
+    }
 
+    &[data-expanded] {
       [data-slot="accordion-content"] {
         border: 1px solid var(--border-weak-base);
-        border-top: none;
-        border-bottom-left-radius: var(--radius-md);
-        border-bottom-right-radius: var(--radius-md);
+        border-top: 0;
+        background-color: var(--background-stronger);
+      }
+    }
+
+    &:last-child[data-expanded] {
+      [data-slot="accordion-content"] {
+        border-bottom-left-radius: var(--radius-lg);
+        border-bottom-right-radius: var(--radius-lg);
       }
     }
 
     [data-slot="accordion-content"] {
       overflow: hidden;
       width: 100%;
+      border: 0;
+      background-color: transparent;
     }
   }
 }