/**
 * Set a complexe position styling like position:absolute; top:0; left:100%; etc...
 * This mixin gives you some shortcuts to align your element top, bottom, middle, center, etc...
 *
 * @param 		{String} 			[$position=absolute] 			The position css property
 * @param 		{String} 			[$vertical-align=top] 			The vertical alignement wanted (top,middle,bottom)
 * @param 		{String} 			[$align=left] 					The horizontal alignement wanted (left,center,right)
 * @param 		{Number} 			[$top=null] 					The top property wanted
 * @param 		{Number} 			[$right=null] 					The right property wanted
 * @param 		{Number} 			[$bottom=null] 					The bottom property wanted
 * @param 		{Number} 			[$left=null] 					The left property wanted
 * @return 		{Map} 												The map representation of the position wanted
 *
 * @example
 * .my-cool-element {
 * 	// absolute top right
 * 	\@include s-position(absolute, top, right);
 * 	// custom right and bottom values
 * 	\@include s-position(absolute,
 * 		$bottom : 20px,
 * 		$right : 20px
 * 	);
 * 	// etc...
 * }
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com> (https://olivierbossel.com)
 */
@mixin s-position(
  $position,
  $vertical-align: top,
  $align: left,
  $top: null,
  $right: null,
  $bottom: null,
  $left: null,
  $z: null
) {
  // get map
  $map: s-position-map(
    $position: $position,
    $vertical-align: $vertical-align,
    $align: $align,
    $top: $top,
    $right: $right,
    $bottom: $bottom,
    $left: $left
  );

  // get map
  @each $prop, $value in $map {
    #{$prop}: $value;
  }
}