/**
  * @author Bilal Cinarli
  * Caffeine Function and Mixin Tests
  */
  
@import "../lib/caffeine";

// @mixin box-shadow($content...)
.box-shadow {
	padding: 5px;
	@include box-shadow(0 0 1px rgba(0, 0, 0, .3));
}

// @mixin transform($content...)
[class*="transform-"],
[class*="transition-"] {
	// cosmetics
	display: inline-block;
	padding: 10px;
	border: 1px solid #222;
	// cosmetics
}

.transform-rotate {	
	@include transform(rotate(15deg));
}

.transform-skew {	
	@include transform(skew(15deg));
}

// @mixin transition($content...)
.transition-size {
	@include transition(all ease .4s);
	width: 100px;
	height: 50px;
	
	&:hover {
		width: 250px;
		height: 25px;
	};
}

.transition-radius {
	@include transition(all ease-out .5s);
	width: 80px;
	height: 80px;
	padding: 20px;
	
	&:hover {
		border-radius: 50%;
	}
}

// @mixin linear-gradient
.linear-gradient {
	@include linear-gradient("to bottom, #ccc, #999");
	
	height: 100px;
}

// @mixin radial-gradient
.radial-gradient {
	@include radial-gradient("ellipse at center, #ccc, #999, #222");
	
	width: 100px;
	height: 100px;
}

// @mixin font-size($font-size)
.font-size {
	@include font-size(14px);
}

// @mixin placeholder()
.placeholder {
	@include placeholder {
		font-style: italic;
	}
}

// @mixin center()
.center {
	@include center();
}

// @mixin center-vertical()
.center-vertical {
	@include center-vertical();
}

// @mixin center-horizontal()
.center-horizontal {
	@include center-horizontal();
}

// @mixin arrow($color, $size, $direction, $el)
.arrow-top {
	@include arrow(lightblue, 10px);
}

.arrow-right {
	@include arrow(olive, 10px, right);
}

.arrow-bottom {
	@include arrow(turquoise, 10px, bottom);
}

.arrow-left {
	@include arrow(yellow, 10px, left);
}

.bordered-arrow {
	position: relative;
	display: block;
	min-height: 20px;
	@include arrow(lightblue navy, 10px 12px);
	
	&:after {
		top: 4px;
		left: 2px;
	}
}