$v-tree-row-height: round($v-unit-size/1.3) !default;
$v-tree-animations-enabled: true !default;
$v-tree-expand-animation-enabled: false !default;


@if $v-tree-expand-animation-enabled {
  @include keyframes(v-valo-tree-node-open) {
    0% {
      max-height: 0;
    }
    100% {
      max-height: $v-tree-row-height * 10;
    }
  }

  @include keyframes(v-valo-tree-node-close) {
    0% {
      max-height: $v-tree-row-height * 10;
    }
    100% {
      max-height: 0;
    }
  }
}


@mixin v-valo-tree ($primary-stylename: v-tree) {
  
  .#{$primary-stylename} {
    position: relative;
    white-space: nowrap;
    @include user-select(none);;
    
    &:focus {
      outline: none;
    }
  }
  
  .#{$primary-stylename}-node {
    &:before {
      content: "";
      position: absolute;
      display: inline-block;
      z-index: 3;
      width: 1.9em;
      height: $v-tree-row-height;
      cursor: pointer;

      .v-ie8 & {
        content: "+";
        position: static;
        margin-left: -1.9em;
        //background: red;
        vertical-align: top;
        @include v-valo-tree-collapsed-icon-style;
        text-align: center;
      }
    }

    .v-ie8 & {
      padding-left: 1.9em;
    }
  }
    
  .#{$primary-stylename}-node-caption {
    height: $v-tree-row-height;
    line-height: $v-tree-row-height - 1px;
    overflow: hidden;
    white-space: nowrap;
    
    & > div {
      display: inline-block;
      width: 100%;
      position: relative;
      z-index: 2;

      &:before {
        @include v-valo-tree-collapsed-icon-style;
        display: inline-block;
        width: .5em;
        text-align: center;
        margin: 0 .6em 0 .8em;

        @if $v-tree-animations-enabled {
          @include transition(all 100ms);
        }

        .v-ie8 & {
          display: none;
        }
      }
    }
    
    span {
      padding-right: $v-tree-row-height;
      cursor: pointer;
      display: inline-block;
      // Allow to click on the whole row (almost, at least the right side part)
      width: 100%;

      // IE does strange things when the width is wider than the parent
      .v-ie & {
        width: auto;
      }
    }

    .v-icon {
      padding-right: 0;
      width: auto;
      min-width: 1em;
    }

    &:after {
      content: "";
      display: inline-block;
      vertical-align: top;
      position: absolute;
      z-index: 1;
      left: 0;
      width: 100%;
      height: $v-tree-row-height;
      border-radius: $v-border-radius;
      opacity: 0;

      @if $v-tree-animations-enabled {
        @include transition(opacity 120ms);
      }

      .v-ie8 & {
        content: none;
      }
    }

    .v-ie8 & {
      display: inline-block;
    }
  }
  
  .#{$primary-stylename}-node-expanded > .#{$primary-stylename}-node-caption > div:before {
    @include v-valo-tree-expanded-icon-style;

    @if $v-tree-animations-enabled {
      @include transform(rotate(90deg));
      @include v-valo-tree-collapsed-icon-style;
    }
  }

  .v-ie8 & .#{$primary-stylename}-node-expanded:before {
    @include v-valo-tree-expanded-icon-style(true);
  }



  .#{$primary-stylename}-node-focused {
    // This a v-tree-node-caption element
    &:after {
      opacity: 1;
      border: 1px solid v-valo-focus-color();
    }
  }
  
  
  
  .#{$primary-stylename}-node-selected {
    color: v-valo-font-color(v-valo-selection-color(), 0.9);
    text-shadow: v-valo-button-text-shadow(v-valo-selection-color(), $v-bevel-depth);

    &:after {
      opacity: 1;
      @include v-valo-gradient(v-valo-selection-color());
      border: none;

      .v-ie8 & {
        //visibility: visible;
      }
    }

    .v-ie8 & {
      @include v-valo-gradient(v-valo-selection-color());
    }
  }
  
  .#{$primary-stylename}-node-children {
    padding-left: round($v-unit-size/2);

    .v-ie8 & {
      padding-left: 0;
    }
  }

  @if $v-tree-expand-animation-enabled {
    .#{$primary-stylename}-node-children[style*="display: none"] {
      @include animation(v-valo-tree-node-close 400ms ease-out forwards);
      display: block !important;
    }

    .#{$primary-stylename}-node-expanded > .#{$primary-stylename}-node-children {
      @include animation(v-valo-tree-node-open 400ms ease-in);
    }
  }



  // Drag'n'drop styles

  .#{$primary-stylename}-node-drag-top:before,
  .#{$primary-stylename}-node-drag-bottom:after {
    content: "\2022";
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: v-valo-focus-color();
    font-size: $v-font-size * 2;
    line-height: 2px;
    color: v-valo-focus-color();
    text-indent: round($v-font-size/-4);
    text-shadow: 0 0 1px $v-app-background-color, 0 0 1px $v-app-background-color;
  }

  .#{$primary-stylename}-node-caption-drag-center {
    box-shadow: 0 0 0 2px v-valo-focus-color();
    position: relative;
    border-radius: $v-border-radius;

    .v-ie8 & {
      outline: 2px solid v-valo-focus-color();
    }
  }

  .v-ff & .#{$primary-stylename}-node-drag-top:before,
  .v-ff & .#{$primary-stylename}-node-drag-bottom:after {
    line-height: 1px;
  }

  .v-ie8 & .#{$primary-stylename}-node-drag-top:before,
  .v-ie8 & .#{$primary-stylename}-node-drag-bottom:after {
    line-height: 0;
  }
}


@mixin v-valo-tree-collapsed-icon-style {
  content: "\f0da";
  font-family: FontAwesome;
}

@mixin v-valo-tree-expanded-icon-style ($force: false) {
  @if $v-tree-animations-enabled == false or $force {
    content: "\f0d7";
    font-family: FontAwesome;
  }
}