@use "../../wc";
@use "../../../scss/shared/form-elements";

:host {
  display: contents;

  --zn-input-bg: var(--zn-panel)
}

.add-rule {
  max-width: 250px;
  margin-bottom: 10px;
}

.query-builder {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

  zn-button {
    align-self: flex-end;
  }

  &--popup:has(.query-builder__row) {
    min-width: 990px;
  }

  &__row ,
  &__wrapper {
    display: flex;
    width: 100%;
    gap: 10px;
  }

  &__row {
    padding-bottom: 10px;
  }

  &__key,
  &__comparator {
    flex-basis: 60%;
  }

  &__value {
    flex-grow: 1;
  }

}

// Specifically for when a query builder is rendered within a dropdown
.query-builder--dropdown:has(.query-builder__row) {
  min-width: 900px;
}