@mixin o-tools {
	.o-tools-breadcrumb{
		$breadcrumb-background: $o-dark-background-color;
		$breadcrumb-background-active: $o-button-blue;
		$breadcrumb-color: $v-font-color;
		$breadcrumb-height: $v-unit-size;

		width: 100%;
		height: $breadcrumb-height;

		> div {
			display: inline-block;
			overflow: hidden;
			border-radius: $v-border-radius;
		}

		* {
			text-decoration: none;
			outline: none;
			display: block;
			float: left;
			font-size: $v-font-size;
			font-weight: 600;
			line-height: $breadcrumb-height;
			white-space: nowrap;
		}

		> div > a, > div > span {

			padding: 0 10px 0 26px;
			position: relative;
			background: $breadcrumb-background;
			color: $breadcrumb-color;
			transition: all 0.5s;

			span {
				overflow: hidden;
				text-overflow: ellipsis;
			}

			&:first-child {
				padding-left: 13px;
				border-radius: $v-border-radius 0 0 $v-border-radius;
			}
			&:last-child {
				border-radius: 0 $v-border-radius $v-border-radius 0;
				padding-right: 13px;
			}

			&.o-tools-breadcrumb-active{
				background: $breadcrumb-background-active;
				color: white;
				&:after {
					background: $breadcrumb-background-active;
				}
			}

			&:after {
				content: '';
				position: absolute;
				top: -1px;
				right: -($breadcrumb-height/2); /*half of square's length*/
				width: $breadcrumb-height;
				height: $breadcrumb-height;
				transform: scale(0.707) rotate(45deg);
				z-index: 1;
				background: $breadcrumb-background;
				border-right: 3px solid #FAFAFD;
				border-top: 3px solid #FAFAFD;
				transition: all 0.5s;
				border-radius: 0 $v-border-radius 0 50px;
			}

			&:last-child:after {
				content: none;
			}
		}
		a:hover{
			$background-color: $v-table-background-color or valo-table-background-color();
		  	$bg: mix($v-focus-color, $background-color, 20%);
		  	background-color: $bg;
			&:after {
				background: $bg;
			}
		}
	}

	.o-tools-root{
		height: 100%;
		width: 100%;
		position: relative;

		.o-tools-container{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}

		.v-horizontallayout-wrapping.o-spacing{

			> .v-slot{
				margin-left:10px;
				margin-bottom:10px;
			}
		}
	}

	.v-scrollable .o-tools-root.v-layout.v-widget{
		overflow: auto;
	}

	.o-responsive[width-range~="0-983px"]{
		/* small screen styles */
		.o-tools-root {
			.o-tools-subnav{
				width: 100%;
				text-align: left;
				border-bottom: 1px solid first-color(valo-border($strength: 1));
			}

			.o-tools-main{
				position: relative;
				width: 100%;
				display: block;
			}
		}
	}

	.o-responsive[width-range~="984px-"]{
		/* other screen styles */
		.o-tools-root {
			.o-tools-subnav{
				width: 170px;
				text-align: center;
				height: 100%;
				float: left;
				border-right: 1px solid first-color(valo-border($strength: 1));

				.o-app-button{
					margin-top: 10px;
				}
			}

			.o-tools-main{
				position: relative;
				height: 100%;
				margin-left: 170px;
				width: auto !important;
				display: block;
			}
			&.o-tools-subnav-hidden .o-tools-main{
				margin-left: 0;
			}
		}
	}

	/* Drop target styles, displaying opaque overlay on drag over. */
	.v-csslayout-drag-center {
		@include  valo-ddwrapper-box-hint-style
	}
	.v-panel-content > .v-csslayout-drag-center {
		border-radius: 0 0 $v-border-radius $v-border-radius;
	}
}