// Workaround less issue:
// https://github.com/less/less.js/issues/2004

.set-size(inherit) {
}
.set-size(small) {
	#small-dim;
}
.set-size(large) {
	#large-dim;
}

/////////////////////

.canvas(@dim: inherit) {
	position: absolute;
	border: @border-color 1px solid;
	border-radius: 5px;
	overflow: auto;
	.canvas-size(@dim);
	// svg {
	//		display: block;
	// }
}

.canvas-size(@dim) {
	.set-size(@dim);
	top: @canvas-padding;
	left: @canvas-padding;
	right: @canvas-padding;
	bottom: @canvas-padding;
}

/////////////////////

.toolbar(@dir, @dim: inherit) {
	.orientation(@dir);
	position: absolute;
	@{dir}: @app-gap;
	.toolbar-size(@dir, @dim);
	&>menu {
		@{main-dim}: 100%;
	}
}

.toolbar-size(@dir, @dim) {
	.orientation(@dir);
	.set-size(@dim);
	@{main-lose}: @canvas-padding;
	@{main-rise}: @canvas-padding;
	@{cross-dim}: @toolbar-size;
}

.toolbar-pos(@icon-count, @separator-count: 0, @loose-pad: 0,
             @rise-pad: @loose-pad, @dim: inherit) {
	.set-size(@dim);
	@offset: @icon-count * @toolbar-size +
            (@loose-pad + @rise-pad) * @separator-count;
}

/////////////////////

.toolbutton(@dim: inherit) {
	display: block;
	border: 0;
	padding: 0;
	position: relative;
	background: inherit;
	background-color: white;
	//background-image: none;

	//text-align: center;
	//overflow: hidden;
	//font: ~"0/0" a;
	//.text-hide(transparent);

	&:before, &:after {
		display: inline-block;
		vertical-align: middle;
		font-family: 'ketcher';
	}
	&:after {
		position: absolute;
		left: 0;
	}
	&:hover {  // &:hover:not(:active)
		.highlight-scale;
		.highlight-shadow(black);
	}
	&:active, &[disabled] {
		.highlight-scale(none);
		.highlight-shadow(none);
		//.shadow-highlight(black, inset);
	}
	.toolbutton-size(@dim);
}

.toolbutton-size(@dim) {
	.set-size(@dim);
	width: @button-size;
	height: @button-size;
	margin: @button-grow;
	//line-height: @toolbar-size;

	&:before, &:after {
		font-size: @icon-size;
		//padding: @icon-padding;
	}
}

.toolbutton-horizontal(@dim, @width-cells: 1) {
	.set-size(@dim);
	width: @button-size * @width-cells;
	margin-left: @button-grow * @width-cells;
	margin-right: @button-grow * @width-cells;
}
////////////////////

.collapsed(@dim: inherit) when not (@dim = none) {
	position: relative;
	overflow: hidden;
	.collapsed-size(@dim);
	.collapsed-icon;
}

.collapsed(none) {
	position: static;
	overflow: visible;
	height: auto;
	width: auto;
	// &> menu {
	// 	margin: 0 !important;  // TODO: fix me in js
	// }
	.collapsed-icon(none);
}

.collapsed-size(@dim) {
	.set-size(@dim);
	height: @toolbar-size;
	width: 100%;//@toolbar-size;
}

.collapsed-ifnot(@classname, @dim: inherit) {
	.collapsed(@dim);
	&.@{classname} {
		overflow: visible;
	}
}

.collapsed-icon() {
	&:after {
		font-size: 7px;
		width: 7px;
		height: 7px;
		display: block;
		font-family: 'ketcher';
		content: @icon-dropdown;
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
	}
	&:hover:after {
		//.scale-highlight;
		color: @active-color;
	}
}

.collapsed-icon(none) {
	&:after {
		content: none;
	}
}

/////////////////////

.expanded(@dim: inherit) {
	.set-size(@dim);
	&>menu {
		margin: 0 !important;
		position: absolute;
		left: @toolbar-size + @menu-pad;
		z-index: 20;

		//display: table-cell;
		white-space: nowrap;
		word-break: keep-all;
		//width: auto;
		//height: @toolbar-size;

		padding: 2px;
		.separate-menu(vertical, 3px);

		background: white;
		border: 1px solid @border-color;
		border-radius: 5px;
		box-shadow: 0 6px 12px rgba(0,0,0,.175);
	}
}

.expanded-size(@dim) {
	&>menu {
		.set-size(@dim);
		left: @toolbar-size + @menu-pad;
	}
}

.expanded-menu(@dim: inherit) {
	.set-size(@dim);
	li {
		display: block;
	}
	button {
		display: block;
		width: 100%;
		margin: 1px 0;
		padding: 0.3em 4.5em 0.3em 0.3em; // 4.5em - place for kbd
		height: 1.7em;

		font-size: @menu-font-size;
		//line-height: 18px;
		text-align: left;
		&:before, &:after {
			padding-right: 0.4em;
			font-size: @menu-icon-size;
			//padding: @icon-padding;
		}
		&[disabled] {                    // TODO: general button highlight
			.highlight-invert(disabled); // refactor
		}
	}
	button:hover, .selected button {
		//&:extend(button:active); not extended while in media
		.highlight-scale(none);
		.highlight-shadow(none);
		.highlight-invert;
	}
	kbd {
		display: inline-block;
		position: absolute;    // how to align right?
		right: 0.5em;
	}
}

.expanded-menu-size(@dim) {
	.set-size(@dim);
	button {
		font-size: @menu-font-size;
		&:before, &:after {
			font-size: @menu-icon-size;
		}
	}
}

/////////////////////

.separator(@orientation, @lose-pad, @rise-pad) {
	.orientation(@orientation);
	margin-@{main-lose}: @lose-pad;
	border-@{main-lose}: 1px solid @border-color;
	padding-@{main-lose}: @rise-pad - 1px; // substract 1px to assert
	                                       // width = lose-pad + rise-pad
}

.separate-item(@orientation, @lose-pad, @rise-pad: @lose-pad) {
	& + li {
		.separator(@orientation, @lose-pad, @rise-pad);
	}
}

.separate-menu(@orientation, @lose-pad, @rise-pad: @lose-pad) {
	li + li>menu {
		.separator(@orientation, @lose-pad, @rise-pad);
	}
}

/////////////////////
// Highlight effects

.highlight-scale() {
	transition: transform, 0.2s, ease-out;
	transform: scale(1.25);
}

.highlight-scale(none) {
	transform: scale(1);
}

.highlight-shadow(inset, @color: @active-color) {
	box-shadow: 0px -1px 6px fade(@color, 5%) inset,
	            0px 1px 3px @color inset;
}

.highlight-shadow(@color: @active-color) when (iscolor(@color)) {
	box-shadow: inset 0 0 1px 1px fade(@color, 12%);
}

.highlight-shadow(none) {
	box-shadow: none;
}

.highlight-circle(@color: @active-color, @inset: '') {
	border-radius: (@icon-size + @icon-padding) / 2;
	box-shadow: ~'0 0 4px @{color} @{inset}';
}

.highlight-symbol(@color: @active-color) {
	color: @active-color;
	text-shadow: 1px 1px 3px @color;
}

.highlight-symbol-invert() {
	background: #333;
	text-shadow: 0px 1px 10px white, 0px -1px 10px white;
}

.highlight-invert() {
	background: #444;
	color: white;
}

.highlight-invert(disabled) {
	background: inherit;
	color: @disabled-color;      // hint for menus
}

/////////////////////
// Transition effects

.transition-twirl(@time: 0.3s) {
	transform: rotateX(0);
	transition: transform @time;
	&.hide {
		transform-style: preserve-3d;
		transform: perspective(350px) rotateX(-70deg);
	}
}

.transition-zoom(@time: 0.3s) {
	opacity: 1;
	transform: scale(1);
	transition: transform @time, opacity @time;

	&.hide {
		opacity: .2;
		transform: scale(.5);
	}
}

//////////////////////////
// Icon content & coloring

.colorize(@color) when not (@color = inherit)  {
	color: @color;
}

.monochrome-icons(@names, @color: inherit, @i: 1) when (@i <= length(@names)) {
	@item: extract(@names, @i);
	@icon: 'icon-@{item}';
	#@{item} button:before { content: @@icon; .colorize(@color); }
	.monochrome-icons(@names, @color, (@i + 1));
}

.atom-sketching(@names, @i: 1) when (@i <= length(@names)) {
	@item: extract(@names, @i);
	@color: 'atom-@{item}-sketching-color';
	.atom-@{item} {
		color: @@color;
	}
	.atom-sketching(@names, (@i + 1));
}

////////////////////////////////////////////
// Little bit jankie directions unification

.orientation(horizontal) {
	@main-rise: right;
	@main-lose: left;
	@main-dim: width;
	@cross-rise: bottom;
	@cross-lose: top;
	@cross-dim: height;
}

.orientation(vertical) {
	@main-rise: bottom;
	@main-lose: top;
	@main-dim: height;
	@cross-rise: right;
	@cross-lose: left;
	@cross-dim: width;
}

.orientation(@dir) when (@dir = top), (@dir = bottom)  {
	.orientation(horizontal);
}

.orientation(@dir) when (@dir = left), (@dir = right)  {
	.orientation(vertical);
}

.direction(@dir) {
	.to-index(top) { @index: 0; }
	.to-index(right) { @index: 1; }
	.to-index(bottom) { @index: 2; }
	.to-index(left) { @index: 3; }
	@directions: top right bottom left;
	@orientations: horizontal vertical;
	.to-index(@dir);

	@main-start: extract(@directions, mod(@index, 4) + 1);
	@main-end: extract(@directions, mod((@index + 2), 4) + 1);

	@cross-start: extract(@directions, mod((@index + 3), 4) + 1);
	@cross-end: extract(@directions, mod((@index + 1), 4) + 1);

	@main-orient: extract(@orientations, mod(@index + 1, 2));
	@cross-orient: extract(@orientations, mod(@index + 1, 2) + 1);
}

/////////////////////
// Basic mixins

.background-opacity(@color, @opacity) {
	@rgba-color: rgba(red(@color), green(@color), blue(@color), @opacity);
	background-color: @rgba-color;

	background: none\9; // Hack for IE8
	filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color), argb(@rgba-color)));
	//zoom: 1;
	&:not([ie9]) {
		// Do not apply to IE9 as it supports rgba
		filter: progid:DXImageTransform.Microsoft.gradient(enabled='false');
	}
}

.text-hide(transparent) {
	font: ~"0/0" a;
	color: transparent;
	text-shadow: none;
	background-color: transparent;
	border: 0;
}

.text-hide(indent) {
	@approximate-em-value: 12px / 1em;
	@wider-than-any-screen: -9999em;
	text-indent: @wider-than-any-screen * @approximate-em-value;
	overflow: hidden;
	text-align: left;
}

.text-hide() {
	.text-hide(indent);
}

.reset-button() {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.remove-inline-spacing() {
	// vanish horizontal spacing between inline blocks
	font-size: 0.00001px;
	-webkit-text-size-adjust: none;
}