/* Styles for an advanced search criteria row. Every rule hangs from the 'search-criteria-row' host element to scope
   it to the component. */

search-criteria-row .search-criteria-row {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-3xs);
}

/* Logical operator and field selector */
search-criteria-row .search-criteria-row__field-group {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--md-spacing-3xs);
}

search-criteria-row .search-criteria-row__logical-operator {
  flex: 0 0 70px;
}

/* Field, value and second value share the remaining width */
search-criteria-row .search-criteria-row__fill {
  flex: 1;
  min-width: 150px;
}

search-criteria-row .search-criteria-row__operator {
  flex: 0 0 140px;
}

/* Fills the operator column like the selects it replaces, with the arrow pushed to the end */
search-criteria-row .search-criteria-row__action-trigger {
  display: block;
}

search-criteria-row .search-criteria-row__action-trigger .md-btn {
  width: 100%;
  justify-content: space-between;
}

/* Range bounds (from → to) and BETWEEN second value */
search-criteria-row .search-criteria-row__range {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-3xs);
}

search-criteria-row .search-criteria-row__range-input {
  flex: 1;
  min-width: 0;
}

search-criteria-row .search-criteria-row__muted {
  color: var(--md-content-tertiary);
}

/* Action operator chips (e.g. classificationScheme) */
search-criteria-row .search-criteria-row__chips-field {
  display: flex;
  align-items: center;
  padding: 2px var(--md-spacing-3xs); /* no spacing token for 2px: keeps the field at the inputs' height */
}

search-criteria-row .search-criteria-row__chips {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--md-spacing-3xs);
  min-width: 0;
  overflow: hidden;
}

/* visibility, opacity and display stay inline on the chips: chip-overflow toggles them by resetting
   the inline value, which would fall back to a hidden state if it came from here */
search-criteria-row .search-criteria-row__chip {
  transition: opacity 120ms ease;
  cursor: default;
}

search-criteria-row .search-criteria-row__chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

search-criteria-row .search-criteria-row__chips-panel {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  z-index: 1051; /* above the Bootstrap modal (1050) the row is rendered in */
  cursor: default;
}

search-criteria-row .search-criteria-row__chips-panel-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-spacing-2xs);
  padding: var(--md-spacing-2xs);
  max-height: 220px; /* same as the search bar dropdowns */
  overflow: auto;
}

/* No-value indicator (IS_EMPTY) */
search-criteria-row .search-criteria-row__no-value {
  display: flex;
  align-items: center;
  gap: var(--md-unit-4); /* 6px is not in the spacing ramp: the primitive keeps the box at the inputs' height */
  padding: var(--md-unit-4) var(--md-spacing-2xs);
  border-radius: var(--md-radius-xs);
  background-color: var(--md-background-disabled);
  color: var(--md-content-tertiary);
}

search-criteria-row .search-criteria-row__no-value-text {
  font-size: var(--md-font-size-3);
}

search-criteria-row .search-criteria-row__buttons {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-3xs);
}