@import '~@opuscapita/oc-cm-common-styles/styles/colors';

/* Styling the TreeView based on OC styleguide */
// Custom RCTree handleIcons instead of using the defaults:

// You can add more FA icons using e.g.:
// http://astronautweb.co/snippet/font-awesome/
// as reference

/* ## CHEVRONs ## */
// chevron-left: "\f053"      <
// chevron-right: "\f054"     >
// chevron-up: "\f077"        ^
// chevron-down: "\f078"      v

.oc-react-tree li.chevron {
  span.rc-tree-switcher {
    background-image: none;
    position: relative;
  }

  span.rc-tree-switcher_open:before {
    content: "\f054"; // chevron-right
    font-family: "FontAwesome";
    position: absolute;
  }

  span.rc-tree-switcher_close:before {
    content: '\f078'; // chevron-down
    font-family: "FontAwesome";
    position: absolute;
  }
}

/* ## ARROWs ## */
// fa-arrow-left"\f060"
// fa-arrow-right"\f061"
// fa-arrow-up"\f062"
// fa-arrow-down"\f063"
.oc-react-tree li.arrow {
  span.rc-tree-switcher {
    background-image: none;
    position: relative;
  }

  span.rc-tree-switcher_open:before {
    content: "\f061"; // arrow-right
    font-family: "FontAwesome";
    position: absolute;
  }

  span.rc-tree-switcher_close:before {
    content: '\f063'; // arrow-down
    font-family: "FontAwesome";
    position: absolute;
  }
}

/* Caret :
 *  fa-caret-down   "\f0d7"
 *  fa-caret-up     "\f0d8"
 *  fa-caret-left   "\f0d9"
 *  fa-caret-right  "\f0da"
*/
.oc-react-tree li.carets {
  span.rc-tree-switcher {
    background-image: none;
    position: relative;
  }

  .rc-tree-switcher-noop,
  span.rc-tree-switcher_open,
  span.rc-tree-switcher_close {
    font-size: 18px;
    width: 12px;
    text-align: center;
    margin-top: 2px;
    margin-right: 5px;
  }
  span.rc-tree-switcher_open:before {
    content: "\f0d7"; // caret-down
    font-family: "FontAwesome";
  }

  span.rc-tree-switcher_close:before {
    content: "\f0da"; // caret-right
    font-family: "FontAwesome";
  }
}

.rc-tree {
  .rc-tree-treenode-disabled {
    > span:not(.rc-tree-switcher) {
      cursor: default;
      color: inherit;
    }
  }
}

.rc-tree {
  $checkbox-width: 1.6rem;
  padding: 0;


  li {
    &.rc-tree-treenode-checkbox-checked > span > span {
      .tree-checkbox:before {
        content: "\f00c"; // check
      }
    }
    &.rc-tree-treenode-checkbox-indeterminate > span > span {
      .tree-checkbox:before {
        content: "\f068" // minus
      }
    }

    .rc-tree-node-content-wrapper {
      padding: 0;
      &.draggable {
        &:hover {
          &:after {
            font-family: "FontAwesome";
            content: "\f07d"; // fa-arrows-v - vertical arrows
            margin-left: 20px;
            padding-right: 10px;
            color: $oc-color-primary-azure;
          }
        }
      }
    }
    
    &.drag-over {
      > .draggable {
        background: $oc-color-primary-orange;
        border: none;
      }
    }
    &.drag-over-gap-bottom {
      > .draggable {
        border-bottom: 2px solid $oc-color-primary-orange;
      }
    }
    &.drag-over-gap-top {
      > .draggable {
        border-top: 2px solid $oc-color-primary-orange;
      }
    }
  }

  .tree-checkbox {
    border: 1px solid $oc-color-gray;
    height: $checkbox-width;
    width: $checkbox-width;
    cursor: pointer;
    position: relative;
    font-family: "FontAwesome";
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    &.disabled {
      background-color: $oc-color-select-hover;
      cursor: default;
    }
  }

  .rc-tree-node-selected {
    background-color: transparent;
    border: none;
    .rc-tree-title {
      border: none;
      background-color: $oc-color-site-background;
      opacity: 1;
      display: inline-block;
    }
  }

  > li:first-child {
    margin-top: 0;
  }
  li {
    margin: 3px 0;
    span.rc-tree-checkbox {
      display: none;
    }
  }
  .rc-tree-title {
    padding: 0 10px;
  }
  .rc-tree-iconEle.rc-tree-icon__customize {
    cursor: default;
  }
}