// ********************************************
// container definition
$tree-list: #{$prefix}-tree-list;
$tree-item: #{$prefix}-tree-item;
$rz-normal: #{$prefix}-tv-row-size-normal;
$rz-compact: #{$prefix}-tv-row-size-compact;
$normal: 36px;
$compact: 28px;

$dsicon: #{$prefix}-icon;

// selects the duplicated item when dragging
// this works because duplicate item always appends to body by default
body > .#{$tree-item} {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.#{$tree-item} {
  color: color(neutral, 800);
  display: flex;
  align-items: center;
  position: relative;
  background-color: color(neutral, 000);
  padding: 0 space(xxs);
  min-height: $normal;

  &--fixed-height {
    height: 36px;
    &-compact {
      height: 28px;
    }
  }

  &__value--wrap-all {
    max-width: 100%;
    // hyphens seems to not be working well with break-all
    // -webkit-hyphens: auto;
    // -moz-hyphens: auto;
    // -ms-hyphens: auto;
    // hyphens: auto;
    word-break: break-all;
  }
  &__value--truncate {
    white-space: nowrap;
  }

  &-children-count-displayer {
    color: color(neutral, 500);
  }
  &--valid-drop-in:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid color(brand-primary, 600);
  }

  &--invalid-drop-in:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid color(danger, 900);
  }

  .#{$tree-item}__value {
    min-width: 0;
    width: 100%;
    margin: space(xs) 0;
    margin-top: space(xs) * 1.5;
    .tree-item-value {
      margin-right: 2px;
    }
    &--truncate {
      height: 16px;
    }
  }

  &__addons {
    display: flex;
    align-items: center;
    align-self: flex-start;
    height: $normal;
    margin-right: space(xxs) * 0.5;
    .#{$dsicon} {
      @include icon-color(color(brand-primary, 800));
    }
  }

  &.selected {
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 1px solid color(brand-primary, 500);
      pointer-events: none;
    }
    background-color: color(brand-primary, 200);
  }

  &.drag-overlay {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    padding-right: space(xs);
  }

  &--dragging {
    background-color: color(neutral, 080);
    color: color(neutral, 500);
    .#{$dsicon} {
      @include icon-color(color(neutral, 500));
    }
  }

  .drag-handle {
    position: relative;
    transition: duration(fast) easing(base);
    align-items: center;
    display: flex;
    height: 24px;
    visibility: visible;
    opacity: 1;
    margin-left: 8px;
    outline: none;
    cursor: grab;
    &[data-isactive='true'],
    &[data-isdragoverlay='true'] {
      cursor: grabbing;
    }
    &.focuseable:focus:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 2px solid color(brand-primary, 700);
      pointer-events: none;
    }
  }
  .expandable-arrow {
    margin-left: 8px;
    width: 16px;
    height: 16px;
  }
  &-checkbox {
    width: 16px;
    height: 16px;
  }
  &-checkbox,
  &-radio {
    margin-left: 8px;
  }
  &-radio {
    padding-bottom: 0;
  }

  &.can-group-over {
    .#{$tree-item}__value {
      font-weight: bold;
    }
  }

  .#{$tree-item}-content {
    display: flex;
    flex: 1;
    min-width: 0;
  }

  .tree-item-icon {
    margin-right: space(xxs);
    width: 16px;
    height: 16px;
    color: color(brand-primary, 800);
  }

  .tree-item-radio {
    padding-bottom: 0;
  }

  &.hover {
    //Update from mixins when the correct states story comes
    background-color: color(brand-primary, 200);

    &.selected {
      background-color: color(brand-primary, 200);
    }
  }

  &:focus {
    outline: none;
    box-shadow: unset;
    border-radius: 0px;
    z-index: 1;
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 2px solid color(brand-primary, 700);
      pointer-events: none;
    }
    &.selected {
      outline: unset;
    }
  }

  .toolbar-trigger {
    margin-top: space(xxs);
  }
}

.#{$tree-list} {
  // overrides default browser ul
  list-style-type: none;
  margin: 0;
  padding: 0;

  min-width: 240px;

  &.#{$rz-compact} {
    .#{$tree-item} {
      min-height: $compact;
      &__addons {
        height: $compact;
      }
      &__value {
        margin: 0;
        margin-top: 4px;
      }
    }
    .toolbar-trigger {
      margin-top: 0;
    }
  }
}

.#{$tree-list}-no-items {
  display: flex;
  justify-content: center;
  padding-top: space(m);
  height: 100%;
  width: 100%;
}

.tree-text-highlight {
  font-weight: bold;
  background-color: color(warning, 600);
}