@mixin base-treetable($primaryStyleName : v-treetable) {

.#{$primaryStyleName}-treespacer {
    display: inline-block;
    background: transparent;
    height: 10px;
    /* defines the amount of indent per level */
    width: 18px;
    position: absolute;
    left: 0;
    top: 5px;
}

.#{$primaryStyleName}-node-closed {
    background: url(../treetable/img/arrow-right.png) right top no-repeat;
}

.#{$primaryStyleName}-node-open {
    background: url(../treetable/img/arrow-down.png) right top no-repeat;
}

.#{$primaryStyleName} .v-checkbox {
	display: inline-block;
	padding-bottom: 4px;
}

.#{$primaryStyleName} .v-table-row .v-table-cell-content,
.#{$primaryStyleName} .v-table-row-odd .v-table-cell-content {
    position: relative;
    z-index: 10;
}

.#{$primaryStyleName} .v-table-cell-wrapper {
	position: relative;
}

.#{$primaryStyleName} .v-table-body .v-table-table .v-table-row-animating {
	zoom:1;
	z-index:1;
}

.#{$primaryStyleName} .v-table-body .v-table-table .v-table-row-animating,
.#{$primaryStyleName} .v-table-body .v-table-table .v-table-row-animating .v-table-cell-content {
    background:transparent;
}

.#{$primaryStyleName}-animation-clone {
	border-spacing: 0;
	zoom:1;
}

div.#{$primaryStyleName}-animation-clone-wrapper {
	position: absolute;
    z-index: 2;
    background-color:#fff;
}

div.#{$primaryStyleName}-animation-clone-wrapper table.#{$primaryStyleName}-animation-clone {
    background-color:#fff;
}

div table.#{$primaryStyleName}-animation-clone tr.v-table-row,
div table.#{$primaryStyleName}-animation-clone tr.v-table-row-odd,
div table.#{$primaryStyleName}-animation-clone tr.v-table-row td.v-table-cell-content,
div table.#{$primaryStyleName}-animation-clone tr.v-table-row-odd td.v-table-cell-content {
	visibility: visible;
}

}