/* Default Query Container (Do not change) */
.query-container {
  margin-bottom: 1rem;

  /* Inline Query Container */
  &.inline-query-container form .query-section.search {
    width: var(--container-sm);
  }

  /* Vertical Query Container */
  &.query-container-list {
    form {
      flex-direction: column;

      section.query-section {
        align-self: flex-start;
        flex-direction: column;
        width: 100%;
      }
    }
  }
  /* Default Styling */
  form {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    width: 100%;

    section.query-section {
      align-self: flex-end;
      align-items: flex-end;
      display: flex;
      flex-direction: row;
      gap: 0.5rem;
      height: fit-content;

      &.select {
        order: 1
      }

      &.filters {
        flex: 1;
        order: 2;

        &:has( + .sort) {
          padding-right: 1rem;

          .sort {
            max-width: var(--container-s);
          }
        }
      }

      &.sort {
        justify-content: flex-end;
        min-width: var(--container-s);
        order: 3;

        &.align-right{
          margin-left: auto;
        }
      }

      &.search {
        order: 4;
        width: 100%;

        .field {
          flex-direction: row;
          flex-wrap: wrap;

          .form-label {
            width: 100%;
          }

          .form-input {
            flex: 1;
            width: auto;
          }
        }
      }

      .field {
        &.field-xs {
          max-width: 100px;
          min-width: 100px;
        }

        &.field-s {
          max-width: 160px;
          min-width: 160px;
        }

        &.field-m {
          max-width: var(--container-xs);
          min-width: var(--container-xs);
        }

        &.field--min-width {
          min-width: 200px;
        }

        .form-label {
          white-space: nowrap;
        }
      }
    }

    section.query-section--col {
      flex-direction: column;
    }
  }

  @media screen and (max-width: 768px) {  /* var(--screen-md) */
    margin-bottom: 1rem;

    &.inline-query-container {
      form .query-section.search {
        width: 100%;
      }
    }

    form {
      flex-direction: column;
      justify-content: flex-start;

      section.query-section {
        align-self: flex-start;
        width: 100%;

        &.filters {
          flex-direction: column;

          &:has( + .sort) {
            padding-right: unset;
          }
        }
        .field {
          &.field-xs, &.field-s, &.field-m {
            max-width: unset;
            min-width: unset;
          }
        }
      }
    }
  }
  @media screen and (max-width: 576px) {  /* var(--screen-sm) */
    form section.query-section {
      &.filters:has( + .sort) {
        flex-wrap: wrap;
      }

      &.search .field {
        flex-direction: column;

        .btn {
          width: 100%;
        }
      }
    }
  }

  /* Query Results Container */
  .query-results-container {
    align-items: center;
    /*border-top: 1px solid var(--light-gray);*/
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
    /*margin-top: 0.5rem;*/
    padding: 0.5rem 0;
    transition: 0.4s ease-in-out;
    width: 100%;

    .filter-results, .search-results {
      align-items: center;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 0.5rem;
      height: fit-content;
      min-height: 2.5rem;
      transition: 0.4s ease-in-out;
      width: fit-content;
    }

    .filter-results {
      &:has(+ .search-results) {
        border-right: 1px solid var(--light-gray);
        padding-right: 0.5rem;
      }

      .reset-filter-btn {
        max-height: unset;

        span:has(span.query-type) {
          align-items: flex-start;
          display: inline-flex;
          flex-direction: column;

          span.query-type {
            color: var(--ink-gray);
            font-size: 0.75rem;
            font-weight: 400;
          }
        }
      }
    }

    @media screen and (max-width: 576px) {  /* var(--screen-sm) */
      align-items: flex-start;
      flex-direction: column;

      .filter-results {
        flex-direction: row-reverse;
        justify-content: flex-start;
        width: 100%;

        &:has(+ .search-results) {
          border-bottom: 1px solid var(--light-gray);
          border-right: none;
          padding-bottom: 0.5rem;
          padding-right: 0;
        }

        .link {
          flex: 1;
        }
      }
    }
  }
}

.no-results-notice {
  width: 100%;
}