/*
	Image thumbnail style mixin. [1]
	Parameters:
	- $thumb-name          : 	The class name for the thumbnail style.
	- $thumb-padding       :	The padding between the image and the border.
	- $thumb-border	       :	The style of the thumbnail's border.
	- $thumb-border-radius :	The border radius of the thumbnail.
	Notes:
	- [1] : This style only applies to `img` elements with the class specified in
		`$thumb-name`.
*/
@mixin make-thumb($thumb-name, $thumb-padding, $thumb-border, $thumb-border-radius){
	img.#{$thumb-name}{
		padding: $thumb-padding;
		border: $thumb-border;
		border-radius: $thumb-border-radius;
	}
}
/*
	Mixin for generic border style.
	Parameters:
	- $border-generic-name :	The class name for the generic border.
	Notes:
	- [1] : The border style uses rgba to create a 1px solid border with 0.25 
		opacity around an element, which makes it look properly bordered. 
		Might be incompatible with older browsers.
	- [2] : The border style overwrites any border style as it uses 
		`!important`, exercise caution when using.
*/
@mixin make-border-generic($border-generic-name){
	.#{$border-generic-name}{
		border: 1px solid rgba(0,0,0, 0.25) !important;
	}
}
/*
	Mixin for generic border radius styles.
	Parameters:
	- $border-style-name   :	The class name for the generic border radius style.
	- $border-style-radius :	The radius for the generic border radius style.
	Notes:
	- [1] : The border style overwrites any border style as it uses 
		`!important`, exercise caution when using.
*/
@mixin make-border-radial-style($border-style-name, $border-style-radius){
	.#{$border-style-name}{
		border-radius: $border-style-radius !important;
	}
}
/*
	Mixin for generic contextual color text styles.
	Parameters:
	- $colored-text-name  :	The class name for the contextual color text style.
	- $colored-text-color :	The color for the contextual color text style.
	Notes:
	- [1] : The contextual color text style overwrites any text color as it uses 
		`!important`, exercise caution when using.
*/
@mixin make-colored-text($colored-text-name, $colored-text-color){
	.#{$colored-text-name}{
		color: $colored-text-color !important;
	}
}
/*
	Mixin for generic contextual background text styles.
	Parameters:
	- $colored-bg-text-name  :	The class name for the contextual background text style.
	- $colored-bg-text-color :	The background color for the contextual background text style.
	Notes:
	- [1] : The contextual background text style overwrites any text color as it 
		uses  `!important`, exercise caution when using.
*/
@mixin make-colored-bg-text($colored-bg-text-name, $colored-bg-text-color){
	.#{$colored-bg-text-name}{
		background-color: $colored-bg-text-color !important;
	}
}
/*
	Mixin for simple caret utility class.
	Parameters:
	- $caret-name  :	The class name for caret utility class.
	- $caret-size  :	The size of the caret utility element. [1]
	- $caret-color :	The color of the caret utility element.
	Notes:
	- [1] : The caret is built using the border trick. Sizes can be specified
		in either `px` or `em`, but they might take a bit of tweaking to
		get right.
*/
@mixin make-caret-down($caret-name, $caret-size, $caret-color){
	.#{$caret-name} {
		display: inline-block;
		vertical-align: middle;
		line-height: 1;
		width: 0; 
		height: 0; 
		border-left: $caret-size solid transparent;
		border-right: $caret-size solid transparent;
		border-top: $caret-size solid $caret-color;
	}
}
/*
	Mixin for simple close sign utility class.
	Parameters:
	- $close-name        :	The class name for close utility class.
	- $close-color       :	The color of the close utility element.
	- $close-cursor      :	The cursor for the close utility element.
	- $close-font-size   :	The font-size for the close utility element.
	- $close-font-weight :	The font-weight for the close utility element.
	- $close-hover-color :	The color of the close utility element when hovering over it.
*/
@mixin make-close($close-name, $close-color, $close-cursor, $close-font-size, $close-font-weight, $close-hover-color){
	.#{$close-name}{
		display: inline-block;	 
		vertical-align: middle;  
		line-height: 1; 
	    color: $close-color;     
	    font-size: $close-font-size;
	    font-weight: $close-font-weight;
	    cursor: $close-cursor;
	    &:before {
	    	content: '\00d7';
		}
		&:hover{
			color: $close-hover-color;
		}
	}
}
/*
	Mixin for quick float classes. [1]
	Parameters:
	- $drag-left-name  :	The class name for left drags.
	- $drag-right-name :	The class name for right drags.
	Notes:
	- [1] : These classes use `!important` to set the float properties, 
		exercise caution when using.
*/
@mixin make-drags($drag-left-name, $drag-right-name){
	.#{$drag-left-name} {
		float: left !important;
	}
	.#{$drag-right-name} {
		float: right !important;
	}
}
/*
	Mixin for center block class.
	Parameters:
	- $center-block-name :	The class name for center block class.
*/
@mixin make-center-block($center-block-name){
	.#{$center-block-name} {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}
/*
	Mixin for clearfix class.
	Parameters:
	- $clearfix-name :	The class name for the clearfix class.
*/
@mixin make-clearfix($clearfix-name){
	.#{$clearfix-name} {
		&:before, &:after {
			content: "";
			display: table;
			clear: both;
		}
	}
}
/*
	Mixin for hidden class. [1]
	Parameters:
	- $hidden-name :	The class name for hidden elements.
	Notes:
	- [1] : This class uses `!important` to set the display property, 
		exercise caution when using.
*/
@mixin make-hidden($hidden-name){
	.#{$hidden-name}{
		display: none !important;
	}
}