// =======================================================================
// Mixins
// =======================================================================

// Tocca big button base styles
.bigButton {
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0.1em;
		min-height: 1.5em;
		cursor: pointer;
//		font-size: 200%;
		border: 2px solid @global-color;
		line-height: 1em;
		text-decoration: none; 

		&:hover {
				text-decoration: none;
		}
}

// Strong rule, f**ing never underline text in a button!
a.bigButton {
		text-decoration: none !important; 
}

// Mixin, to define the style of a big button inside a region
.bigButtonStyle(@color, @inverseColor: white, @isInversed: false) {
		.bigButton {
				@color1: if(@isInversed, @inverseColor, @color);
				@color2: if(@isInversed, @color, @inverseColor);

				background-color: @color2;
				border-color: if(@isInversed, @color2, @color1);
				color: @color1;

				&:active, &.active {
						background-color: @color1;
						color: @color2;
				}

				&:hover {
						background-color: @color1;
						color: @color2;
//						border-color: if(@isInversed, @color2, @color1);
				}

				&.active:hover {
						background-color: lighten(@color1, 20%);
				}
		}
}

// Siehe auch button.less im ui kit theme
.button {
		text-transform: uppercase;
		cursor: pointer;
		border: 2px solid @global-color;
		padding-left: 0.5em;
		padding-right: 0.5em;
}

// Items in a basic global list
.catalogListItem() {
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: #333;
		padding: 0.2em 0;
		margin: 0;
		background-clip: content-box;

		// display: flex;
		// justify-content: flex-start;
		// align-items: flex-start;

		a {
				color: inherit;
		}

		// a:first-child {
		// 		padding: 0.5em 3px;
		// 		color: inherit;
		// 		display: inline-block;
		// 		//width: 80%;
		// }
}

// Use this on html elements which are decorated with a "toccamoduleX" css class, to set
// a properts to the unit's main color
// Example: .toccamoduleBackgroundColor("div.control span.button")
.toccamoduleColorProperty(@selector, @property){
		@s: e(@selector); // converting the incoming string as a literal (strange less behaviour)
		@p: e(@property);
		&.toccamodule1 { @{s} { @{p}: @t-color-toccamodule1;} }
		&.toccamodule2 { @{s} { @{p}: @t-color-toccamodule2;} }
		&.toccamodule3 { @{s} { @{p}: @t-color-toccamodule3;} }
		&.toccamoduleP { @{s} { @{p}: @t-color-palloncini;} }
		&.toccamoduleV { @{s} { @{p}: @t-color-vocabolario;} }
		&.toccamoduleExtras { @{s} { @{p}: @t-color-toccamoduleExtras;} }
}

// Use this on html elements which are decorated with a "toccamoduleX" css class, to set
// the background color to the unit's main color
// Example: .toccamoduleBackgroundColor("div.control span.button")
.toccamoduleBackgroundColor(@selector){
		.toccamoduleColorProperty(@selector, "background-color");
}

// Use this on html elements which are decorated with a "toccamoduleX" css class, to set
// the border color to the unit's main color
// Example: .toccamoduleBorderColor("div.control span.button")
.toccamoduleBorderColor(@selector){
		.toccamoduleColorProperty(@selector, "border-color");
}

// Use this on html elements which are decorated with a "toccamoduleX" css class, to set
// the text color to the unit's main color
// Example: .toccamoduleColor("h1")
.toccamoduleColor(@selector){
		.toccamoduleColorProperty(@selector, "color");
}

.toccamoduleButton(@selector, @inverseColor: white, @isInversed: false){
		@s: e(@selector); // converting the incoming string as a literal (strange less behaviour)
		
		.style(@localColor) {

				@color1: if(@isInversed, @inverseColor, @localColor);
				@color2: if(@isInversed, @localColor, @inverseColor);

				background-color: @color2;
				border-color: if(@isInversed, @color2, @color1);
				color: @color1;
				
				// border-color: ;
				// color: ;
				// background-color: white;


				&:active, &.active {
						background-color: @color1;
						text-decoration: none;
						color: @color2;
				}

				&:hover {
						background-color: @color1;
						text-decoration: none;
						color: @color2;
//						border-color: if(@isInversed, @color2, @color1);
				}

				&.active:hover {
						background-color: lighten(@color1, 20%);
				}

				
				// &:hover, &:active {
				// 		background-color: @localColor;
				// 		color: white;
				// 		text-decoration: none;
				// }

		}

		// Button WITHIN a toccamodule scope gets colors
		&.toccamodule1 {@{s} {.style(@t-color-toccamodule1)}}
		&.toccamodule2 {@{s} {.style(@t-color-toccamodule2)}}
		&.toccamodule3 {@{s} {.style(@t-color-toccamodule3)}}
		&.toccamoduleP {@{s} {.style(@t-color-palloncini)}}
		&.toccamoduleV {@{s} {.style(@t-color-vocabolario)}}
		&.toccamoduleExtras {@{s} {.style(@t-color-toccamoduleExtras)}}

		// If button ITSELF is attributed with toccamoduleX then this gets precedence
		@{s}.toccamodule1 {.style(@t-color-toccamodule1)}
		@{s}.toccamodule2 {.style(@t-color-toccamodule2)}
		@{s}.toccamodule3 {.style(@t-color-toccamodule3)}
		@{s}.toccamoduleP {.style(@t-color-palloncini)}
		@{s}.toccamoduleV {.style(@t-color-vocabolario)}
		@{s}.toccamoduleExtras {.style(@t-color-toccamoduleExtras)}

}

// Prevent that the user can select text
.noUserSelect() {
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		cursor: default;
}

// Prevent touch actions
.noTouch() {
		touch-action: none;
}

.draggable() {
		.noUserSelect();
		.noTouch();
		cursor: move;
}

.dropHover() {
		&.dropHover {
				background-color: @dropTargetHoverColor;
		}
}

.hiddenSectionButWithDefinedDimension() {
		// Nicht display:none, weil das Berechnungen der enthaltenen Elemente mit Breite etc. nicht m√∂glich macht				
		position: absolute !important;
		top: -9999px !important;
		left: -9999px !important;
		width: 100%; // TODO: Smarter, aber ich fand nicht heraus, wo die Breite drin steht. Wir brauchen aber eine feste Breite, damit die Berechnung per JS OK ist
		visibility: hidden;
}


// Local Variables:
// less-css-compile-at-save: t
// End:
