.views-facets-form__facets {
  background: white;
  padding: calc(36 / 16 * 1rem) calc(24 / 16 * 1rem) calc(24 / 16 * 1rem);

  > .form-item {
    padding: 0.8rem 0;

    &:has(.js-form-type-date) {
      display: grid;
      grid-template-areas: 'label' 'content';
      grid-row-gap: 0rem;

      &::details-content {
        display: grid;
        grid-template-areas: 'min' 'max';
        grid-row-gap: 1rem;
      }

      summary {
        grid-area: label;
      }

      .js-form-type-date {
        display: grid;
        grid-template-areas: 'label' 'input';
        grid-template-columns: 1fr;
        grid-row-gap: 0.5rem;
        margin: 0;

        label {
          grid-area: label;
          padding-left: 1.8rem;
        }

        input {
          grid-area: input;
        }
      }

      .form-item-event-date-start {
        grid-area: min;
      }

      .form-item-event-date-end {
        grid-area: max;
      }
    }

    .bef-scrollable {
      border: 1px solid var(--primary);

      ul {
        padding-top: calc(8 / 16 * 1rem);
      }

      .form__field--checkbox + .form__field--checkbox {
        margin-top: 0;
      }

      .js-form-type-checkbox.form__field {
        margin-bottom: calc(4 / 16 * 1rem);
      }
    }
  }

  > .form-item {
    border-bottom: 1px solid var(--primary);

    .form__field--checkbox {
      align-items: center;

      label {
        margin: 0;
      }
    }

    &:last-child {
      border-bottom: 0;
    }
  }
}

/* This should contain just the search terms and the submit button */
.views-facets-form__filters {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  position: relative;

  > .form-item {
    margin: 0;

    label {
      font-size: 0;
      line-height: 0;
      color: transparent;
      position: absolute;
      width: 0;
      height: 0;
    }

    .form-text {
      height: calc(52 / 16 * 1rem);
      padding: calc(18 / 16 * 1rem) calc(72 / 16 * 1rem) calc(18 / 16 * 1rem)
        calc(24 / 16 * 1rem);
    }
  }

  .views-facets-form__submit {
    position: absolute;
    right: calc(6 / 16 * 1rem);
  }
}

.ajax-progress-fullscreen,
.ajax-progress-throbber,
.ajax-progress-throbber .throbber {
  display: none;
}

/*.ajax-progress {*/
/*  width: 200px;*/
/*  height: 200px;*/
/*  background-color: white;*/
/*  background-image: url('data:image/svg+xml,<svg id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 40" xml:space="preserve"><path opacity="0.2" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"></path><path d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z"></path></svg>');*/
/*}*/

/* Expanding/Collapsible Facets Container */
.views-facets-form__facets .form-item {
  summary,
  legend {
    display: flex;
    align-items: center;
    flex-direction: row;

    list-style: none;
    text-align: left;
    cursor: pointer;
    color: #173f6c;
    box-sizing: border-box;
    word-break: break-word;
    word-wrap: break-word;
    font-weight: 800;
    letter-spacing: calc(1 / 16 * 1rem);
    line-height: 1.0417;
    font-size: calc(19.5 / 16 * 1rem);
  }

  summary:after {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" stoke="white" fill="white"><path d="M16 0c1.105 0 2 0.895 2 2v28c0 1.105-0.895 2-2 2s-2-0.895-2-2v-28c0-1.105 0.896-2 2-2z"></path><path d="M0 16c0-1.104 0.895-2 2-2h28c1.105 0 2 0.896 2 2s-0.895 2-2 2h-28c-1.105 0-2-0.895-2-2z"></path></svg>');
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: calc(19 / 16 * 1rem) calc(19 / 16 * 1rem);
    color: white;
    content: ' ';
    font-size: 2rem;
    width: calc(38 / 16 * 1rem);
    height: calc(38 / 16 * 1rem);
    border-radius: 50%;
    background-color: #173f6c;
    box-shadow: 0 0 0 0 #173f6c;

    transition: background-color 375ms, box-shadow 375ms;
  }

  summary:focus,
  summary:hover {
    &:after {
      box-shadow: 0 0 0 5px #5d2e8f;
      background-color: #5d2e8f;
    }
  }

  &[open] {
    summary {
      &:after {
        background-color: #5d2e8f;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" stoke="white" fill="white"><path d="M0 16c0-1.104 0.895-2 2-2h28c1.105 0 2 0.896 2 2s-0.895 2-2 2h-28c-1.105 0-2-0.895-2-2z"></path></svg>');
      }
    }
  }

  > div {
    margin-top: 0;
    margin-top: calc(19 / 16 * 1rem);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .views-facets-form__facets details.form-item {
    --transition-time: 0.3s;

    > .form-checkboxes,
    .js-form-type-date {
      display: grid;
      grid-row-gap: 0;
      grid-template-rows: 0fr;
      overflow: hidden;
      /* transition: grid-template-rows var(--transition-time) ease-out; */
      transition: grid-template-rows 0s;

      > * {
        min-height: 0;
      }
    }

    &[open] > .form-checkboxes,
    &[open] > .js-form-type-date {
      grid-template-rows: 1fr;
      transition: grid-template-rows var(--transition-time) ease-out;
    }
  }
}