// 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...);
}