Improve the categories filter type for 2.0.x

Closes #3318817

css/pb.css

@@ -5,9 +5,6 @@
   margin: 0;
   padding: 0;
 }
-.pb-filter__heading--narrow {
-  margin-block-start: 0;
-}
 .pb-filter__summary {
   padding: 0;
   cursor: pointer;
@@ -15,27 +12,57 @@
 .pb-filter__summary--open {
   padding-bottom: 0.95rem;
 }
-.pb-filter__heading {
-  display: inline;
-  margin-top: 0;
-  padding: 0 0.5rem;
-  font-size: 1rem;
-}
 .pb-filter__checkbox-label {
-  display: block;
-  padding: 5px 0;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding-left: 1rem;
+  border-bottom: 1px solid rgba(212, 212, 218, 0.6);
 }
-.pb-filter__checkbox {
-  margin-inline: 10px;
+.pb-filter__checkbox-label:hover,
+.pb-filter__checkbox-label:focus {
+  background-color: #f3f4f9;
 }
+
+.pb-filter__checkbox-label-txt {
+  display: block;
+  flex-grow: 1;
+  padding: 1rem 0;
+  cursor: pointer;
+}
+
 .pb-filter__fieldset {
   border: none;
 }
-.pb-filter__checkbox-label,
-.pb-filter__checkbox {
+.pb-filter__multi-dropdown {
+  min-width: 10rem;
+}
+.pb-filter__multi-dropdown__label {
+  position: relative;
+  display: inline-block;
   cursor: pointer;
 }
 
+.pb-filter__multi-dropdown {
+  position: relative;
+}
+
+.pb-filter__multi-dropdown__items--hidden {
+  display: none;
+}
+.pb-filter__multi-dropdown__items--visible {
+  position: absolute;
+  z-index: 100;
+  top: 47px;
+  right: 0;
+  display: block;
+  overflow: scroll;
+  width: 100%;
+  max-height: 380px;
+  background-color: #fff;
+  box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1);
+}
+
 /* <ImageCarousel> */
 .pb-image-carousel {
   display: flex;
@@ -171,7 +198,6 @@
 .pb-layout__header {
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid #dee2e6;
 }
 .pb-search-results {
   margin-bottom: 5px;
@@ -243,7 +269,6 @@
 .pb-layout {
   display: flex;
   flex-flow: column nowrap;
-  gap: 1.5rem;
 }
 
 @media screen and (min-width: 800px) {
@@ -609,24 +634,65 @@
 }
 
 /* <Search/Search> */
-.search__form-item {
-  margin-top: 0;
+.search__form-container {
+  margin: -1px 0 2rem;
+  padding: 1.5rem;
+  border: 1px solid #dedfe4;
+  border-radius: 1px;
+  background-color: #fff;
+  box-shadow: 0 2px 0.25rem rgba(0, 0, 0, 0.1);
+}
+
+@media screen and (min-width: 600px) {
+  .search__form-filters {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .search__form-filters .search__bar-container {
+    grid-column: span 6;
+  }
+
+  .search__form-filters .form-type--select,
+  .search__form-filters .filter-group__filter-options {
+    grid-column: span 3;
+  }
 }
-.search__form {
-  display: inherit;
-  flex-wrap: wrap;
-  margin-top: 2.375rem;
-  padding: 0 0 1.5rem;
+
+@media screen and (min-width: 1200px) {
+  .search__form-filters {
+    grid-template-columns: repeat(8, 1fr);
+  }
+
+  .search__form-filters .search__bar-container {
+    grid-column: span 8;
+  }
+
+  .search__form-filters .form-type--select,
+  .search__form-filters .filter-group__filter-options {
+    grid-column: span 2;
+  }
+}
+
+.search__form-filters .form-element--type-select {
+  width: 100%;
+}
+
+.search__bar-container.form-item {
+  margin-block-end: 1.5rem;
 }
 
 .search__search-bar .search__search_term {
-  position: relative;
-  display: flex;
   width: 100%;
-  height: 50px;
+  padding: 0 3rem 0 1rem;
+  border: none;
   outline: none;
 }
-
+.search__filter-select {
+  min-width: 10rem;
+}
 .search__search_term::-webkit-search-cancel-button,
 .search__search_term::-webkit-search-decoration,
 .search__search_term::-webkit-search-results-button,
@@ -636,29 +702,35 @@
 
 .search__search-bar {
   position: relative;
-  height: 50px;
+  min-width: 10rem;
   cursor: pointer;
-  text-align: center;
   color: #fff;
   border: 1px solid #919297;
   border-radius: 2px;
+  background-color: #fff;
   font-size: 20px;
 }
 
+.search__search-bar:hover {
+  border-color: #000;
+}
+
 .search__search-icon {
   position: absolute;
+  z-index: 1;
+  right: 10px;
   bottom: 12px;
-  inset-inline-end: 30px;
 }
 
 .search__search-clear {
   position: absolute;
+  z-index: 1;
   top: 0;
+  right: 40px;
   height: 100%;
   cursor: pointer;
   border: none;
   background: none;
-  inset-inline-end: 60px;
 }
 
 .search__search_term::placeholder {
@@ -677,15 +749,19 @@
   border: 3px solid #f3f4f9;
 }
 
-.search__grid-container {
-  display: grid;
-  grid-template-columns: 5fr auto auto;
-  grid-gap: 20px;
-  align-items: center;
-  max-width: 100%;
-  height: auto;
-  padding: 5px;
-  background: #f3f4f9;
+.search__form-filters-container {
+  padding: 1rem 1.5rem;
+  background-color: #f3f4f9;
+}
+
+@media screen and (min-width: 800px) {
+  .search__form-sort {
+    display: grid;
+    grid-template-columns: 5fr auto;
+    grid-gap: 1rem;
+    align-items: center;
+    padding-top: 1rem;
+  }
 }
 
 .search__filter-button {
@@ -697,12 +773,6 @@
   background: none;
 }
 
-@media screen and (max-width: 855px) {
-  .search__grid-container {
-    display: block;
-  }
-}
-
 /* <Search/SearchFilters> */
 .search__filters {
   display: flex;
@@ -718,9 +788,10 @@
   margin-inline-end: 1em;
 }
 
-.search__filter-wrapper {
+.search__filters {
   display: flex;
   align-items: center;
+  padding: 0.5rem 0;
 }
 
 .search__filter__toggle.form-element {
@@ -763,7 +834,10 @@
 .search__sort {
   z-index: 2;
 }
-
+.search__sort label {
+  font-size: 0.9rem;
+  font-weight: bold;
+}
 .search__sort-select.form-element {
   border: none;
   background-color: #d3d4d9;