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

@mixin jnt-image-uploader($passed: (), $context: null, $strategy: 'changes') {
  $defs: ();
  $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;
  }
  [host=jnt-image-uploader-host] {
    @if $declare {
      display: flex;
      justify-content: center;
      position: relative;
      border: 1px solid $jnt-control-border-color;
      box-sizing: border-box;
      padding: $jnt-gutter-normal;
      border-radius: $jnt-corner-small;
      background: $jnt-control-background;
    }
  }
  [data-select-file][child-of=jnt-image-uploader-host] {
    @if $declare {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      cursor: pointer;
      width: 100%;
      opacity: 0;
      z-index: 1;
    }
  }
  [data-cropper][child-of=jnt-image-uploader-host] {
    @if $declare {
      flex: 1;
    }
  }
}