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

@mixin jnt-grid-container($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    width: 1140px,
    padding: 0 $jnt-grid-gutter
  );
  $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-container-host)} {
    @if $declare {
      display: block;
      position: relative;
      width: 100%;
      margin: 0 auto;
      box-sizing: border-box;
      &[data-width='fluid'] {
        max-width: 100%;
      }
    }
    max-width: map-get($vars, width);
    padding: map-get($vars, padding);
    @content;
  }
}
@if $jnt-debug {
  @debug 'container compiled';
}

@mixin col-spacing($gutter) {
  & {
    margin-top: -$gutter;
    > :not(router-outlet) {
      margin-top: $gutter;
    }
  }
}
@mixin jnt-grid-row($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
    )
  );
  $vars: $passed;
  $declare: false;
  @if $passed == () or $strategy == 'merge' {
    $vars: recursive-map-merge($defs, $passed);
    $declare: true;
  }
  #{if($context, $context, $jnt-row-host)} {
    @if $declare {
      display: flex;
      text-align: left;
      flex-wrap: wrap;
      &[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-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;
      }
    }
    @if map-has-key($vars, gutters) {
      $gutters: map-get($vars, gutters);
      @each $gutter, $map in $gutters {
        &[data-spacing = '#{$gutter}'] {
          @include col-spacing($map);
        }
        &[data-gutter = '#{$gutter}'] {
          margin-left: -$map;
          margin-right: -$map;
          > * {
            padding-left: $map;
            padding-right: $map;
          }
        }
      }
    }
  }
}
@if $jnt-debug {
  @debug 'row compiled';
}

@mixin jnt-grid-col($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    grid-columns: 12
  );
  $vars: $passed;
  $declare: false;
  @if $passed == () or $strategy == 'merge' {
    $vars: recursive-map-merge($defs, $passed);
    $declare: true;
  }
  #{if($context, $context, $jnt-col-host)} {
    @if $declare {
      display: block;
      box-sizing: border-box;
      position: relative;
    }
    @each $breakpoints, $value in $jnt-grid-breakpoints {
      @media screen and (min-width: $value) {
        @for $i from 1 through map-get($vars, grid-columns) {
          &[data-#{$breakpoints} = '#{$i}'] {
            $width: $i/map-get($vars, grid-columns);
            flex: 0 0 percentage($width);
            max-width: percentage($width);
          }
        }
      }
    }
    @for $i from 1 through map-get($vars, grid-columns) {
      &[data-span = '#{$i}'] {
        $width: $i/map-get($vars, grid-columns);
        flex: 0 0 percentage($width);
        max-width: percentage($width);
      }
    }
  }
}
@if $jnt-debug {
  @debug 'col compiled';
}