@import '../global.scss';

$query-filter-layout: #{$teamix-pro-form}-query-filter-layout;

.theme-hybridcloud-dark {
  --panel-filter-bg: #1f1f1f;
}

.theme-hybridcloud {
  --panel-filter-bg: var(--color-fill1-2);
}

.#{$query-filter-layout} {
  .#{$query-filter-layout}-inline {
    display: flex;
    justify-content: space-between;
  }
  .#{$query-filter-layout}-left {
    display: flex;
  }
  .#{$query-filter-layout}-addonBefore {
    flex: 0 1 auto;
    margin-right: 8px;
  }
  .#{$query-filter-layout}-toggle {
    margin-bottom: 8px;
  }
  .#{$query-filter-layout}-addonAfter {
    flex: 0 0 auto;
    margin-left: 8px;
  }
  .#{$query-filter-layout}-panel {
    margin-bottom: 8px;
    padding: 16px;
    background-color: var(--panel-filter-bg, var(--color-fill1-2));
  }
  .#{$query-filter-layout}-panel-hidden {
    display: none;
  }
}