@import '../jnt-variables';
@import '../jnt-hosts';
@import '../jnt-functions';

$type-vertical: 'vertical';
$type-horizontal: 'horizontal';
@mixin stack-gutters($property, $gutter, $wrapper) {
  & > #{$wrapper} :not(:last-child):not([data-hidden='true']):not(router-outlet) {
    #{$property}: $gutter;
  }
}
@mixin stack-spacing($gutter, $wrapper) {
  & {
    margin-top: -$gutter;
    > #{$wrapper}:not(router-outlet) {
      margin-top: $gutter;
    }
  }
}
@mixin jnt-stack($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    gutters: (
      tiny: $jnt-gutter-tiny,
      small: $jnt-gutter-small,
      normal: $jnt-gutter-normal,
      big: $jnt-gutter-big,
      large: $jnt-gutter-large,
      huge: $jnt-gutter-huge
    ),
    padding: null,
    border: null,
    corner: null,
    background: null
  );
  $vars: $passed;
  $declare: false;
  $wrapper: null;
  @if $jnt-ng-deep {
    $wrapper: '::ng-deep';
  }
  @if $passed == () or $strategy == 'merge' {
    $vars: recursive-map-merge($defs, $passed);
    $declare: true;
  }
  #{if($context, $context, $jnt-stack-host)} {
    @if $declare {
      display: flex;
      text-align: left;
      &[data-align='start'] {
        align-items: flex-start;
      }
      &[data-align='center'] {
        align-items: center;
      }
      &[data-align='end'] {
        align-items: flex-end;
      }
      &[data-align='stretch'] {
        align-items: stretch;
      }
      &[data-align='baseline'] {
        align-items: baseline;
      }
      &[data-justify='start'] {
        justify-content: flex-start;
      }
      &[data-justify='center'] {
        justify-content: center;
      }
      &[data-justify='end'] {
        justify-content: flex-end;
      }
      &[data-justify='between'] {
        justify-content: space-between;
      }
      &[data-justify='around'] {
        justify-content: space-around;
      }
      &[data-justify='evenly'] {
        justify-content: space-evenly;
      }
      &[data-wrap='wrap'] {
        flex-wrap: wrap;
      }
      &[data-wrap='nowrap'] {
        flex-wrap: nowrap;
      }
      &[data-wrap='reverse'] {
        flex-wrap: wrap-reverse;
      }
      &[data-orientation = '#{$type-vertical}'] {
        flex-direction: column;
      }
      &[data-orientation = '#{$type-horizontal}'] {
        flex-direction: row;
      }
    }
    @if map-has-key($vars, gutters) {
      $gutters: map-get($vars, gutters);
      @each $gutter, $map in $gutters {
        &[data-gutter = '#{$gutter}'] {
          &[data-orientation = '#{$type-vertical}'] {
            @include stack-gutters(margin-bottom, $map, $wrapper);
          }
          &[data-orientation = '#{$type-horizontal}'] {
            @include stack-gutters(margin-right, $map, $wrapper);
          }
        }
        &[data-spacing = '#{$gutter}'] {
          &[data-orientation = '#{$type-horizontal}'] {
            @include stack-spacing($map, $wrapper);
          }
        }
        &[data-padding='#{$gutter}'] {
          padding: $map;
        }
      }
    }
    padding: map-get($vars, padding);
    border: map-get($vars, border);
    border-radius: map-get($vars, corner);
    background: map-get($vars, background);
    @content;
  }
}
@if $jnt-debug {
  @debug 'stack compiled';
}