//
// PLASTIC
// Elements
// A set of useful LESS mixins
//
// LESS Elements 0.9 — more info at: http://lesselements.com
//

.passthrough() {
	-ms-pointer-events: none;
	-webkit-pointer-events: none;
	pointer-events: none;
}

.captureall() {
	-ms-pointer-events: all;
	-webkit-pointer-events: all;
	pointer-events: all;
}

.rounded(@radius: 2px) {
	border-radius: @radius;
}
.border-radius(@topleft: 0, @topright: 0, @bottomright: 0, @bottomleft: 0) {
	border-top-right-radius: @topright;
	border-bottom-right-radius: @bottomright;
	border-bottom-left-radius: @bottomleft;
	border-top-left-radius: @topleft;
	.background-clip(padding-box);
}
.column-count(@count: 2) {
	-moz-column-count: @count;
	-webkit-column-count: @count;
	column-count: @count;
}
.opacity(@opacity: 0.5) {
	opacity: @opacity;
	-moz-opacity: @opacity;
	-khtml-opacity: @opacity;
}
.blur(@radius) {
	-webkit-filter: blur(@radius);
	-moz-filter: blur(@radius);
	-o-filter: blur(@radius);
	-ms-filter: blur(@radius);
	filter: blur(@radius);
}
.transform(...) {
	-webkit-transform: @arguments;
	-moz-transform: @arguments;
	-ms-transform: @arguments;
	transform: @arguments;
}
.rotate(@deg) {
	.transform(rotate(@deg));
}
.transform-origin(...) {
	-webkit-transform-origin: @arguments;
	transform-origin: @arguments;
}
// Delay default is to workaround a bug in our LESS compiler / YUI compressor. See https://tinyspeck.slack.com/archives/dhtml/p1430338710000886
.transition(@property:all, @duration:0.2s, @ease:ease-out, @delay:0.0000001ms) {
	-webkit-transition: @property @duration @ease @delay;
	-moz-transition: @property @duration @ease @delay;
	transition: @property @duration @ease @delay;
}
.transition(@arguments) {
	-webkit-transition: @arguments;
	-moz-transition: @arguments;
	transition: @arguments;
}
.transition-transform(@duration:0.2s, @ease:ease-out) {
	-webkit-transition: -webkit-transform @duration @ease;
	-moz-transition: -moz-transform @duration @ease;
	transition: transform @duration @ease;
}
.transition-delay(@arguments) {
	-webkit-transition-delay: @arguments;
	-moz-transition-delay: @arguments;
	transition-delay: @arguments;
}
.transition-duration(@arguments) {
	-webkit-transition-duration: @arguments;
	-moz-transition-duration: @arguments;
	transition-duration: @arguments;
}
.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
	box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
}
.box-shadow(@arguments) {
	box-shadow: @arguments;
}
.box-sizing(@sizing: border-box) {
	-ms-box-sizing: @sizing;
	-moz-box-sizing: @sizing;
	-webkit-box-sizing: @sizing;
	box-sizing: @sizing;
}
.user-select(@argument: none) {
	-webkit-user-select: @argument;
	-moz-user-select: @argument;
	-ms-user-select: @argument;
	user-select: @argument;
}
.background-clip(@argument: padding-box) {
	background-clip: @argument;
}
.filter(@arguments) {
	-webkit-filter: @arguments;
	-ms-filter: @arguments;
	filter: @arguments;
}

.placeholder(@color) {
	&::-webkit-input-placeholder { color: @color; }
	&::-moz-placeholder { color: @color; opacity: 1; }
	&:-ms-input-placeholder { color: @color; }
	&:-moz-placeholder { color: @color; opacity: 1; }
}

// Apply text-overflow: ellipsis; behaviour to multiple lines. Not supported in IE/FF.
.multiline_ellipsis(@num_lines) {
	text-overflow: ellipsis !important;
	display: -webkit-box !important;
	-webkit-line-clamp: @num_lines !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

.responsive_bg_image(@url, @pos: center center, @repeat: no-repeat, @size: cover, @ret: "@2x") {
	background-position: @pos;
	background-repeat: @repeat;
	background-size: @size;

	background-image: url(@url);
	@media @retina {
		// add '@2x' or whatever the page default is
		@ret_1x: replace(@url, "_1x", "");
		@ret_png: replace(@ret_1x, ".png", ~"@{ret}.png");
		@ret_png_or_jpg: replace(@ret_png, ".jpg", ~"@{ret}.jpg");
		background-image: url(@ret_png_or_jpg);
	}
}

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// DEPRECATED FLEXBOX MIXINS -- Don't use
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

.display-flex() {
	display: flex;
}
.display-inline-flex() {
	display: inline-flex;
}
.flex-direction(@direction) {
	flex-direction: @direction;
}
.flex-basis(@prop) {
	flex-basis: @prop;
}
.align-items(flex-start) {
	align-items: flex-start;
}
.align-items(flex-end) {
	align-items: flex-end;
}
.align-items(center) {
	align-items: center;
}
.align-items(baseline) {
	align-items: baseline;
}
.align-items(stretch) {
	align-items: stretch;
}
.align-items(@arg) {
	align-items: @arg;
}
.align-self(@arg) {
	align-self: @arg;
}
.justify-content(flex-start) {
	-ms-flex-pack: start;
	-webkit-box-pack: start;
}
.justify-content(flex-end) {
	-ms-flex-pack: end;
	-webkit-box-pack: end;
}
.justify-content(center) {
	-ms-flex-pack: center;
	-webkit-box-pack: center;
}
.justify-content(space-between) {
	-ms-flex-pack: justify;
	-webkit-box-pack: justify;
}
.justify-content(space-around) {
	-ms-flex-pack: distribute;
	-webkit-box-pack: distribute;
}
.justify-content(@arg) {
	-webkit-justify-content: @arg;
	-moz-justify-content: @arg;
	justify-content: @arg;
}
.flex(@arg) {
	flex: @arg;
}
.flex-wrap(@arg) {
	flex-wrap: @arg;
}
.flex-flow(@arg) {
	flex-flow: @arg;
}
.flex-order(@arg) {
	order: @arg;
}
.flex-grow(@arg) {
	flex-grow: @arg;
}
.flex-shrink(@arg) {
	flex-shrink: @arg;
}
.cursor-grab() {
	cursor: -webkit-grab;
	cursor: -mox-grab;
	cursor: grab;
}
.cursor-grabbing() {
	cursor: -webkit-grabbing;
	cursor: -moz-grabbing;
	cursor: grabbing;
}
