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

@keyframes jnt-skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@mixin skeleton-size($size) {
  [data-avatar][child-of=jnt-skeleton-host] {
    min-width: $size;
    width: $size;
    min-height: $size;
    height: $size;
  }
}
@mixin jnt-skeleton($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    background: (
      from: $jnt-secondary-background,
      to: $jnt-purple-lighten-color
    ),
    line: (
      height: 24px,
      corner: $jnt-corner-normal
    ),
    avatar: (
      sizes: (
        tiny: 24px,
        small: 40px,
        normal: 80px,
        large: 120px
      )
    ),
    card: (
      height: 70px,
      corner: $jnt-corner-normal
    )
  );
  $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-skeleton-host)} {
    @if $declare {
      display: block;
    }
    @if map-has-key($vars, avatar) {
      $sizes: map-get(map-get($vars, avatar), sizes);
      @each $size, $map in $sizes {
        &[data-size = '#{$size}'] {
          @include skeleton-size($map);
        }
      }
    }
    &[data-type='text'] {
      @if $declare {
        width: 100%;
      }
    }
    &[data-animated='true'] {
      [data-line][child-of=jnt-skeleton-host], [data-avatar][child-of=jnt-skeleton-host], [data-card][child-of=jnt-skeleton-host] {
        @if $declare {
          animation: jnt-skeleton-loading 1.5s ease infinite;
        }
      }
    }
  }
  #{$context} #{$wrapper} [data-line][child-of=jnt-skeleton-host] {
    @if map-has-key($vars, line) {
      $line: map-get($vars, line);
      min-height: map-get($line, height);
      border-radius: map-get($line, corner);
    }
    @if $declare {
      width: 100%;
    }
  }
  #{$context} #{$wrapper} [data-card][child-of=jnt-skeleton-host] {
    @if map-has-key($vars, card) {
      $card: map-get($vars, card);
      min-height: map-get($card, height);
      border-radius: map-get($card, corner);
    }
    @if $declare {
      width: 100%;
    }
  }
  #{$context} #{$wrapper} [data-avatar='true'][child-of=jnt-skeleton-host] {
    @if $declare {
      border-radius: 50%;
    }
  }
  #{$context} #{$wrapper} [data-line][child-of=jnt-skeleton-host], [data-avatar][child-of=jnt-skeleton-host], [data-card][child-of=jnt-skeleton-host] {
    @if map-has-key($vars, background) {
      $background: map-get($vars, background);
      background: map-get($background, from) linear-gradient(90deg, map-get($background, from) 25%, map-get($background, to) 37%, map-get($background, from) 63%);
      background-size: 400% 100%;
    }
  }
}
@if $jnt-debug {
  @debug 'skeleton compiled';
}