@import "treegrid";

@mixin valo-tree8($primary-stylename: v-tree8) {

  @include valo-treegrid($primary-stylename);

  $tree-sel-bg: $v-grid-row-selected-background-color;

  .#{$primary-stylename} {
    background-color: transparent;
  }

  .#{$primary-stylename}-row > td {
    background-color: transparent;
    border: 0;
    line-height: 28px;
    > * {
      vertical-align: baseline;
    }
  }

  .#{$primary-stylename}-tablewrapper {
    background-color: transparent;
    border: none;
  }

  .#{$primary-stylename}-row {
    &::before {
      content: "";
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      border-radius: $v-border-radius;
      pointer-events: none;
      border-width: 1px;
    }
  }

  .#{$primary-stylename}-cell {
    position: relative;
  }

  // Selected
  .#{$primary-stylename}-row-selected {

    > .#{$primary-stylename}-cell {
      background: transparent;
    }

    &::before {
      display: block;
      @include valo-gradient($tree-sel-bg);
    }
  }

  .#{$primary-stylename}:focus .#{$primary-stylename}-row-selected.#{$primary-stylename}-row-focused::before {
    border-color: transparent;
    box-shadow: inset 0 0 0 1px valo-font-color($tree-sel-bg);
  }

  // Scroll bar
  .#{$primary-stylename}-scroller-vertical {
    border: none;
  }

  .#{$primary-stylename}-scroller-horizontal {
    border: none;
  }

  .#{$primary-stylename}-header-deco,
  .#{$primary-stylename}-footer-deco,
  .#{$primary-stylename}-horizontal-scrollbar-deco {
    border: none;
    background: transparent;
  }
}