feat: change xy-cell default gutter positions according to direction

Use `left right` gutters for horizontal cells and `top bottom` gutters for vertical cells by default

BREAKING CHANGE

scss/xy-grid/_cell.scss

@@ -98,15 +98,15 @@
 /// @param {Boolean} $gutter-output [true] - Whether or not to output gutters. Always `true` for margin gutters.
 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
 /// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.
-/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
+/// @param {List} $gutter-position [null] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. By default `right left` for horizontal cells and `top bottom` for vertical cells.
 /// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
 /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
 @mixin xy-cell(
   $size: full,
   $gutter-output: true,
   $gutters: $grid-margin-gutters,
   $gutter-type: margin,
-  $gutter-position: right left,
+  $gutter-position: null,
   $breakpoint: null,
   $vertical: false
 ) {
@@ -123,6 +123,11 @@
     }
   }
 
+  // Get the default gutter position according to cell direction
+  @if($gutter-position == null) {
+    $gutter-position: if($vertical == true, top bottom, left right);
+  }
+
   // Get the gutter for the given breakpoint/value.
   $gutter: -zf-get-bp-val($gutters, $breakpoint);
   // If the breakpoint is a fallback, use a fallback gutter as well

scss/xy-grid/_layout.scss

@@ -13,7 +13,7 @@
 /// @param {Boolean} $gutter-output [true] - Whether or not to output gutters. Always `true` for margin gutters.
 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
 /// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin` or `padding`.
-/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
+/// @param {List} $gutter-position [null] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. By default `right left` for horizontal cells and `top bottom` for vertical cells.
 /// @param {String} $breakpoint [null] - The breakpoint to use for the cell generation.
 /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
 @mixin xy-grid-layout(
@@ -22,7 +22,7 @@
   $gutter-output: true,
   $gutters: $grid-margin-gutters,
   $gutter-type: margin,
-  $gutter-position: right left,
+  $gutter-position: null,
   $breakpoint: null,
   $vertical: false
 ) {