diff --git a/modules/core/ui/theme/css/views.css b/modules/core/ui/theme/css/views.css
index 53f5ce4c8..5b046e3a5 100644
--- a/modules/core/ui/theme/css/views.css
+++ b/modules/core/ui/theme/css/views.css
@@ -57,3 +57,12 @@
 .view form.views-form div[data-drupal-selector='edit-header'] > div.form-wrapper {
   padding: 0 0 0 var(--gin-spacing-xs);
 }
+
+/* Specify gin variables for collapsible filter styles. */
+div.view-filters details > summary {
+  padding: var(--gin-spacing-m);
+  font-weight: var(--gin-font-weight-semibold);
+}
+div.view-filters details > div {
+  margin: 0 0 0 var(--gin-spacing-s);
+}
diff --git a/modules/core/ui/views/css/views_collapsible_filters.css b/modules/core/ui/views/css/views_collapsible_filters.css
index 7b5f0c524..549b4de7e 100644
--- a/modules/core/ui/views/css/views_collapsible_filters.css
+++ b/modules/core/ui/views/css/views_collapsible_filters.css
@@ -1,8 +1,14 @@
 /* Improve style of exposed filters form within details element. */
-div.view-filters details div {
-  margin-top: 0;
+div.view-filters details {
+  margin: 0;
 }
-div.view-filters details div form.views-exposed-form {
+div.view-filters details > summary {
+  padding: 1rem;
+}
+div.view-filters details > div {
+  margin: 0 0 0 .75rem;
+}
+div.view-filters details > div form.views-exposed-form {
   border: none;
   padding: 0;
   -webkit-box-shadow: none;