@import 'theme';

// Variables

// @oo-ui-default-image-ext set during build
// @oo-ui-distribution set during build
@oo-ui-default-image-path: 'images';

// Mixins

.oo-ui-background-image( @url ) {
	background-image: e('/* @embed */') url(~'@{url}');
}

.oo-ui-background-image-svg2( @svg, @fallback ) when ( @oo-ui-distribution = mixed ) {
	background-image: url(@fallback);
	background-image: -webkit-linear-gradient(transparent, transparent), e('/* @embed */') url(@svg);
	background-image: linear-gradient(transparent, transparent), e('/* @embed */') url(@svg);
	background-image: -o-linear-gradient(transparent, transparent), url(@fallback);
}
.oo-ui-background-image-svg2( @svg, @fallback ) when ( @oo-ui-distribution = vector ) {
	.oo-ui-background-image(@svg);
}
.oo-ui-background-image-svg2( @svg, @fallback ) when ( @oo-ui-distribution = raster ) {
	.oo-ui-background-image(@fallback);
}

.oo-ui-background-image-svg( @url-without-extension ) {
	@svg: '@{url-without-extension}.svg';
	@fallback: '@{url-without-extension}.@{oo-ui-default-image-ext}';
	.oo-ui-background-image-svg2(@svg, @fallback);
}

.oo-ui-force-webkit-gpu() {
	-webkit-transform: translate3d(0, 0, 0);
}

.oo-ui-animation( @value1, @value2: X, ... ) {
	@value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
	-webkit-animation: @value;
	-moz-animation: @value;
	-ms-animation: @value;
	-o-animation: @value;
	animation: @value;
}

.oo-ui-transition( @value1, @value2: X, ... ) {
	@value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
	-webkit-transition: @value;
	-moz-transition: @value;
	-ms-transition: @value;
	-o-transition: @value;
	transition: @value;
}

.oo-ui-transform( @string ) {
	-webkit-transform: @string;
	-moz-transform: @string;
	-ms-transform: @string;
	-o-transform: @string;
	transform: @string;
}

.oo-ui-box-sizing( @type: border-box ) {
	-webkit-box-sizing: @type;
	-moz-box-sizing:    @type;
	box-sizing:         @type;
}

.oo-ui-vertical-gradient( @start: #EEE, @stop: #FFF ) {
	background: mix(@start, @stop, 50%);
	filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='%d', endColorstr='%d')", @start, @stop));
	background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, @start), color-stop(100%, @stop));
	background-image: -webkit-linear-gradient(top, @start 0%, @stop 100%);
	background-image: -moz-linear-gradient(top, @start 0%, @stop 100%);
	background-image: -ms-linear-gradient(top, @start 0%, @stop 100%);
	background-image: -o-linear-gradient(top, @start 0%, @stop 100%);
	background-image: linear-gradient(top, @start 0%, @stop 100%);
}

.oo-ui-unselectable() {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.oo-ui-selectable() {
	-webkit-touch-callout: default;
	-webkit-user-select: all;
	-moz-user-select: all;
	-ms-user-select: all;
	user-select: all;
}

.oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) {
	margin-right: @spacing;
	&:last-child {
		margin-right: @cancelled-spacing;
	}
}