/*--------------------------------------------------------------------------
//
//  Mixin
//
//-------------------------------------------------------------------------*/

@mixin flex-direction-mixin($value) {
	flex-direction: $value;
	-ms-flex-direction: $value;
	-webkit-flex-direction: $value;
}

@mixin flex-justify-content-mixin($value) {
	justify-content: $value;
	-webkit-justify-content: $value;
}

@mixin flex-align-content-mixin($value) {
	-webkit-align-content: $value;
	align-content: $value;
}

@mixin flex-align-items-mixin($value) {
	align-items: $value;
	-webkit-align-items:$value;
}

@mixin flex-mixin() {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	min-height: 0;
	min-width: 0;
}

/*--------------------------------------------------------------------------
//
//	Common
//
//-------------------------------------------------------------------------*/

@mixin flex-grow() {
	flex-grow: 1;
	-webkit-flex-grow: 1;
}

@mixin flex-shrink() {
	flex-shrink: 0;
	-webkit-flex-shrink: 0;
}

@mixin flex-horizontal($horizontal-align:none,$vertical-align:none) {
	@include flex-mixin();
	&.horizontal-align-left {@include flex-justify-content-mixin(flex-start)};
	&.horizontal-align-center {@include flex-justify-content-mixin(center)};
	&.horizontal-align-right {@include flex-justify-content-mixin(flex-end)};
	&.horizontal-align-space-around {@include flex-justify-content-mixin(space-around)};
	&.horizontal-align-space-between {@include flex-justify-content-mixin(space-between)};

	&.vertical-align-top {@include flex-align-items-mixin(flex-start)};
	&.vertical-align-center {@include flex-align-items-mixin(center)};
	&.vertical-align-bottom {@include flex-align-items-mixin(flex-end)};
	&.vertical-align-stretch {@include flex-align-items-mixin(stretch)};

	@if($horizontal-align == left)          {@include flex-justify-content-mixin(flex-start)};
	@if($horizontal-align == center)        {@include flex-justify-content-mixin(center)};
	@if($horizontal-align == right)         {@include flex-justify-content-mixin(flex-end)};
	@if($horizontal-align == space-around)  {@include flex-justify-content-mixin(space-around)};
	@if($horizontal-align == space-between) {@include flex-justify-content-mixin(space-between)};

	@if($vertical-align == top)     {@include flex-align-items-mixin(flex-start)};
	@if($vertical-align == center)  {@include flex-align-items-mixin(center)};
	@if($vertical-align == bottom)  {@include flex-align-items-mixin(bottom)};
	@if($vertical-align == stretch) {@include flex-align-items-mixin(stretch)};
}

@mixin flex-vertical($horizontal-align:"none",$vertical-align:"none") {
	@include flex-mixin();
	@include flex-direction-mixin(column);

	&.horizontal-align-left 	{@include flex-align-items-mixin(flex-start)};
	&.horizontal-align-center   {@include flex-align-items-mixin(center)};
	&.horizontal-align-right    {@include flex-align-items-mixin(flex-end)};

	&.vertical-align-top 	       {@include flex-justify-content-mixin(flex-start)};
	&.vertical-align-center        {@include flex-justify-content-mixin(center)};
	&.vertical-align-bottom        {@include flex-justify-content-mixin(flex-end)};
	&.vertical-align-space-around  {@include flex-justify-content-mixin(space-around)};
	&.vertical-align-space-between {@include flex-justify-content-mixin(space-between)};

	@if($horizontal-align == left)   {@include flex-align-items-mixin(flex-start)};
	@if($horizontal-align == center) {@include flex-align-items-mixin(center)};
	@if($horizontal-align == right)  {@include flex-align-items-mixin(flex-end)};

	@if($vertical-align == top)          {@include flex-justify-content-mixin(flex-start)};
	@if($vertical-align == center)       {@include flex-justify-content-mixin(center)};
	@if($vertical-align == bottom)       {@include flex-justify-content-mixin(flex-end)};
	@if($vertical-align == space-around) {@include flex-justify-content-mixin(space-around)};
	@if($vertical-align == space-around) {@include flex-justify-content-mixin(space-around)};
}