/**
 * @file CSS to apply to all (or most) views
 */

/* Generic views styles */
ul.view-content {
  padding-left: 0;
}

li.views-row::marker {
  color: transparent;
}

/* Background colours */
.view--bg-1 {
  background-color: var(--color-secondary-b);
}

.view--bg-2 {
  background-color: var(--color-primary-b);
}

.view--bg-3 {
  background-color: var(--color-primary-a);
}

.view--bg-4 {
  background-color: var(--color-grey-light-a);
}

.view--bg-5 {
  background-color: var(--color-white);
}

.view--bg-6 {
  background-color: var(--color-black);
}

/* Views block titles (for layout builder) */
.views-element-container > .block__title {
  max-width: var(--width-content-area);
  margin-inline: auto;
  padding-right: var(--spacing);
  padding-left: var(--spacing);
}

/* Exposed forms */
.view-filters {
  padding: var(--spacing-large);
  border-radius: var(--border-radius-large);
  box-shadow: var(--box-shadow);
}

.views-exposed-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing);
}

.views-exposed-form .bef--secondary {
  width: 100%;
}

.views-exposed-form .bef--secondary > summary {
  display: inline-block;
  padding: var(--spacing) var(--spacing-large) var(--spacing) 2.5rem;
  border-radius: var(--border-radius-full);
  background-color: var(--color-secondary-b);
  background-image: url("/themes/custom/slimline/assets/icons/svg/fa-5/regular/sliders-v.svg");
  background-repeat: no-repeat;
  background-position: var(--spacing);
  background-size: var(--spacing);
  cursor: pointer;
}
.views-exposed-form .bef--secondary[open] > summary {
  margin-bottom: var(--spacing);
}

.views-exposed-form .bef--secondary[open] > * {
  float: left;
  margin-right: var(--spacing);
  margin-bottom: var(--spacing);
}
.views-exposed-form .bef--secondary[open] > summary + * {
  clear: left;
}

.views-exposed-form label {
  display: block;
  margin-bottom: var(--spacing-small);
}

.views-exposed-form .js-form-type-checkbox {
  display: flex;
  align-items: center;
  margin-top: 2.5rem;
  gap: var(--spacing);
}

.views-exposed-form .js-form-type-checkbox label {
  margin-bottom: 0;
}

.views-exposed-form[data-drupal-form-fields*="edit-reset"] .form-submit + .form-submit {
  text-decoration: underline;
  color: var(--color-primary-b);
  border-color: transparent;
  background-color: var(--color-white);
}
.views-exposed-form[data-drupal-form-fields*="edit-reset"] .form-submit + .form-submit:hover,
.views-exposed-form[data-drupal-form-fields*="edit-reset"] .form-submit + .form-submit:focus {
  text-decoration: none;
}

.views-exposed-form .form-actions {
  width: 100%;
  margin-top: var(--spacing);
  padding-top: var(--spacing-large);
  border-color: var(--border-color-light);
  border-top: var(--border);
}

/* Pager */
.pager__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-left: 0;
  list-style: none;
  color: var(--color-white);
  gap: var(--spacing);
}

.pager__items a {
  padding: var(--spacing-small);
  text-decoration: none;
  color: var(--color-white);
  border: var(--border);
  border-color: transparent;
  border-radius: var(--border-radius-full);
}

.pager__items a:hover,
.pager__item.is-active a {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--color-primary);
}

.pager__item--first a,
.pager__item--previous a,
.pager__item--next a,
.pager__item--last a {
  border-color: var(--color-white);
}

/*
  Cards Views
  Adding these to this files as this is our default view style
*/
.view--cards {
  background-color: var(--color-primary);
}

.view--cards-bg-light {
  background-color: var(--color-grey-light-aaa);
}

.view--cards-bg-white {
  background-color: var(--color-white);
}

.view--cards .view__exposed {
  background-color: var(--color-grey-light-aaa);
}

.view--cards .view__exposed {
  padding-top: var(--spacing);
  padding-bottom: var(--spacing-xlarge);
}

.view--cards .view__results {
  padding-top: var(--spacing-xlarge);
  padding-bottom: var(--spacing-xlarge);
}

.view--cards .view__pager {
  padding-bottom: var(--spacing-xlarge);
}

.view--cards .view-empty {
  color: var(--color-white);
  padding: var(--spacing-xlarge) 0;
}

/*
Specific views styles
*/
.view-event-related-paragraphs .view__results {
  padding-top: 0;
}

.view-gallery-images .pager__items a {
  color: var(--color-black);
}

.view-working-papers__filters .form-item-field-working-award-winner {
  clear: left;
}

/* Blog Taxonomy pages */
.view--taxonomy-listing .view__header {
  background-color: var(--color-white);
}
.view-taxonomy-term__header {
  padding-top: var(--spacing);
  padding-bottom: var(--spacing);
}

.view-more {
  padding-bottom: var(--spacing-xlarge);
  text-align: right;
}

/*
 Specific views exposed filter styles
*/
#views-exposed-form-members-listing-block-members-research select {
  width: 100%;
}

#views-exposed-form-members-listing-block-members-research .form-item-discipline,
#views-exposed-form-members-listing-block-members-research .form-item-gender {
  width: 45%;
}

@media screen and (min-width: 1180px) {
  #views-exposed-form-members-listing-block-members-research .form-item-discipline,
  #views-exposed-form-members-listing-block-members-research .form-item-gender {
    width: 16%;
  }
}

.views-exposed-form .form-submit {
  cursor: pointer;
}

.view-events-listing__filters--block-all {
  .form-item-keywords,
  .form-item-series,
  .form-item-country {
    width: 100%;
    @media screen and (min-width: 768px) {
      width: 30%;
    }
    > * {
      width: 100%;
    }
  }
}
