// directional-property mixins are shorthands
// for writing properties like the following
//
// @include margin(null 0 10px);
// ------
// margin-right: 0;
// margin-bottom: 10px;
// margin-left: 0;
//
// - or -
//
// @include border-style(dotted null);
// ------
// border-top-style: dotted;
// border-bottom-style: dotted;
//
// ------
//
// Note: You can also use false instead of null

@function collapse-directionals($vals) {
	$output: null;

	$A: nth($vals, 1);
	$B: if(length($vals) < 2, $A, nth($vals, 2));
	$C: if(length($vals) < 3, $A, nth($vals, 3));
	$D: if(length($vals) < 2, $A, nth($vals, if(length($vals) < 4, 2, 4)));

	@if $A == 0 {
		$A: 0
	}
	@if $B == 0 {
		$B: 0
	}
	@if $C == 0 {
		$C: 0
	}
	@if $D == 0 {
		$D: 0
	}

	@if $A == $B and $A == $C and $A == $D {
		$output: $A
	} @else if $A == $C and $B == $D {
		$output: $A $B
	} @else if $B == $D {
		$output: $A $B $C
	} @else {
		$output: $A $B $C $D
	}

	@return $output;
}

@function contains-falsy($list) {
	@each $item in $list {
		@if not $item {
			@return true;
		}
	}

	@return false;
}

@mixin directional-property($pre, $suf, $vals) {
	// Property Names
	$top: $pre + "-top"    + if($suf, "-#{$suf}", "");
	$bottom: $pre + "-bottom" + if($suf, "-#{$suf}", "");
	$left: $pre + "-left"   + if($suf, "-#{$suf}", "");
	$right: $pre + "-right"  + if($suf, "-#{$suf}", "");
	$all: $pre +             if($suf, "-#{$suf}", "");

	$vals: collapse-directionals($vals);

	@if contains-falsy($vals) {
		@if nth($vals, 1) {
			#{$top}: nth($vals, 1);
		}

		@if length($vals) == 1 {
			@if nth($vals, 1) {
				#{$right}: nth($vals, 1);
			}
		} @else {
			@if nth($vals, 2) {
				#{$right}: nth($vals, 2);
			}
		}

		// prop: top/bottom right/left
		@if length($vals) == 2 {
			@if nth($vals, 1) {
				#{$bottom}: nth($vals, 1);
			}
			@if nth($vals, 2) {
				#{$left}: nth($vals, 2);
			}

			// prop: top right/left bottom
		} @else if length($vals) == 3 {
			@if nth($vals, 3) {
				#{$bottom}: nth($vals, 3);
			}
			@if nth($vals, 2) {
				#{$left}: nth($vals, 2);
			}

			// prop: top right bottom left
		} @else if length($vals) == 4 {
			@if nth($vals, 3) {
				#{$bottom}: nth($vals, 3);
			}
			@if nth($vals, 4) {
				#{$left}: nth($vals, 4);
			}
		}

		// prop: top/right/bottom/left
	} @else {
		#{$all}: $vals;
	}
}

@mixin margin($vals...) {
	@include directional-property(margin, false, $vals...);
}

@mixin padding($vals...) {
	@include directional-property(padding, false, $vals...);
}

@mixin border-style($vals...) {
	@include directional-property(border, style, $vals...);
}

@mixin border-color($vals...) {
	@include directional-property(border, color, $vals...);
}

@mixin border-width($vals...) {
	@include directional-property(border, width, $vals...);
}
