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

@mixin jnt-picture($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    background-color: $jnt-secondary-background,
    corner: null,
    border: null,
    cursor: default,
    placeholder: (
      color: rgba($jnt-primary-color, .4),
      size: 30px
    )
  );
  $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-picture-host)} {
    @if $declare {
      display: flex;
      overflow: hidden;
    }
    border-radius: map-get($vars, corner);
    border: map-get($vars, border);
    cursor: map-get($vars, cursor);
    &[data-has-src='false'] {
      background-color: map-get($vars, background-color);
    }
    &[data-fit='width'] {
      img[child-of=jnt-picture-host] {
        @if $declare {
          width: 100%;
          height: auto;
        }
      }
    }
    &[data-fit='height'] {
      img[child-of=jnt-picture-host] {
        @if $declare {
          width: auto;
          height: 100%;
        }
      }
    }
    &[data-position='center'] {
      @if $declare {
        justify-content: center;
        align-items: center;
      }
    }
    &[data-position='left'] {
      @if $declare {
        justify-content: flex-start;
      }
    }
    &[data-position='right'] {
      @if $declare {
        justify-content: flex-end;
      }
    }
    &[data-position='bottom'] {
      @if $declare {
        align-items: flex-end;
      }
    }
    &[data-position='top'] {
      @if $declare {
        align-items: flex-start;
      }
    }
  }
  #{$wrapper} #{$context} [data-icon][child-of=jnt-picture-host] {
    @if $declare {
      line-height: 1;
    }
    @if map-has-key($vars, placeholder) {
      $placeholder: map-get($vars, placeholder);
      @include jnt-icon((color: map-get($placeholder, color), size: map-get($placeholder, size)), '&');
    }
  }
}