@import './src/scss/_imports/_global-import';

//colors
$black_1_5: rgba(0,0,0,.015);
$color_mountain_mist_approx: #999;
$color_gallery_approx: #eee;
$color_santas_gray_approx: #94a0b4;
$black: #000;
$color_tahiti_gold_approx: #df8505;
$color_indochine_approx: #c67605;
$white: #fff;
$color_pizazz_approx: #f89406;
$color_frangipani_approx: #fddfb3;
$color_yellow_orange_approx: #faa937;
$color_silver_chalice_approx: #aaa;
$color_alto_approx: #ddd;
$color_wild_sand_approx: #f5f5f5;
$color_cornflower_blue_approx: #66afe9;
$black_7_5: rgba(0,0,0,.075);
$color_cornflower_blue_60_approx: rgba(102,175,233,.6);
$color_silver_approx: #bebebe;
$color_mine_shaft_approx: #333;
$color_nobel_approx: #b3b3b3;

//fonts
$font_0: Monaco;
$font_1: Menlo;
$font_2: Consolas;
$font_3: Courier New;
$font_4: monospace;

//@extend-elements
//original selectors
//.tree li:after, .tree li:before
%extend_1 {
	content: '';
	left: -20px;
	position: absolute;
	right: auto;
}

//original selectors
//.tree li.parent_li >span:hover, .tree li.parent_li >span:hover +ul li span
%extend_2 {
	background: $color_gallery_approx;
	border: 1px solid $color_santas_gray_approx;
	color: $black;
}

//original selectors
//.md-editor .md-footer, .md-editor >.md-header
%extend_3 {
	display: block;
	padding: 6px 4px;
	background: $color_wild_sand_approx;
	margin: 0;
}

//original selectors
//.md-editor.md-fullscreen-mode .md-input, .md-editor.md-fullscreen-mode .md-preview
%extend_4 {
	margin: 0 auto!important;
	height: 100%!important;
	font-size: 20px!important;
	padding: 20px!important;
	color: $color_mountain_mist_approx;
	line-height: 1.6em!important;
	resize: none!important;
	//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
	box-shadow: none!important;
	background: $white!important;
	border: 0!important;
}


.tree {
	min-height: 20px;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 4px;
	li {
		list-style-type: none;
		margin: 0;
		padding: 5px;
		position: relative;
		&:after {
			@extend %extend_1;
			border-top: 1px solid $color_mountain_mist_approx;
			height: 20px;
			top: 18px;
			width: 25px;
		}
		&:before {
			@extend %extend_1;
			border-left: 1px solid $color_mountain_mist_approx;
			bottom: 50px;
			height: 100%;
			top: -11px;
			width: 1px;
			//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
			transition: "border-color 0.1s ease 0.1s";
		}
		span {
			border: 1px dotted $color_mountain_mist_approx;
			//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
			border-radius: 5px;
			display: inline-block;
			padding: 3px 8px;
			text-decoration: none;
			//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
			transition: color .2s ease .1s,background-color .2s ease .1s,border-color .3s ease .2s;
		}
		&:last-child::before {
			height: 30px;
		}
		&.parent_li > span {
			cursor: pointer;
			padding: 7px;
			&:hover {
				@extend %extend_2;
				background-color: $color_tahiti_gold_approx;
				border: 1px solid $color_indochine_approx;
				color: $white;
				+ ul {
					li::before {
						border-left-color: $color_pizazz_approx;
					}
					li::after {
						border-top-color: $color_pizazz_approx;
					}
					li span {
						@extend %extend_2;
						background: $color_frangipani_approx!important;
						border: 1px solid $color_yellow_orange_approx;
						color: $black;
					}
				}
			}
		}
	}
	> ul {
		padding-left: 0;
		> li::after {
			border: 0;
		}
		> li:before {
			border: 0;
		}
	}
	.fa {
		&.icon-minus-sign:before {
			content: "\f056"!important;
		}
		&.icon-plus-sign:before {
			content: "\f055"!important;
		}
	}
	ul ul {
		padding-left: 34px;
		padding-top: 10px;
		li:hover {
			background: $black_1_5;
		}
	}
}