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

@mixin jnt-progress-bar($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    width: null,
    height: null,
    fill: 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-progress-bar-host)} {
    @if $declare {
      @include reset-default();
      display: flex;
      flex-direction: column;
    }
  }
  #{$context} [data-bar][child-of=jnt-progress-bar-host] {
    @if $declare {
      width: 100%;
      background-color: $jnt-muted-color;
      min-height: 3px;
      height: 3px;
      border-radius: 1px;
      box-sizing: border-box;
      [data-progress][child-of=jnt-progress-bar-host] {
        height: 100%;
        border-radius: 1px;
        &[data-fail='true'] {
          background-color: $jnt-fail-color;
        }
      }
    }
  }
}
@if $jnt-debug {
  @debug 'progress-bar compiled';
}