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

@layer payload-default {
  .query-preset-bar {
    display: flex;
    gap: base(0.5);
    justify-content: space-between;
    background-color: var(--theme-elevation-50);
    border-radius: var(--style-radius-m);
    padding: base(0.5);

    &__menu {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-grow: 1;
    }

    &__create-new-preset {
      height: 100%;
      padding: 0 3px;
      background: transparent;
      box-shadow: inset 0 0 0 1px var(--theme-elevation-150);

      &:hover {
        background: transparent;
      }
    }

    &__menu-items {
      overflow: auto;
      display: flex;
      gap: base(0.5);

      button {
        color: var(--theme-elevation-500);
        margin: 0;
      }
    }
  }
}