[Docs Site] Overhaul sidebar styling (#17026)

* [Docs Site] Overhaul sidebar styling

* Shrink caret size, move to native nesting

Author: KianNH

src/components/overrides/Sidebar.astro

@@ -205,20 +205,46 @@ const lookupProductTitle = async (slug: string) => {
 
 <style is:global>
 	:root {
-		a[aria-current="page"] {
-			background-color: var(--sidebar-blue-accent-600) !important;
-			border: 1px solid !important;
-			border-color: var(--blue-accent-900) !important;
-			color: var(--sidebar-blue-text) !important;
+		.sidebar-content {
+			--sl-color-hairline-light: #cacaca !important;
+
+			& > * {
+				a {
+					padding: 0.2375em var(--sl-sidebar-item-padding-inline) !important;
+
+					&[aria-current="page"] {
+						background-color: unset !important;
+						border: unset !important;
+						border-color: unset !important;
+						color: var(--sl-color-accent) !important;
+						font-weight: 600 !important;
+					}
+				}
+
+				summary {
+					padding: 0.1375em var(--sl-sidebar-item-padding-inline) !important;
+				}
+
+				.large {
+					color: var(--sl-color-gray-2) !important;
+					font-weight: unset !important;
+					font-size: unset !important;
+
+					@media (min-width: 50rem) {
+						font-size: var(--sl-text-sm) !important;
+					}
+				}
+
+				.caret {
+					font-size: 1rem !important;
+				}
+			}
 		}
 	}
 
 	:root[data-theme="dark"] {
-		a[aria-current="page"] {
-			background-color: var(--sidebar-orange-accent-600) !important;
-			border: 1px solid !important;
-			border-color: var(--orange-accent-200) !important;
-			color: var(--sl-color-white) !important;
+		.sidebar-content {
+			--sl-color-hairline-light: #444444 !important;
 		}
 	}
 </style>