.svg-font-color svg > path {
  fill: var(--ifm-font-color-base);
}

.donut-hole {
  overflow-y: unset !important;
}

.queryBuilder {
  min-width: 420px;
}

li.tabs__item {
  white-space: nowrap;
}

.fui-FluentProvider {
  background-color: transparent !important;
}

.queryBuilder-branches .ruleGroup {
  background: color-mix(in srgb, transparent 80%, var(--surfaces_secondary));
  border-color: var(--borders_secondary);
}

.queryBuilder-branches .rule-fields {
  max-width: 100%;
}

.queryBuilder-branches:dir(ltr) .rule {
  flex-wrap: wrap;
  padding: var(--rqb-spacing);
  margin-left: 20px;
  padding-top: calc(1rem + 20px + (var(--rqb-spacing)*2));
  border-color: var(--borders_secondary);
  border-style: var(--rqb-border-style);
  border-radius: var(--rqb-border-radius);
}

.queryBuilder-branches .rule:before, .queryBuilder-branches .rule:after, .queryBuilder-branches .ruleGroup:before, .queryBuilder-branches .ruleGroup:after, .queryBuilder-branches .betweenRules::before {
  border-color: var(--borders_secondary) !important;
}

.queryBuilder-branches:dir(ltr) .rule:before, .queryBuilder-branches:dir(ltr) .rule:after {
  left: calc(-30px - (var(--rqb-border-width) / 2));
}

.queryBuilder-branches:dir(ltr) .rule::after {
  height: calc(50% + var(--rqb-border-width));
}

.queryBuilder-branches:dir(ltr) .rule::before {
  top: calc(-1 * (var(--rqb-spacing) + var(--rqb-border-width)));
  height: calc(50% + var(--rqb-spacing) + var(--rqb-border-width));
}

.queryBuilder-branches .rule .queryBuilder-dragHandle, .queryBuilder-branches .ruleGroup .queryBuilder-dragHandle {
  color: var(--borders_secondary) !important;
}

.queryBuilder-branches:dir(ltr) .rule .queryBuilder-dragHandle {
  position: absolute;
  left: -20px;
  top: calc(50% - 10px);
  width: 20px;
}

.queryBuilder-branches .rule .rule-cloneRule, .queryBuilder-branches .rule .rule-remove {
  min-width: 96px;
}

.queryBuilder-branches:dir(ltr) .rule .rule-cloneRule, .queryBuilder-branches:dir(ltr) .rule .rule-remove  {
  position: absolute;
  top:var(--rqb-spacing);
  right: var(--rqb-spacing);
}

.queryBuilder-branches:dir(ltr) .rule .rule-cloneRule {
  right: calc(var(--rqb-spacing)*2 + 95px);
}

/* Styles to use when validation option is inabled */

/* Styles for when "Use validation" option is selected */
.validateQuery .queryBuilder .ruleGroup.queryBuilder-invalid {
  /* Color invalid groups */
  background-color: color-mix(in srgb, rebeccapurple, transparent 60%);
}

/* Bold the "+ Rule" button if the group has no child rules or groups */
.validateQuery .queryBuilder .ruleGroup.queryBuilder-invalid .ruleGroup-addRule {
  font-weight: bold !important;
}

/* Show body for invalid groups */
.validateQuery .queryBuilder .ruleGroup.queryBuilder-invalid > .ruleGroup-body {
  display: block;
}

/* Message to user about empty groups */
.validateQuery .queryBuilder .ruleGroup.queryBuilder-invalid > .ruleGroup-body::after {
  content: 'Empty groups are considered invalid. Avoid them by using addRuleToNewGroups.';
  color: var(--content_invert);
}

/* Purple background for empty text fields in invalid rules */
.validateQuery .queryBuilder .rule.queryBuilder-invalid .rule-value {
  background-color: color-mix(in srgb, rebeccapurple, transparent 60%);
}

/* Placeholder color for invalid rule inputs */
.validateQuery .queryBuilder .rule.queryBuilder-invalid .rule-value::placeholder {
  color: color-mix(in srgb, rebeccapurple, black 30%);
}

/* Styles for when "Use validation" option is selected (dark theme variations) */
html[data-theme='dark'] .validateQuery .queryBuilder .rule.queryBuilder-invalid .rule-value::placeholder {
  color: color-mix(in srgb, rebeccapurple, var(--content_invert) 30%);
}