@import "../../variables";

// Search tools

.js-stools {
  display: flex;
  flex-wrap: wrap;
}

.js-stools-container-bar,
.js-stools-container-filters {
  margin-bottom: 10px;
}

.js-stools-container-bar {
  margin-inline-start: auto;

  .btn-toolbar {
    justify-content: flex-end;

    > * {
      margin: 5px 0;

      + * {
        margin-inline-start: 8px;
      }
    }

    .js-stools-btn-clear {
      background-color: var(--template-bg-dark);
    }
  }

  .ordering-select {
    display: flex;
  }
}

.js-stools-container-filters {
  display: none;
  width: 100%;

  &-visible {
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    padding: 10px;
    background-color: $white;
  }
}

.js-stools-field-list {
  + .js-stools-field-list {
    margin-inline-start: 8px;
  }
}

.js-stools-container-selector {
  margin: 5px 0;
  margin-inline-end: 8px;
}