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

@mixin jnt-icon($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    color: null,
    size: null,
    stroke: null,
    sizes: (
      auto: (
        size: 24px
      ),
      tiny: (
        size: 12px
      ),
      small: (
        size: 14px
      ),
      normal: (
        size: 18px
      ),
      large: (
        size: 24px
      )
    )
  );
  $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-icon-host)} {
    @if $declare {
      display: inline-flex;
      vertical-align: middle;
      @include jnt-svg-icon();
      @include jnt-font-icon();
      @include jnt-animated-icon();
    }
    &[data-type='font'] {
      #{$wrapper} [data-icon][child-of=jnt-icon-host] {
        @include jnt-font-icon((
          color: map-get($vars, color),
          size: if(map-get($vars, size), map-get($vars, size) !important, null),
          line-height: if(map-get($vars, size), 1, null),
        ), '&');
      }
    }
    &[data-type='animated'] {
      #{$wrapper} [data-icon][child-of=jnt-icon-host] {
        @include jnt-animated-icon((
          color: map-get($vars, color)
        ), '&');
        @if map-has-key($vars, size) {
          @include jnt-animated-icon((
            width: if(map-get($vars, size), map-get($vars, size) !important, null),
            height: if(map-get($vars, size), map-get($vars, size) !important, null)
          ), '&');
        }
      }
    }
    &[data-type='svg'] {
      #{$wrapper} [data-icon][child-of=jnt-icon-host] {
        @include jnt-svg-icon((
          color: map-get($vars, color),
          stroke: map-get($vars, stroke),
        ), '&');
        @if map-has-key($vars, size) {
          @include jnt-svg-icon((
            width: if(map-get($vars, size), map-get($vars, size) !important, null),
            height: if(map-get($vars, size), map-get($vars, size) !important, null)
          ), '&');
        }
      }
    }
    @if map-has-key($vars, sizes) {
      @each $key, $size in map-get($vars, sizes) {
        &[data-size='#{$key}'] {
          &[data-type='font'] {
            &:not([data-size='auto']) {
              #{$wrapper} [data-icon][child-of=jnt-icon-host] {
                @include jnt-font-icon((
                  size: map-get($size, size),
                  line-height: 1
                ), '&');
              }
            }
          }
          &[data-type='animated'] {
            #{$wrapper} [data-icon][child-of=jnt-icon-host] {
              @include jnt-animated-icon((
                width: map-get($size, size),
                height: map-get($size, size)
              ), '&');
            }
          }
          &[data-type='svg'] {
            #{$wrapper} [data-icon][child-of=jnt-icon-host] {
              @include jnt-svg-icon((
                width: map-get($size, size),
                height: map-get($size, size)
              ), '&');
            }
          }
        }
      }
    }
  }
}
@if $jnt-debug {
  @debug 'icon compiled';
}

@mixin jnt-svg-icon($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    width: null,
    height: null,
    color: $jnt-primary-text-color,
    stroke: 1.5px
  );
  $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-svg-icon-host)} {
    @if $declare {
      display: inline-flex;
      line-height: 0;
      &[data-tags*='stroked'] {
        &[data-stroke='thin'] {
          svg[child-of=jnt-svg-icon-host] {
            stroke-width: 1px;
          }
        }
        &[data-stroke='bold'] {
          svg[child-of=jnt-svg-icon-host] {
            stroke-width: 2px;
          }
        }
        svg[child-of=jnt-svg-icon-host] {
          shape-rendering: geometricPrecision;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
          path[child-of=jnt-svg-icon-host], line[child-of=jnt-svg-icon-host], rect[child-of=jnt-svg-icon-host], circle[child-of=jnt-svg-icon-host] {
            vector-effect: non-scaling-stroke;
          }
        }
      }
    }
    $color: map-get($vars, color);
    &[data-tags*='stroked'] {
      svg[child-of=jnt-svg-icon-host] {
        stroke-width: map-get($vars, stroke);
      }
    }
    &[data-has-color='false'] {
      &[data-tags*='stroked'] {
        svg[child-of=jnt-svg-icon-host] {
          stroke: $color;
        }
      }
      &[data-tags*='filled'] svg[child-of=jnt-svg-icon-host] {
        fill: $color;
      }
    }
    width: map-get($vars, width);
    height: map-get($vars, height);
  }
}
@if $jnt-debug {
  @debug 'svg icon compiled';
}

@mixin jnt-font-icon($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    color: null,
    size: null,
    line-height: 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-font-icon-host)} {
    @if $declare {
      display: inline-block;
      font-weight: $jnt-font-weight-base;
      &.icon-loading {
        animation: jnt-rotate .6s linear infinite;
      }
    }
    font-size: map-get($vars, size);
    color: map-get($vars, color);
    line-height: map-get($vars, line-height);
  }
}
@keyframes jnt-rotate {
  100% {
    transform: rotate(360deg);
  }
}
@if $jnt-debug {
  @debug 'font-icon compiled';
}

@mixin jnt-animated-icon($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    width: null,
    height: null,
    color: $jnt-primary-text-color,
    stroke: 1.5px
  );
  $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-animated-icon-host)} {
    @if $declare {
      display: inline-flex;
      line-height: 0;
      &[data-tags*='stroked'] {
        svg[child-of=jnt-animated-icon-host] {
          shape-rendering: geometricPrecision;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
          path[child-of=jnt-animated-icon-host], line[child-of=jnt-animated-icon-host], rect[child-of=jnt-animated-icon-host], circle[child-of=jnt-animated-icon-host] {
            vector-effect: non-scaling-stroke;
          }
        }
      }
    }
    $color: map-get($vars, color);
    &[data-tags*='stroked'] {
      svg[child-of=jnt-animated-icon-host] {
        stroke-width: map-get($vars, stroke);
      }
    }
    &[data-has-color='false'] {
      &[data-tags*='stroked'] {
        svg[child-of=jnt-animated-icon-host] {
          stroke: $color;
        }
      }
      &[data-tags*='filled'] svg[child-of=jnt-animated-icon-host] {
        fill: $color;
      }
    }
    width: map-get($vars, width);
    height: map-get($vars, height);
  }
}
@if $jnt-debug {
  @debug 'animated icon compiled';
}