@import '../jnt-variables';
@import '../layout/app';
@import '../forms/button';
@import '../layout/grid';
@import '../navigation/menu';
@import '../elements/icon';
@import '../layout/responsive';
@import '../elements/label';
@import '../jnt-hosts';
@import '../jnt-functions';

@mixin jnt-lp-slide($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    padding: (
      top: $jnt-gutter-large,
      right: 0,
      bottom: $jnt-gutter-huge,
      left: 0
    )
  );
  $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-lp-slide-host)} {
    @if $declare {
      display: block;
      box-sizing: border-box;
      position: relative;
    }
    @if map-has-key($vars, padding) {
      $space: map-get($vars, padding);
      padding-top: map-get($space, top);
      padding-right: map-get($space, right);
      padding-bottom: map-get($space, bottom);
      padding-left: map-get($space, left);
    }
    &[data-height='default'] {
      @if $declare {
        height: auto !important;
      }
    }
  }
}
@if $jnt-debug {
  @debug 'lp-slide compiled';
}

@mixin jnt-lp-layout($passed: (), $context: null, $strategy: 'changes') {
  $defs: ();
  $vars: $passed;
  $declare: false;
  @if $passed == () or $strategy == 'merge' {
    $vars: recursive-map-merge($defs, $passed);
    $declare: true;
  }
  [host=jnt-lp-layout-host] {
    @if $declare {
      display: block;
      font-family: $jnt-lp-layout-font-family;
      overflow-x: hidden;
      &[data-with-lp-header="true"] {
        @include jnt-lp-slide((
          padding: (
            top: $lp-header-height
          )
        ));
        @include max-for-tablet() {
          @include jnt-lp-slide((
            padding: (
              top: $lp-header-height-mobile
            )
          ));
        }
      }
    }
  }
}
@if $jnt-debug {
  @debug 'lp-layout compiled';
}

@mixin jnt-lp-rewind($passed: (), $context: null, $strategy: 'changes') {
  $defs: ();
  $vars: $passed;
  $declare: false;
  @if $passed == () or $strategy == 'merge' {
    $vars: recursive-map-merge($defs, $passed);
    $declare: true;
  }
  [host=jnt-lp-rewind-host] {
    @if $declare {
      display: block;
      position: fixed;
      right: 60px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
    }
  }
}
@if $jnt-debug {
  @debug 'lp-rewind compiled';
}

@mixin jnt-lp-header($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    position: fixed,
    background: transparent,
    padding: $jnt-gutter-large 0 $jnt-gutter-huge 0,
    mobile-padding: $jnt-gutter-big 0,
    height: $lp-header-height,
    mobile-height: $lp-header-height-mobile,
    z-index: 1,
    container-width: null,
    menu: (
      desktop: (
        top: (
          item: (
            color: $jnt-primary-color,
            text-transform: uppercase,
            font-weight: $jnt-font-weight-semi-bold,
            active: (
              color: $jnt-white-color
            ),
            icon: (
              size: $jnt-font-size-normal
            ),
            padding: $jnt-gutter-small,
            hover: (
              background-color: rgba($jnt-secondary-dark-color, .5)
            )
          )
        )
      ),
      tablet: (
        top: (
          item: (
            color: $jnt-primary-color,
            text-transform: uppercase,
            font-weight: $jnt-font-weight-semi-bold,
            active: (
              color: $jnt-white-color
            ),
            icon: (
              size: $jnt-font-size-normal
            ),
            padding: $jnt-gutter-small $jnt-gutter-normal
          )
        )
      ),
      burger: (
        icon: (
          size: 40px
        )
      )
    )
  );
  $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-lp-header-host)} {
    @if $declare {
      display: flex;
      box-sizing: border-box;
      top: 0;
      left: 0;
      right: 0;
      z-index: 3;
    }
    background-color: map-get($vars, background);
    padding: map-get($vars, padding);
    min-height: map-get($vars, height);
    height: map-get($vars, height);
    position: map-get($vars, position);
    @include max-for-tablet() {
      min-height: map-get($vars, mobile-height);
      height: map-get($vars, mobile-height);
      padding: map-get($vars, mobile-padding);
    }
  }
  #{$context} #{$wrapper} [data-container][child-of=jnt-lp-header-host] {
    @include jnt-grid-container((width: map-get($vars, container-width)), '&', true) {
      display: flex;
      justify-content: space-between;
    }
  ;
    &[data-desktop][child-of=jnt-lp-header-host] {
      [data-menu][child-of=jnt-lp-header-host] {
        @if $declare {
          display: flex;
          align-items: center;
        }
        @if map-has-key($vars, menu) {
          $menu: map-get($vars, menu);
          @include jnt-menu((
            map-get($menu, desktop)
          ));
        }
      }
    }
    &[data-tablet] {
      [data-menu][child-of=jnt-lp-header-host] {
        @if $declare {
          display: flex;
          align-items: center;
        }
        @if map-has-key($vars, menu) {
          $menu: map-get($vars, menu);
          @include jnt-menu((
            map-get($menu, tablet)
          ), '&');
        }
      }
    }
  }
  #{$context} #{$wrapper} [data-logo][child-of=jnt-lp-header-host] {
    @if $declare {
      display: flex;
      align-items: center;
      margin-right: $jnt-gutter-huge;
      & > * {
        display: block;
      }
    }
  }
  #{$context} #{$wrapper} [data-burger][child-of=jnt-lp-header-host] {
    @if map-has-key($vars, menu) {
      $menu: map-get($vars, menu);
      @if map-has-key($menu, burger) {
        $burger: map-get($menu, burger);
        @include jnt-button(($burger), '&');
      }
    }
  }
  #{$context} #{$wrapper} [data-actions][child-of=jnt-lp-header-host] {
    @if $declare {
      margin-left: auto;
    }
  }
  #{$context} #{$wrapper} [data-content][child-of=jnt-lp-header-host] {
    @if $declare {
      display: flex;
      align-items: center;
    }
  }
}
@if $jnt-debug {
  @debug 'lp-header compiled';
}

@mixin jnt-lp-footer($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    background: $jnt-primary-dark-color,
    height: $app-footer-height,
    padding: 0 $jnt-gutter-big
  );
  $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-lp-footer-host)} {
    @if $declare {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 0 0 auto;
      box-sizing: border-box;
      color: $jnt-white-color;
    }
    background-color: map-get($vars, background);
    min-height: map-get($vars, height);
    padding: map-get($vars, padding);
  }
}
@if $jnt-debug {
  @debug 'lp-footer compiled';
}