// Variables
$rqb-bg: #1c1e1f !default;
$rqb-x-spacing: 4px !default;
$rqb-y-spacing: 8px !default;
$rqb-background-color: #141414 !default;
$rqb-gray-text-color: #ffffff4d !default;
$rqb-text-color: #ffffff !default;
$rqb-border-color: #4c4c5c !default;
$rqb-border-style: none !default;
$rqb-border-radius: 8px !default;
$rqb-border-width: 1px !default;
$rqb-dnd-hover-border-bottom-color: rebeccapurple !default;
$rqb-dnd-hover-border-bottom-style: dashed !default;
$rqb-dnd-hover-border-bottom-width: 2px !default;
$rqb-input-border-color: #2d2d2d !default;
$rqb-input-padding: 2px !default;
$rqb-font-size: 12px !default;

// Wrapper style
.queryBuilder {
  background-color: $rqb-bg;
  font-size: $rqb-font-size;
}
// Default styles
.oddRuleGroup {
  background: $rqb-background-color;
}
.evenRuleGroup {
  background: $rqb-bg;
}
.ruleGroup {
  display: flex;
  flex-direction: column;
  row-gap: $rqb-x-spacing;
  padding: $rqb-y-spacing + $rqb-x-spacing;
  border-color: $rqb-border-color;
  border-style: $rqb-border-style;
  border-radius: $rqb-border-radius;
  border-width: $rqb-border-width;
  color: $rqb-text-color;

  input,
  select {
    background-color: $rqb-background-color !important;
    color: white !important;
    border-color: $rqb-input-border-color !important;
    padding-top: $rqb-input-padding;
    padding-bottom: $rqb-input-padding;
    min-height: 0;
    border-radius: 0;
    outline: none !important;
  }

  input:disabled,
  select:disabled {
    opacity: 0.6;
  }

  .ruleGroup-body {
    display: flex;
    flex-direction: column;
    row-gap: $rqb-x-spacing;

    input.rule-value[type='checkbox']::after {
      content: 'false';
    }

    input.rule-value[type='checkbox']:checked::after {
      content: 'true';
    }

    &:empty {
      display: none;
    }
  }

  .ruleGroup-header {
    display: flex;
    column-gap: $rqb-y-spacing;
    align-items: center;
  }
  .rule {
    border: 1px solid $rqb-border-color;
    padding: $rqb-x-spacing;
    display: flex;
    flex-direction: column;
    row-gap: $rqb-x-spacing;

    & > div {
      display: flex;
      column-gap: $rqb-y-spacing;
      align-items: center;
    }

    .rule-fieldType,
    .rule-valueSource,
    .rule-operators {
      max-width: 140px;
      min-width: 75px;
      width: 100%;
      padding-left: 4px;
      padding-right: 4px;
    }

    span.rule-value {
      background-color: $rqb-background-color !important;
      color: white !important;
      border-color: $rqb-input-border-color !important;
      padding-top: $rqb-input-padding;
      padding-bottom: $rqb-input-padding;
      min-height: 0;
      border-radius: 0;
      font-size: 12px;
      outline: none !important;
      display: flex;

      > label {
        display: inline-flex;
        column-gap: $rqb-x-spacing;
        margin-right: $rqb-y-spacing;
        min-height: 0;
        font-size: 12px;
      }
    }
  }

  .drop-container {
    border: 1px dashed $rqb-border-color;
    text-align: center;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
  }

  .drop-container-disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .ruleGroup-cloneGroup,
  .ruleGroup-remove,
  .ruleGroup-lock,
  .rule-cloneRule,
  .rule-remove,
  .rule-lock {
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-top: $rqb-input-padding;
    padding-bottom: $rqb-input-padding;
  }

  .ruleGroup-addRule,
  .ruleGroup-addGroup {
    border-color: $rqb-input-border-color !important;
    padding-top: $rqb-input-padding;
    padding-bottom: $rqb-input-padding;
  }

  .ruleGroup-addRule {
    margin-left: auto;
  }

  .btn:disabled {
    border-color: transparent;
  }

  .ruleGroup-notToggle {
    font-size: 12px;
    display: flex;

    input {
      margin-right: 4px;
    }
  }
}

// Hover styles
[data-inlinecombinators='disabled'] {
  .dndOver {
    &.rule,
    &.ruleGroup-header {
      border-bottom-width: $rqb-dnd-hover-border-bottom-width;
      border-bottom-style: $rqb-dnd-hover-border-bottom-style;
      border-bottom-color: $rqb-dnd-hover-border-bottom-color;
      padding-bottom: $rqb-x-spacing;
    }
  }
}
[data-inlinecombinators='enabled'] {
  .dndOver {
    &.rule:last-child,
    &.ruleGroup-header,
    &.rule + .betweenRules,
    &.betweenRules {
      border-bottom-width: $rqb-dnd-hover-border-bottom-width;
      border-bottom-style: $rqb-dnd-hover-border-bottom-style;
      border-bottom-color: $rqb-dnd-hover-border-bottom-color;
      padding-bottom: $rqb-x-spacing;
    }
  }
}

// Drag styles
.ruleGroup,
.rule {
  &.dndDragging {
    opacity: 0.5;
  }

  .queryBuilder-dragHandle {
    cursor: move;
  }
}
// When drag-and-drop is disabled, hide all drag handles
[data-dnd='disabled'] .queryBuilder-dragHandle {
  display: none;
}
