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

@mixin jnt-date-period($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    color: $jnt-primary-text-color,
    bar: (
      background: $jnt-muted-color
    ),
    line: (
      background: $jnt-primary-color
    ),
    progress: (
      background: $jnt-primary-color
    ),
    date: (
      color: $jnt-primary-text-color
    )
  );
  $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-date-period-host)} {
    @if $declare {
      @include reset-default();
      display: flex;
      flex-direction: column;
    }
  }
  #{$context} #{$wrapper} [data-dates][child-of=jnt-date-period-host] {
    @if $declare {
      margin-bottom: $jnt-gutter-tiny;
    }
    [data-date][child-of=jnt-date-period-host] {
      @if $declare {
        font-size: 12px;
        display: flex;
        flex-direction: column;
      }
      @if map-has-key($vars, date) {
        $date: map-get($vars, date);
        color: map-get($date, color);
      }
      &[data-left] {
        @if $declare {
          align-items: flex-start;
        }
      }
      &[data-right] {
        @if $declare {
          align-items: flex-end;
          margin-left: auto;
        }
      }
    }
  }
  #{$context} #{$wrapper} [data-bar][child-of=jnt-date-period-host] {
    @if map-has-key($vars, bar) {
      $bar: map-get($vars, bar);
      background-color: map-get($bar, background);
    }
    @if $declare {
      min-height: 3px;
      height: 3px;
      border-radius: 1px;
      box-sizing: border-box;
      position: relative;
    }
    [data-line][child-of=jnt-date-period-host] {
      @if $declare {
        position: absolute;
        bottom: 0;
        height: 6px;
        width: 3px;
        border-radius: 2px 2px 0 0;
      }
      @if map-has-key($vars, line) {
        $line: map-get($vars, line);
        background-color: map-get($line, background);
      }
      &[data-left] {
        @if $declare {
          left: 0;
        }
      }
      &[data-right] {
        @if $declare {
          right: 0;
        }
      }
    }
    [data-progress][child-of=jnt-date-period-host] {
      @if map-has-key($vars, progress) {
        $progress: map-get($vars, progress);
        background-color: map-get($progress, background);
      }
      @if $declare {
        height: 100%;
        border-radius: 0 0 1px 1px;
        width: 0;
        max-width: 100%;
        &[data-full] {
          width: 100%;
        }
      }
    }
  }
  #{$context} #{$wrapper} [data-days][child-of=jnt-date-period-host] {
    @if $declare {
      text-align: center;
      margin-top: $jnt-gutter-small;
      font-size: 12px;
    }
    color: map-get($vars, color);
  }
}
@if $jnt-debug {
  @debug 'date-period compiled';
}