//
// CSS3 Mixins
//

// BOX SIZING
@mixin ym-box-sizing($type: border-box) {
	-webkit-box-sizing:	$type;
	-moz-box-sizing:	$type;
	box-sizing:			$type;
}

// BOX SHADOW
@mixin ym-box-shadow($x: 1px, $y: 1px, $blur: 5px, $color: rgba(0,0,0,.5), $inset: false) {

	@if $inset{
	-webkit-box-shadow: inset $x $y $blur $color;
			box-shadow: inset $x $y $blur $color;
	}
	@else {
	-webkit-box-shadow: $x $y $blur $color;
			box-shadow: $x $y $blur $color;
	}
}

// Linear Gradient with two colors for modern browsers without the corresponding IE-filter

// $direction ==> written in the standard-way: to bottom, to left ...
// $solid-color ==> replacement color for the one device that cannot show gradients or IE-filters
// $start-color ==> which color to start with
// $end-color ==> which color to end with

// $output ==> defines the output-type of the code
	// css3   ==> only CSS3-gradients
	// oldie  ==> only IE-filters for oldIE (versions before 9)
	// both   ==> both CSS3 and oldIE versions are printed

// $fallback ==> fallback color code for browsers that don't support gradients (oldIE)

// As there is a default direction there is no use for a fourth if-case.

@mixin ym-linear-gradient($direction: "to bottom", $start-color: #eee, $end-color: #ccc, $output: both, $fallback: $start-color) {
	$old-direction: top;
	$very-old-direction:"left top, left bottom";
	$ie-direction: 0;

	@if $direction == "to right" {
		$very-old-direction: "left top, right top";
		$old-direction: left;
		$ie-direction: 1;
	}

	@if $output != "oldie" {
		background-image: -webkit-gradient(linear, #{$very-old-direction}, color-stop(0%,$start-color), color-stop(100%,$end-color));
		background-image:  -webkit-linear-gradient($old-direction, $start-color,$end-color);
		background-image: 	-moz-linear-gradient($old-direction, $start-color,$end-color);
		background-image: 	 -ms-linear-gradient($old-direction, $start-color,$end-color);
		background-image:    		 unquote("linear-gradient(#{$direction}, #{$start-color},#{$end-color})");
	}

	@if $output != "css3" {
		background-color: $fallback;
		$iecolor1: ie-hex-str($start-color);
		$iecolor2: ie-hex-str($end-color);
		filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=#{$ie-direction}, startColorstr='#{$iecolor1}', endColorstr='#{$iecolor2}');
		zoom: 1;
	}
}

//
// Progessive Linearization
//
@mixin ym-linearize-grids {
	&,
	& > [class*="ym-g"] {
		/* linearization for grid module */
		display: block;
		float: none;
		padding: 0;
		margin: 0;
		width: 100% !important;
	}

	& > [class*="ym-g"] > [class*="ym-gbox"] {
		/* reset defined gutter values */
		margin: 0;
		padding: 0;
		/* optional for containing floats */
		overflow: hidden;
	}
}

@mixin ym-linearize-columns {
	&,
	& > [class*="ym-c"] {
		/* linearization for column module */
		display: block;
		float: none;
		padding: 0;
		margin: 0;
		width: auto !important;
	}

	& > [class*="ym-c"] > [class*="ym-cbox"] {
		/* reset defined gutter values */
		margin: 0 ;
		padding: 0;
		/* optional for containing floats */
		overflow: hidden;
	}
}

@mixin ym-linearize-grids-and-columns {
	&,
	& > [class*="ym-c"],
	& > [class*="ym-g"] {
		/* linearization for grids and columns module */
		display: block;
		float: none;
		padding: 0;
		margin: 0;
		width: auto !important;
	}

	& > [class*="ym-c"] > [class*="ym-cbox"],
	& > [class*="ym-g"] > [class*="ym-gbox"] {
		/* reset defined gutter values */
		margin: 0;
		padding: 0;
		/* optional for containing floats */
		overflow: hidden;
	}
}

@mixin ym-linearize-forms {
	// linearization for form module
	& label {
		float:none;
	}

	& .ym-label,
	& .ym-message,
	& input,
	& button,
	& textarea,
	& select {
		display: block;
		float: none;
		position: static;
		width: 100% !important;
		margin-left: 0 !important;
	}

	// reset grids
	& .ym-fbox-wrap,
	& .ym-fbox-wrap [class*="ym-g"] {
		display: block;
		float: none;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	// reset columnar settings
	& input[type="checkbox"],
	& input[type="radio"],
	& input[type="image"] {
		margin-left: 0 !important;
		width: auto !important;
		display: inline;
	}
}

//
// Tools
//
@mixin ym-clearfix {
	&:before {
		content:"";
		display:table;
	}

	&:after {
		clear:both;
		content:".";
		display:block;
		font-size:0;
		height:0;
		visibility:hidden;
	}

	// IE < 8
	zoom: 1;
}

// CONTAINING FLOATS
@mixin ym-contain($type: "dt") {

	@if $type == "oh" {
		display: block;
		overflow: hidden;
		width: 100%;
	}

	@if $type == "fl" {
		float: left;
		width: 100%;
	}

	@if $type == "dt" {
		display: table;
		table-layout: fixed;
		width: 100%;
	}
}

//
// YAML4 Custom Grid Generator
// Generates CSS for custom grids, based on YAMLs grid-module
//
@mixin ym-custom-grid($prefix, $columns, $width, $margin-left, $margin-right) {

	$column_width	: $width / $columns;

	.ym-wrapper {
		width: $width;
		margin: 0 auto;
	}
	.ym-gbox {
		padding-left: 0;
		padding-right: 0;
		margin-left: $margin-left;
		margin-right: $margin-right;
	}
	[class*="ym-push-"],
	[class*="ym-pull-"] { position:relative; }

	@for $i from 1 through $columns {
		.ym-#{$prefix}-#{$i} { width: $column_width * $i; }
	}

	@for $i from 1 through $columns - 1 {
		.ym-push-#{$i} { left: $column_width * $i; }
	}

	@for $i from 1 through $columns - 1 {
		.ym-pull-#{$i} { left: -$column_width * $i; }
	}
}