/*!
 * jQuery QueryBuilder 2.7.0
 * Copyright 2014-2023 Damien "Mistic" Sorel (http://www.strangeplanet.fr)
 * Licensed under MIT (https://opensource.org/licenses/MIT)
 */
@import "bootstrap/functions"; //***
@import "variables"; //***
@import "bootstrap/variables-dark"; //***
@import "bootstrap/mixins"; //***
@import "adminlte/mixins"; //***

// $theme-name: default !default;
:root {
  --qb-group-background-color: rgba(0, 0, 0, .015);
  --qb-group-border-color: #{$border-color};
  --qb-rule-background-color: rgba(0, 0, 0, .015);
  --qb-rule-border-color: #{$border-color};
  --qb-error-border-color: #{var(--#{$prefix}form-invalid-color)}; //***
  --qb-error-background-color: transparent;
  --qb-ticks-color: #CCC;
}

// common
$item-vertical-spacing: 4px !default;
$item-border-radius: 5px !default;

// groups
$group-border: 1px solid #{var(--qb-group-border-color)} !default;
$group-padding: 10px !default;

// rules
$rule-border: 1px solid #{var(--qb-rule-border-color)} !default;
$rule-padding: 5px !default;
// scss-lint:disable ColorVariable
$rule-value-separator: 1px solid #DDD !default;

// errors
$error-icon-color: #{var(--#{$prefix}form-invalid-color)} !default; //***

// ticks
$ticks-width: 2px !default;
$ticks-position: 5px, 10px !default;


// ABSTRACTS
%base-container {
  position: relative;
  margin: $item-vertical-spacing 0;
  border-radius: $item-border-radius;
  padding: $rule-padding;
  border: $rule-border;
  background: var(--qb-rule-background-color);
}

%rule-component {
  display: inline-block;
  margin: 0 5px 0 0;
  vertical-align: middle;
}

.query-builder {

  // GROUPS
  .rules-group-container {
    @extend %base-container;

    padding: $group-padding;
    padding-bottom: #{$group-padding - $item-vertical-spacing};
    border: $group-border;
    background: var(--qb-group-background-color);
  }

  .rules-group-header {
    margin-bottom: $group-padding;

    .group-conditions {
      .btn.readonly:not(.active),
      input[name$='_cond'] {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap;
      }

      .btn.readonly {
        border-radius: 3px;
      }
    }
  }

  .rules-list {
    list-style: none;
    padding: 0 0 0 #{nth($ticks-position, 1) + nth($ticks-position, 2)};
    margin: 0;
  }

  // RULES
  .rule-container {
    @extend %base-container;

    .rule-filter-container,
    .rule-operator-container,
    .rule-value-container {
      @extend %rule-component;
    }
  }

  .rule-value-container {
    border-left: $rule-value-separator;
    padding-left: 5px;

    label {
      margin-bottom: 0;
      font-weight: normal;

      &.block {
        display: block;
      }
    }

    select,
    input[type='text'],
    input[type='number'] {
      padding: $input-padding-y $input-padding-x;
    }
  }

  // ERRORS
  .error-container {
    @extend %rule-component;
    display: none;
    //*** cursor: help;
    color: $error-icon-color;
  }

  .has-error {
    background-color: var(--qb-error-background-color);
    // border-color: var(--qb-error-border-color);

    .error-container {
      display: inline-block !important;
    }
  }

  // TICKS
  .rules-list>* {
    &::before,
    &::after {
      content: '';
      position: absolute;
      left: #{-1 * nth($ticks-position, 2)};
      width: nth($ticks-position, 2);
      height: calc(50% + #{$item-vertical-spacing});
      border-color: var(--qb-ticks-color);
      border-style: solid;
    }

    &::before {
      top: #{-2 * $ticks-width};
      border-width: 0 0 $ticks-width $ticks-width;
    }

    &::after {
      top: 50%;
      border-width: 0 0 0 $ticks-width;
    }

    &:first-child::before {
      top: #{-$group-padding - $ticks-width};
      height: calc(50% + #{$group-padding + $item-vertical-spacing});
    }

    &:last-child::before {
      border-radius: 0 0 0 #{2 * $ticks-width};
    }

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

// plugins/filter-description
:root {
  --qb-description-background-color: #D9EDF7;
  --qb-description-border-color: #BCE8F1;
  --qb-description-text-color: #31708F;
}

$description-border: 1px solid #{var(--qb-description-border-color)};

.query-builder p.filter-description {
  margin: $rule-padding 0 0 0;
  background: var(--qb-description-background-color);
  border: $description-border;
  color: var(--qb-description-text-color);
  border-radius: $item-border-radius;
  padding: #{$rule-padding * .5} $rule-padding;
  font-size: .8em;
}

// plugins/invert
.query-builder {
  .rules-group-header [data-invert] {
    margin-left: 5px;
  }
}

// $theme-name: dark;
@include dark-mode () {
  :root {
    --qb-group-background-color: rgba(50, 70, 80, .5);
    --qb-group-border-color: #{$border-color-dark};
    --qb-rule-background-color: rgba(40, 40, 40, .9);
    --qb-rule-border-color: #{$border-color-dark};
    --qb-error-border-color: #800;
    --qb-error-background-color: #322;
    --qb-ticks-color: #222;

    --qb-description-background-color: rgba(0, 170, 255, .2);
    --qb-description-text-color: #AAD1E4;
    --qb-description-border-color: #346F7B;
  }
}