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

@mixin jnt-informer($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    outer: (
      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;
  $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-informer-host)} {
    @if $declare {
      &[data-placement='fixed'] {
        position: fixed;
      }
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba($jnt-primary-color, .75);
      padding: $jnt-gutter-normal;
    }
    &[data-placement='absolute'] {
      position: absolute;
      @if map-has-key($vars, outer) {
        $outer: map-get($vars, outer);
        @each $outer, $map in $outer {
          &[data-outer = '#{$outer}'] {
            margin: -($map);
          }
        }
      }
    }
    &[data-context='modal'] {
      border-radius: $jnt-corner-normal;
      top: $jnt-gutter-small;
      right: $jnt-gutter-small;
      left: $jnt-gutter-small;
      bottom: $jnt-gutter-small;
    }
  }
  #{$context} #{$wrapper} [data-icon][child-of=jnt-informer-host] {
    @include jnt-icon((color: $jnt-white-color, size: 50px), '&');
  }
  #{$context} #{$wrapper} [data-messages][child-of=jnt-informer-host] {
    @if $declare {
      color: $jnt-white-color;
      max-width: 350px;
      &[data-single] {
        font-size: $jnt-font-size-normal;
      }
    }
  }
}
@if $jnt-debug {
  @debug 'informer compiled';
}