/*
 Tree view (subfolders, etc.)
 */

$treeview-border-width: 1px !default;
$treeview-indentation-margin: 3rem !default;


.treeview-item {

    border-bottom : $treeview-border-width solid var(--bordercolor-input, $pm-global-border);
	margin-bottom: -$treeview-border-width;

	$arrow-width: .9rem !default;
	$arrow-height: .7rem !default;
	$circle-size: .8rem !default;

	&--moveInside,
	&--moveTop,
	&--moveBottom {
		&::before {
			content: '';
			position: absolute;
		}
	}
	&--moveInside {
		&::before {
			left: -$arrow-width;
			height: 0;
			width: 0;
			border: $arrow-height solid transparent;
			border-left-color: $pm-primary;
			border-left-width: $arrow-width;
		}
	}
	&--moveTop,
	&--moveBottom {
		&::before {
			left: -#{$circle-size/2};
			height: $circle-size;
			width: $circle-size;
			border-radius: 50%;
			background: $pm-primary;
		}
	}
	&--moveInside#{&}--selfGrabbed { // no primary color on the self grabbed element
		&::before {
			border-left-color: $pm-global-muted;
		}
	}
	&--moveTop::before {
		top: -#{$circle-size/2};
	}
	&--moveBottom::before {
		bottom: -#{$circle-size/2};
	}

	&--moveTop::after,
	&--moveBottom::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		height: 1px;
		background: $pm-primary;
	}
	&--moveTop::after {
		top: 0;
	}
	&--moveBottom::after {
		bottom: -1px;
	}
	&--moveInside {
		background-color: var(--bgcolor-highlight, $pm-global-light);
	}

    .treeview-item .treeview-item {
		padding-left: $treeview-indentation-margin;
		&.treeview-item--moveInside {
			background: linear-gradient(to right, transparent 0, transparent #{$treeview-indentation-margin}, var(--bgcolor-highlight, $pm-global-light) #{$treeview-indentation-margin});
			&::before {
				left: calc(-#{$arrow-width} + #{$treeview-indentation-margin});
			}
		}
		&.treeview-item--moveTop,
		&.treeview-item--moveBottom {
			&::before {
				left: calc(-#{$circle-size/2} + #{$treeview-indentation-margin});
			}
		}
		&--moveTop::after,
		&--moveBottom::after {
			left: #{$treeview-indentation-margin};
		}
	}

}





@include respond-to($breakpoint-medium) {
    .treeview-toggle,
    .treeview-actions {
       width: em(100);
    }
}