// /*==========  $Common patterns  ==========*\
@mixin linear-gradient($start, $stop) {
	background: linear-gradient(180deg, $start, $stop);
}
/// Resizable
@mixin resizable {
	overflow: auto;
	resize: both;
}

/// Visually truncate text from an elment
/// @param {Number} truncation-boundary size where the text will be truncated
@mixin truncate($truncation-boundary) {
	@if type-of($truncation-boundary) == number {
		max-width: $truncation-boundary;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

// /*==========  $Other  ==========*\
/// Custom vendor prefixer
/// @param {String} $property name of the css property to vendor-prefix
/// @param {Multiple} $value value to be applied to the css property
@mixin vendor($property, $value...){
  -webkit-#{$property}:$value;
	 -moz-#{$property}:$value;
	  -ms-#{$property}:$value;
	   -o-#{$property}:$value;
		  #{$property}:$value;
}

/// Creates a vertical gradient
/// @param {Color} $start top color for the gradient
/// @param {Color} $stop bottom color for the gradient
@mixin default-gradient($start: $c-ghostwhite, $stop: $c-gainsboro) {
	background: $start; // Fallback color
	@include linear-gradient($start, $stop);
}

/// Creates a circle with size $size
/// @param {Number} $size
@mixin circle($size) {
	border-radius: 50%;
	width: $size;
	height: $size;
}

@mixin selection {
	background: $c-brand-main;
	color: $c-white;
	text-shadow: none;
}
