.ui-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  min-width: 0;
  font-family: var(--font-family-sans);
}

.ui-filters__fields {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(16rem, 100%),
        1fr
      )
    );
  gap: var(--space-4);
  width: 100%;
  min-width: 0;
}

.ui-filters__field {
  min-width: 0;
}

.ui-filters__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
  width: 100%;
}

.ui-filters[data-disabled="true"] {
  cursor: not-allowed;
}

.ui-filters[data-disabled="true"]
  .ui-filters__field {
  opacity: 0.75;
}

@media (max-width: 720px) {
  .ui-filters {
    gap: var(--space-3);
  }

  .ui-filters__fields {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .ui-filters__actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .ui-filters__actions .ui-button {
    width: 100%;
  }
}