@import './var';

.clearfix() {
	&:before,
	&:after {
		display: table;
		content: '';
	}
	&:after {
		clear: both;
	}
	& when (@ie-compat) {
		*zoom: 1;
	}
}

.inline-block() {
	display: inline-block;
	& when (@ie-compat) {
		*display: inline;
		*zoom: 1;
	}
}

.size(@width, @height: @width) {
	width: @width;
	height: @height;
}

.color(@color: @color, @bg-color: @bg-color) {
	color: @color;
	background-color: @bg-color;
}

.color-reverse(@color: @color, @bg-color: @bg-color) {
	.color(@bg-color, @color);
}

.opacity(@val) {
	opacity: @val;
	& when (@ie-compat) {
		// for ie8-
		@value4ie: (@val * 100);
		filter: ~"alpha(opacity=@{value4ie})";
	}
}

.border(@color, @radius: 1px) {
	border: 1px solid @color;
	border-radius: @radius;
}

.col(@fraction, @all) {
	// ie6 failed without 0.999
	width: percentage(@fraction / @all * 0.999);
}

.col-loop(@index, @all) when(@index > 0) {
	.col-@{index}-@{all} {
		.col(@index, @all);
	}

	.col-loop(@index - 1, @all);
}

.user-select(@val: none) {
	user-select: @val;
}

// handy

.left() {
	float: left;
}

.right() {
	float: right;
}

.block() {
	display: block;
}

.inline() {
	display: inline;
}

.hidden() {
	display: none;
	visibility: hidden;
}

.invisible() {
	visibility: hidden;
}

.circle() {
	border-radius: 50%;
}

.round() {
	// just big enough
	border-radius: 1000px;
}

.fixed() {
	position: fixed;
}

.absolute() {
	position: absolute;
}

.relative() {
	position: relative;
}