/**
 * Decorative/aesthetic styles
 */

// DO NOT ALTER OR REMOVE REGION NAMES. Some of them are used
// to generate code snippets in the documentation.

@use './variables' as *;

/* Default styles */
.ruleGroup,
.rule-hasSubQuery {
  border-color: var(--#{$rqb-var-prefix}border-color);
  border-style: var(--#{$rqb-var-prefix}border-style);
  border-radius: var(--#{$rqb-var-prefix}border-radius);
  background: var(--#{$rqb-var-prefix}background-color);

  .shiftActions {
    & > * {
      background-color: transparent;
      border: none;
      cursor: pointer;
    }
  }
}

/* #region Drag-and-drop styles */
/* Hover styles (drop allowed) */
.dndOver {
  &.rule,
  &.ruleGroup-header:not(.dndGroup .ruleGroup-header) {
    border-bottom-width: var(--#{$rqb-var-prefix}dnd-drop-indicator-width);
    border-bottom-style: var(--#{$rqb-var-prefix}dnd-drop-indicator-style);
    border-bottom-color: var(--#{$rqb-var-prefix}dnd-drop-indicator-color);

    &.dndCopy {
      border-bottom-width: var(--#{$rqb-var-prefix}dnd-drop-indicator-copy-width);
      border-bottom-style: var(--#{$rqb-var-prefix}dnd-drop-indicator-copy-style);
      border-bottom-color: var(--#{$rqb-var-prefix}dnd-drop-indicator-copy-color);
    }
  }

  &.betweenRules {
    border-top-width: var(--#{$rqb-var-prefix}dnd-drop-indicator-width);
    border-top-style: var(--#{$rqb-var-prefix}dnd-drop-indicator-style);
    border-top-color: var(--#{$rqb-var-prefix}dnd-drop-indicator-color);

    &.dndCopy {
      border-top-width: var(--#{$rqb-var-prefix}dnd-drop-indicator-copy-width);
      border-top-style: var(--#{$rqb-var-prefix}dnd-drop-indicator-copy-style);
      border-top-color: var(--#{$rqb-var-prefix}dnd-drop-indicator-copy-color);
    }
  }
}

/* Hover styles (drop not allowed) */
.dndDropNotAllowed {
  cursor: var(--#{$rqb-var-prefix}dnd-drop-not-allowed-cursor);
}

.dndGroup {
  &.rule.dndOver,
  &.ruleGroup:has(> .ruleGroup-header.dndOver) {
    border-width: var(--#{$rqb-var-prefix}dnd-drop-indicator-group-width);
    border-style: var(--#{$rqb-var-prefix}dnd-drop-indicator-group-style);
    border-color: var(--#{$rqb-var-prefix}dnd-drop-indicator-group-color);
    border-radius: var(--#{$rqb-var-prefix}border-radius);

    &.dndCopy {
      border-color: var(--#{$rqb-var-prefix}dnd-drop-indicator-copy-color);
      border-width: var(--#{$rqb-var-prefix}dnd-drop-indicator-copy-width);
      border-style: var(--#{$rqb-var-prefix}dnd-drop-indicator-copy-style);
    }
  }
}

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

  &.dndHidden {
    display: none;
  }

  .queryBuilder-dragHandle {
    cursor: move;
  }

  &.queryBuilder-disabled .queryBuilder-dragHandle {
    cursor: not-allowed;
    opacity: 0.5;
  }
}
/* #endregion */

/* #region Branch styles */
@mixin branch-styles($direction) {
  $before-after: if($direction == rtl, after, before);
  $border-side: if($direction == rtl, right, left);

  .rule,
  .ruleGroup .ruleGroup {
    &::before,
    &::after {
      border-color: var(--#{$rqb-var-prefix}branch-color);
      border-style: var(--#{$rqb-var-prefix}branch-style);
    }

    &:last-child::#{$before-after} {
      border-bottom-#{$border-side}-radius: var(--#{$rqb-var-prefix}branch-radius);
    }
  }

  .betweenRules {
    position: relative;

    &::#{$before-after} {
      border-color: var(--#{$rqb-var-prefix}branch-color);
      border-style: var(--#{$rqb-var-prefix}branch-style);
    }
  }
}

/* LTR */
.queryBuilder-branches:dir(ltr) {
  @include branch-styles(ltr);
}

/* RTL */
.queryBuilder-branches:dir(rtl) {
  @include branch-styles(rtl);
}
/* #endregion */