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

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

  &__wrap {
    display: flex;
    align-items: center;
    background-color: var(--theme-elevation-50);
  }

  .search-filter {
    flex-grow: 1;

    input {
      margin: 0;
    }
  }

  &__buttons {
    margin-left: $baseline;
  }

  &__buttons-wrap {
    display: flex;
    align-items: center;
    margin-right: base(.5);

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

    .btn {
      background-color: var(--theme-elevation-100);
      cursor: pointer;
      padding: 0 base(.25);
      border-radius: $style-radius-s;

      &:hover {
        background-color: var(--theme-elevation-200);
      }
    }
  }

  &__buttons-active {
    svg {
      transform: rotate(180deg);
    }
  }

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

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

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

    &__buttons-wrap {
      margin-left: - base(.25);
      margin-right: - base(.25);
      width: calc(100% + #{base(0.5)});

      .pill {
        margin: 0 base(.25);
        padding: base(.5) base(1);

        svg {
          margin-left: auto;
        }
      }
    }

    &__buttons {
      margin: 0;
      width: 100%;
    }

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