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

@mixin jnt-pager($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;
  }
  #{if($context, $context, $jnt-pager-host)} {
    @if $declare {
      @include reset-default();
      display: block;
    }
  }
  #{$context} #{$wrapper} a[child-of=jnt-pager-host] {
    @if $declare {
      text-decoration: none;
      padding: 1px $jnt-gutter-small;
      border-radius: $jnt-corner-small;
      transition: background-color .3s;
      user-select: none;
      cursor: pointer;
      &:hover {
        background-color: $jnt-highlight-background;
      }
      &:focus {
        outline: 0;
        box-shadow: inset $jnt-outline-shadow-small $jnt-primary-light-color;
      }
    }
    &[active='true'] {
      @if $declare {
        pointer-events: none;
        background-color: $jnt-primary-color;
        color: $jnt-white-color;
      }
    }
    &[disabled='true'] {
      @if $declare {
        cursor: default;
        pointer-events: none;
        [data-icon][child-of=jnt-pager-host] {
          @include jnt-icon((color: $jnt-muted-color), '&');
        }
      }
    }
    [data-icon][child-of=jnt-pager-host] {
      @if $declare {
        @include jnt-icon((
          color: $jnt-primary-text-light-color,
          size: 10px
        ), '&');
      }
    }
  }
}
@if $jnt-debug {
  @debug 'pager compiled';
}