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

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

    &__header {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }

    &__clear-button {
      background: transparent;
      border: none;
      color: var(--theme-elevation-500);
      line-height: inherit;
      cursor: pointer;
      font-size: inherit;
      padding: 0;
      text-decoration: underline;
    }

    &__inputs {
      width: 100%;
      display: flex;
      gap: base(1);

      & > * {
        flex-grow: 1;
        width: 50%;
      }
    }
  }
}