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

@layer payload-default {
  .where-builder {
    background: var(--theme-elevation-50);
    padding: var(--base);
    display: flex;
    flex-direction: column;
    gap: calc(var(--base) / 2);

    .btn {
      margin: 0;
      align-self: flex-start;
    }

    &__no-filters {
      display: flex;
      flex-direction: column;
      gap: calc(var(--base) / 2);
    }

    &__or-filters,
    &__and-filters {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: calc(var(--base) / 2);

      li {
        display: flex;
        flex-direction: column;
        gap: calc(var(--base) / 2);
      }
    }

    @include small-break {
      padding: calc(var(--base) / 2);
    }
  }
}