// ------------------------------
// clearfix
// ------------------------------

@mixin clearfix(){
	 &:before,
	 &:after {
		content: " ";
		display: table;
	}
	 &:after {
		clear: both;
	}
}




// ------------------------------
// フォントサイズ
// ------------------------------

@mixin font-size($sizeValue){
	font-size: unquote("#{$sizeValue}px");
	// font-size: ($sizeValue / 10) * 1rem;
}




// ------------------------------
// ボックスサイズ
// ------------------------------

@mixin box-sizing($boxmodel){
	-webkit-box-sizing: $boxmodel;
	-moz-box-sizing: $boxmodel;
	box-sizing: $boxmodel;
}




// ------------------------------
// 角丸
// ------------------------------

// 上だけ角丸
@mixin round-top( $radius ){
	border-top-left-radius: $radius;
	border-top-right-radius: $radius;
}
// 下だけ角丸
@mixin round-bottom( $radius ){
	border-bottom-left-radius: $radius;
	border-bottom-right-radius: $radius;
}
// 右だけ角丸
@mixin round-right( $radius ){
	border-top-right-radius: $radius;
	border-bottom-right-radius: $radius;
}
// 左だけ角丸
@mixin round-left( $radius ){
	border-top-left-radius: $radius;
	border-bottom-left-radius: $radius;
}




// ------------------------------
// 透過
// ------------------------------

// Opacity
@mixin opacity($opacity){
	opacity: $opacity;
	$opacity-ie: $opacity * 100;
	-ms-filter: unquote("progid:DXImageTransform.Microsoft.Alpha(opacity=#{$opacity-ie})");
	filter: unquote("alpha(opacity=#{$opacity-ie})");
}




// ------------------------------
// 時間変化
// ------------------------------

// transition-property、 transition-duration、 transition-timing-function、 transition-delay の各プロパティの値
@mixin transition($transition){
	-webkit-transition: $transition;
	transition: $transition;
}
// プロパティ
@mixin transition-property($transition-property){
	-webkit-transition-property: $transition-property;
	transition-property: $transition-property;
}
// いつ始まるか
@mixin transition-delay($transition-delay){
	-webkit-transition-delay: $transition-delay;
	transition-delay: $transition-delay;
}
// かかる時間
@mixin transition-duration($transition-duration){
	-webkit-transition-duration: $transition-duration;
	transition-duration: $transition-duration;
}
// 時間変化
@mixin transition-transform($transition){
	-webkit-transition: -webkit-transform $transition;
	-moz-transition: -moz-transform $transition;
	-o-transition: -o-transform $transition;
	transition: transform $transition;
}




// ------------------------------
// 回転
// ------------------------------

// 回転
@mixin rotate($degrees){
	-webkit-transform: rotate($degrees);
	-ms-transform: rotate($degrees);
	transform: rotate($degrees);
}
// X軸に回転
@mixin rotateX($degrees){
	-webkit-transform: rotateX($degrees);
	-ms-transform: rotateX($degrees); // IE9+
	transform: rotateX($degrees);
}
// Y軸に回転
@mixin rotateY($degrees){
	-webkit-transform: rotateY($degrees);
	-ms-transform: rotateY($degrees); // IE9+
	transform: rotateY($degrees);
}




// ------------------------------
// 変形
// ------------------------------

// 拡大・縮小
@mixin scale($ratio){
	-webkit-transform: scale($ratio);
	-ms-transform: scale($ratio);
	transform: scale($ratio);
}
// 表示位置を移動
@mixin translate($x, $y){
	-webkit-transform: translate($x, $y);
	-ms-transform: translate($x, $y);
	transform: translate($x, $y);
}
// Z方向に表示位置を移動
@mixin translateZ($z){
	-webkit-transform: translateZ($z);
	-ms-transform: translateZ($z);
	transform: translateZ($z);
}
// X方向とY方向とZ方向の距離で3D移動
@mixin translate3d($x, $y, $z){
	-webkit-transform: translate3d($x, $y, $z);
	transform: translate3d($x, $y, $z);
}
// 傾斜変形
@mixin skew($x, $y){
	-webkit-transform: skew($x, $y);
	-ms-transform: skewX($x) skewY($y);
	transform: skew($x, $y);
}
// 3D変形の奥行きの深さ
@mixin perspective($perspective){
	-webkit-perspective: $perspective;
	-moz-perspective: $perspective;
	perspective: $perspective;
}
// 遠近投影の基点となる位置を指定
@mixin perspective-origin($perspective){
	-webkit-perspective-origin: $perspective;
	-moz-perspective-origin: $perspective;
	perspective-origin: $perspective;
}
// 要素を変形させる際の基準点を指定する
@mixin transform-origin($origin){
	-webkit-transform-origin: $origin;
	-moz-transform-origin: $origin;
	transform-origin: $origin;
}




// ------------------------------
// UI
// ------------------------------
// ユーザーの選択
@mixin user-select($select){
	-webkit-user-select: $select;
	-moz-user-select: $select;
	-ms-user-select: $select;
	-o-user-select: $select;
	user-select: $select;
}

// リサイズ
@mixin resizable($direction){
	resize: $direction;
	overflow: auto;
}

// 単語途中での改行方法を指定
@mixin hyphens($mode: auto){
	word-wrap: break-word;
	-webkit-hyphens: $mode;
	-moz-hyphens: $mode;
	-ms-hyphens: $mode;
	-o-hyphens: $mode;
	hyphens: $mode;
}




// ------------------------------
// グラデーション
// ------------------------------

// 水平グラデーション
@mixin horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%){
	background-image: -webkit-gradient(linear, $start-percent top, $end-percent top, from($start-color), to($end-color)); // Safari 4+, Chrome 2+
	background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent)); // Safari 5.1+, Chrome 10+
	background-image: -moz-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // FF 3.6+
	background-image:  linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10
	background-repeat: repeat-x;
	filter: unquote(("progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}', GradientType=1)")); // IE9 and down
}
// 垂直グラデーション
@mixin vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%){
	background-image: -webkit-gradient(linear, left $start-percent, left $end-percent, from($start-color), to($end-color)); // Safari 4+, Chrome 2+
	background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Safari 5.1+, Chrome 10+
	background-image:  -moz-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // FF 3.6+
	background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10
	background-repeat: repeat-x;
	filter: unquote(("progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}', GradientType=0)")); // IE9 and down
}
// 指定グラデーション
@mixin directional($start-color: #555, $end-color: #333, $deg: 45deg){
	background-repeat: repeat-x;
	background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1+, Chrome 10+
	background-image: -moz-linear-gradient($deg, $start-color, $end-color); // FF 3.6+
	background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10
}
// 3つ水平グラデーション
@mixin horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f){
	background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from($start-color), color-stop($color-stop, $mid-color), to($end-color));
	background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
	background-image: -moz-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
	background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
	background-repeat: no-repeat;
	filter: unquote(("progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}', GradientType=1)")); // IE9 and down, gets no color-stop at all for proper fallback
}
// 3つ垂直グラデーション
@mixin vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f){
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from($start-color), color-stop($color-stop, $mid-color), to($end-color));
	background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
	background-image: -moz-linear-gradient(top, $start-color, $mid-color $color-stop, $end-color);
	background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
	background-repeat: no-repeat;
	filter: unquote(("progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}', GradientType=0)")); // IE9 and down, gets no color-stop at all for proper fallback
}
// 円形グラデーション
@mixin radial($inner-color: #555, $outer-color: #333){
	background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($inner-color), to($outer-color));
	background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
	background-image: -moz-radial-gradient(circle, $inner-color, $outer-color);
	background-image: radial-gradient(circle, $inner-color, $outer-color);
	background-repeat: no-repeat;
}
// 縞模様グラデーション
@mixin striped($color: rgba(255,255,255,.15), $angle: 45deg){
	background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, $color), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, $color), color-stop(.75, $color), color-stop(.75, transparent), to(transparent));
	background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
	background-image: -moz-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
	background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}




// ------------------------------
// アニメーション
// ------------------------------

// アニメーション
@mixin animation($animation){
	-webkit-animation: $animation;
	-moz-animation: $animation;
	-o-animation: $animation;
	animation: $animation;
}

// hoverのアニメーション
@mixin hover-animation($duration: 0.1s){
	-webkit-transition: all $duration linear;
	-moz-transition: all $duration linear;
	-o-transition: all $duration linear;
	transition: all $duration linear;
}




// ------------------------------
// ボタン
// ------------------------------

// デフォルトボタン
//===============================

@mixin btn($border-radius: 3px, $background-color: #CCCCCC, $border-color: #A7A7AA){
	display: inline-block;
	padding: $acms-btn-padding;
	border: 1px solid $border-color;
	border-radius: $border-radius;
	background-color: $background-color;
	text-decoration: none;
	text-align: center;
	@include font-size($acms-btn-font-size);
	line-height: 1;
}
@mixin desktop-btn(){
	padding: 7px 10px;
	@include font-size(11);
}

// 色
@mixin btn-color($start-color:#F9F9F9, $end-color:#E1E1E1, $color: #333){
	background-color: $end-color;
	filter: unquote(("progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}', GradientType=0)"));
	background-image: -moz-linear-gradient(top, $start-color, $end-color);
	background-image: -ms-linear-gradient(top, $start-color, $end-color);
	background-image: -o-linear-gradient(top, $start-color, $end-color);
	background-image: -webkit-gradient(linear, center top, center bottom, from($start-color), to($end-color));
	background-image: -webkit-linear-gradient(top, $start-color, $end-color);
	background-image: linear-gradient(top, $start-color, $end-color);
	color: $color;
}
// hover
// @mixin btn-color-hover($start-color:#FCFCFC, $end-color:#E1E1E1, $color: #333){
// 	background-color: $end-color;
// 	filter: unquote(("progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}', GradientType=0)"));
// 	background-image: -moz-linear-gradient(top, $start-color, $end-color);
// 	background-image: -ms-linear-gradient(top, $start-color, $end-color);
// 	background-image: -o-linear-gradient(top, $start-color, $end-color);
// 	background-image: -webkit-gradient(linear, center top, center bottom, from($start-color), to($end-color));
// 	background-image: -webkit-linear-gradient(top, $start-color, $end-color);
// 	background-image: linear-gradient(top, $start-color, $end-color);
// 	color: $color;
// }
// active
@mixin btn-color-active($background-color:#E1E1E1, $color: #333, $inset-color:#B2B2B2){
	background-color: $background-color;
	box-shadow: inset 0 1px 2px $inset-color;
	color: $color;
}


// フラットボタン
//===============================
@mixin acms-btn-flat(){
	display: inline-block;
	padding: $acms-btn-flat-padding;
	border-radius: $acms-btn-flat-border-radius;
	text-align: center;
	text-decoration: none;
	@include font-size($acms-btn-flat-font-size);
	font-weight: bold;
	line-height: 1.2;
	cursor: pointer;
}
@mixin btn-flat-color($bg-color:#EEEEEE, $border: 1px solid #D6D6D6){
	background-color: $bg-color;
	border: $border;
}
@mixin btn-flat-color-active($bg-color:#D6D6D6, $border: 1px solid #A6A6A6){
	background-color: $bg-color;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
	border: $border;
}




// ------------------------------
// フォーム
// ------------------------------

// セレクト
//===============================
@mixin select($border-radius: 3px, $background-color: #CCCCCC, $border-color: #A7A7AA){
	-moz-appearance:  none;
	-webkit-appearance: button;
	display: inline-block;
	padding: $acms-form-select-padding;
	border: 1px solid $border-color;
	border-radius: $border-radius;
	background-color: $background-color;
	text-decoration: none;
	text-align: center;
	@include font-size($acms-form-select-font-size);
	line-height: 1.3;
}
@mixin select-color($start-color:#F9F9F9, $end-color:#E1E1E1, $color: #333){
	background-color: $end-color;
	filter: unquote(("progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}', GradientType=0)"));
	background: url($acms-form-select) right 5px center,-moz-linear-gradient(top, $start-color, $end-color);
	background: url($acms-form-select) right 5px center,-ms-linear-gradient(top, $start-color, $end-color);
	background: url($acms-form-select) right 5px center,-o-linear-gradient(top, $start-color, $end-color);
	background: url($acms-form-select) right 5px center,-webkit-gradient(linear, center top, center bottom, from($start-color), to($end-color));
	background: url($acms-form-select) right 5px center,-webkit-linear-gradient(top, $start-color, $end-color);
	background: url($acms-form-select) right 5px center,linear-gradient(top, $start-color, $end-color);
	background-repeat: no-repeat;
	color: $color;
}
@mixin desktop-select(){
	padding: 5px 30px 5px 10px;
	@include font-size(11);
	line-height: 1.4;
}
