@import '../../../scss/styles';

.list-controls {
  margin-bottom: $baseline;

  &__wrap {
    display: flex;
  }

  .search-filter {
    flex-grow: 1;

    input {
      margin: 0;
    }
  }

  &__buttons {
    margin-left: $baseline;
  }

  &__buttons-wrap {
    display: flex;
    margin-left: - base(.5);
    margin-right: - base(.5);
    width: calc(100% + #{$baseline});
  }

  &__toggle-columns,
  &__toggle-where,
  &__toggle-sort {
    min-width: 140px;

    &.btn {
      margin: 0 base(.5);
    }

    &.btn--style-primary {
      svg {
        transform: rotate(180deg);
      }
    }
  }

  .column-selector,
  .where-builder,
  .sort-complex {
    margin-top: base(1);
  }

  @include mid-break {
    &__buttons {
      margin-left: base(.5);
    }
  }

  @include small-break {
    &__wrap {
      flex-wrap: wrap;
    }

    .search-filter {
      margin-bottom: base(.5);
      width: 100%;
    }

    &__buttons {
      margin: 0;
    }

    &__buttons {
      width: 100%;
    }

    &__toggle-columns,
    &__toggle-where,
    &__toggle-sort {
      flex-grow: 1;
    }
  }
}