Make inserter patterns/media changes more minimal

packages/block-editor/src/components/inserter/style.scss

@@ -222,24 +222,45 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__category-tablist {
-	&::before {
-		background-color: var(--wp-admin-theme-color) !important;
-		opacity: 0.04;
+	display: flex;
+	flex-direction: column;
+	border: none;
+	margin-bottom: $grid-unit-10;
+	// Push the listitem wrapping the "explore" button to the bottom of the panel.
+	div[role="listitem"]:last-child {
+		margin-top: auto;
 	}
 
-	margin-bottom: $grid-unit-10;
+	// Temporarily disable the component's indicator animation.
+	// TODO: remove in favor of using the native component's styles and behavior,
+	// see https://github.com/WordPress/gutenberg/pull/62879#issuecomment-2219720582
+	&[aria-orientation="vertical"]::after {
+		content: none;
+	}
 
 	.block-editor-inserter__category-tab {
-
 		// Account for the icon on the right so that it's visually balanced.
-		// TODO: this is a style override, either the design or the component should
-		// be updated (e.g. by adding a variant).
 		padding: $grid-unit-10 $grid-unit-05 $grid-unit-10 $grid-unit-15;
+		text-align: left;
 		font-weight: inherit;
+		display: block;
+		position: relative;
+		height: auto;
 
 		&[aria-selected="true"] {
 			color: var(--wp-admin-theme-color);
-			fill: currentColor;
+
+			.components-flex-item {
+				filter: brightness(0.95);
+			}
+
+			svg {
+				fill: var(--wp-admin-theme-color);
+			}
+		}
+
+		&::before {
+			display: none;
 		}
 	}
 }