/**
  * @file
  * Views with exposed filters.
  **/

.view-filters .views-exposed-form {
  margin-bottom: 1rem;
  border: 1px solid var(--grey);
  padding: calc(var(--bs-gutter-x) / 2);
}

.view-filters .views-exposed-form .exposed-filters {
  align-items: flex-end;
  row-gap: 0.5rem;
}

.view-filters .views-exposed-form .exposed-filters .fieldset-wrapper {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5em;
  column-gap: 1em;
}

@media (min-width: 50em) {
  /** Need to be the default 100% on smaller screens, but initial on larger screens to fit more per row. **/
  .view-filters .field-wrapper,
  .view-filters .form-control,
  .view-filters .form-actions,
  .view-filters .form-select {
    width: initial;
  }
}

/** Filters details block, typically coming through Better Exposed Filters **/

.view-filters .views-exposed-form .exposed-filters summary {
  padding: 5px;
  background-color: var(--laurier-blue);
  text-transform: none;
}

.view-filters .views-exposed-form .exposed-filters summary:is(:hover, :focus) {
  outline: 1px solid var(--laurier-purple);
  background-color: var(--laurier-purple);
  color: var(--white);
}

.view-filters .views-exposed-form .exposed-filters .details-wrapper {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5em;
  column-gap: 1em;
}

/** Checkboxes in filters **/

.view-filters .views-exposed-form .exposed-filters .form-checkboxes {
  max-height: 8em;
  overflow-y: auto;
}

.view-filters
  .views-exposed-form
  .exposed-filters
  .form-checkboxes
  label.form-check-label {
  text-transform: capitalize;
}