.QueryField-frame {
  .QueryField-searchForm,
  .QueryField-searchControls {
    display: block;
  }

  .SearchWidget-controls {
    width: 100%;
  }

  .SearchWidget-history,
  .SearchWidget-reset {
    display: none;
  }

  .SearchWidget-result {
    display: flex;
    flex-flow: row wrap;
    height: min-content;
    width: 100%;

    & > h2 {
      font-size: 100%;
      margin-left: var(--gap-l);
      margin-right: var(--gap-s);
    }
  }

  .SearchResult-sorts {
    flex-grow: 1;
    margin-left: var(--gap-l);
    margin-top: calc((var(--gap-l) - (var(--gap-s) + 1px)));

    > form {
      width: max-content;
    }
  }

  .SearchResult-pagination {
    margin-left: var(--gap-l);
    margin-right: var(--gap-l);
    margin-top: calc((var(--gap-l) - (var(--gap-s) + 1px)));
    position: unset;
    z-index: unset;
  }

  .SearchResult-items {
    padding-top: var(--gap-l);
    width: 100%;
  }
}

.QueryField-queryString {
  display: none;
}

.QueryField-toggle {
  align-items: center;
  display: flex;
  flex-direction: row;

  &:hover {
    cursor: pointer;
  }

  .QueryField-label {
    max-width: calc(100% - var(--Icon-size) - var(--gap-m) - 2 * var(--gap-s));
  }

  .QueryField-icon {
    .IconButton;

    --IconButton-name: 'edit';

    margin-left: var(--gap-m);
  }
}

.Popup[name='queryField'] {
  .Popup-content {
    display: flex;
    flex-flow: column nowrap;

    .ActionBar,
    .SearchWidget-title {
      flex-shrink: 0;
    }

    .SearchResult-pagination {
      padding: 0;
    }

    .SearchWidget-form {
      flex-grow: 1;
      overflow: auto;
    }

    .SearchResult-items {
      margin-top: 0;
    }

    .Taxonomy {
      margin-top: 0;
      width: 100%;

      li {
        padding-bottom: var(--gap-s);
        padding-top: var(--gap-s);
      }
    }

    .QueryField-queryString {
      display: none !important;
    }
  }
}

@media (@mq-s) {
  .Page-content.is-previewing ~ .QueryField-frame {
    .QueryField-searchControls,
    .QueryField-searchForm {
      display: block;
    }

    .SearchWidget-controls {
      width: 100%;
    }
  }
}

@media (@mq-l) {
  .QueryField-frame {
    .QueryField-searchControls,
    .QueryField-searchForm {
      display: flex;
    }

    .SearchWidget-controls {
      width: 250px;
    }

    .SearchResult-sorts,
    .SearchResult-pagination {
      margin-top: calc((var(--gap-l) - (var(--gap-s) + 2px)));
    }
  }
}
