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

@mixin jnt-timeline($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    sizes: (
      mark: 48px,
      icon: 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-timeline-host)} {
    @if $declare {
      @include reset-default();
      display: block;
    }
  }
  #{$wrapper} #{$context} [data-lines][child-of=jnt-timeline-host] {
    @if map-has-key($vars, sizes) {
      $sizes: map-get($vars, sizes);
      [data-mark][child-of=jnt-timeline-host] {
        width: map-get($sizes, mark);
        [data-icon][child-of=jnt-timeline-host] {
          @include jnt-icon((size: map-get($sizes, icon)), '&');
        }
      }
      [data-circle][child-of=jnt-timeline-host] {
        width: map-get($sizes, mark);
        height: map-get($sizes, mark);
      }
      [data-line][child-of=jnt-timeline-host] {
        width: map-get($sizes, mark);
        min-width: map-get($sizes, mark);
        max-width: map-get($sizes, mark);
      }
    }
    [data-mark][child-of=jnt-timeline-host] {
      @if $declare {
        display: flex;
        justify-content: center;
        [data-circle][child-of=jnt-timeline-host] {
          border-radius: 50%;
          color: $jnt-white-color;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: $jnt-font-size-big;
        }
        [data-icon][child-of=jnt-timeline-host] {
          line-height: 1;
        }
      }
    }
    [data-line][child-of=jnt-timeline-host] {
      @if $declare {
        display: flex;
        flex: 1;
        justify-content: center;
        div[child-of=jnt-timeline-host] {
          width: 10px;
          background: radial-gradient($jnt-primary-light-color 2px, transparent 1px);
          background-size: 10px 10px;
          background-repeat: repeat-y;
        }
      }
    }
    &:last-child {
      [data-line][child-of=jnt-timeline-host] {
        @if $declare {
          div[child-of=jnt-timeline-host] {
            display: none;
          }
        }
      }
    }
    [data-title][child-of=jnt-timeline-host] {
      @if $declare {
        font-size: $jnt-font-size-big;
        display: flex;
        align-items: center;
      }
    }
    [data-content][child-of=jnt-timeline-host] {
      @if $declare {
        padding: $jnt-gutter-tiny 0;
        flex: 1;
      }
    }
  }
}
@if $jnt-debug {
  @debug 'timeline compiled';
}