// Basic
$rqb-spacing: 0.5rem !default;
$rqb-background-color: rgba(0, 75, 183, 0.2) !default;
$rqb-border-color: #8081a2 !default;
$rqb-border-style: solid !default;
$rqb-border-radius: 0.25rem !default;
$rqb-border-width: 1px !default;

// Drag-and-drop
$rqb-dnd-hover-border-bottom-color: rebeccapurple !default;
$rqb-dnd-hover-copy-border-bottom-color: #669933 !default;
$rqb-dnd-hover-border-bottom-style: dashed !default;
$rqb-dnd-hover-border-bottom-width: 2px !default;

// Branches
$rqb-branch-indent: $rqb-spacing !default;
$rqb-branch-color: $rqb-border-color !default;
$rqb-branch-width: $rqb-border-width !default;
$rqb-branch-radius: $rqb-border-radius !default;
$rqb-branch-style: $rqb-border-style !default;

// Default styles
.ruleGroup {
  display: flex;
  flex-direction: column;
  gap: $rqb-spacing;
  padding: $rqb-spacing;
  border-color: $rqb-border-color;
  border-style: $rqb-border-style;
  border-radius: $rqb-border-radius;
  border-width: $rqb-border-width;
  background: $rqb-background-color;

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

    &:empty {
      display: none;
    }
  }

  .ruleGroup-header,
  .rule {
    display: flex;
    gap: $rqb-spacing;
    align-items: center;
  }

  .rule {
    .rule-value:has(.rule-value-list-item) {
      display: flex;
      gap: $rqb-spacing;
      align-items: baseline;
    }
  }
}

// #region Drag-and-drop

// 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-spacing;

      &.dndCopy {
        border-bottom-color: $rqb-dnd-hover-copy-border-bottom-color;
      }
    }
  }
}
[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-spacing;

      &.dndCopy {
        border-bottom-color: $rqb-dnd-hover-copy-border-bottom-color;
      }
    }
  }
}

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

  .queryBuilder-dragHandle {
    cursor: move;
  }
}
// #endregion

// #region Branches
.queryBuilder-branches {
  .ruleGroup-body {
    margin-left: calc(2 * #{$rqb-branch-indent});
  }

  .rule,
  .ruleGroup .ruleGroup {
    position: relative;

    &::before,
    &::after {
      content: '';
      width: $rqb-branch-indent;
      left: calc(-#{$rqb-branch-indent} - #{$rqb-branch-width});
      border-color: $rqb-branch-color;
      border-style: $rqb-branch-style;
      border-radius: 0;
      position: absolute;
    }

    &::before {
      top: -$rqb-spacing;
      height: calc(50% + #{$rqb-spacing});
      border-width: 0 0 $rqb-branch-width $rqb-branch-width;
    }

    &:last-child::before {
      border-bottom-left-radius: $rqb-branch-radius;
    }

    &::after {
      top: 50%;
      height: 50%;
      border-width: 0 0 0 $rqb-branch-width;
    }

    &:last-child::after {
      display: none;
    }
  }

  .ruleGroup .ruleGroup {
    &::before,
    &::after {
      left: calc(calc(-#{$rqb-branch-indent} - #{$rqb-branch-width}) - #{$rqb-border-width});
    }

    &::before {
      top: calc(-#{$rqb-spacing} - #{$rqb-border-width});
      height: calc(50% + #{$rqb-spacing} + #{$rqb-border-width});
    }

    &::after {
      height: calc(50% + #{$rqb-border-width});
    }
  }

  .betweenRules {
    position: relative;

    &::before {
      content: '';
      width: $rqb-branch-indent;
      left: calc(-#{$rqb-branch-indent} - #{$rqb-branch-width});
      border-color: $rqb-branch-color;
      border-style: $rqb-branch-style;
      border-radius: 0;
      position: absolute;
      top: -$rqb-spacing;
      height: calc(100% + #{$rqb-spacing});
      border-width: 0 0 0 $rqb-branch-width;
    }
  }
}
// #endregion