@use "src/styles/variables" as *;

.vm-query-configurator {
  display: grid;
  gap: $padding-global;

  &-list {
    display: grid;

    &-row {
      display: grid;
      grid-template-columns: 1fr auto auto auto;
      align-items: center;
      gap: $padding-small;

      &_mobile {
        gap: 4px;
      }

      &_disabled {
        filter: grayscale(100%);
        opacity: 0.5;
      }

      &__button {
        display: grid;
        align-items: start;
        width: 36px;
        min-height: 36px;
      }
    }
  }

  &-settings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: $padding-medium;

    &__buttons {
      flex-grow: 1;
      display: grid;
      grid-template-columns: repeat(3, auto);
      gap: $padding-small;
      justify-content: flex-end;
    }
  }
}
