@import '../jnt-variables';
@import '../layout/responsive';
@import '../jnt-utils';
@import '../forms/button';
@import '../elements/icon';
@import '../navigation/menu';
@import '../layout/spinner';
@import '../jnt-functions';
@import '../jnt-hosts';
$app-header-height: 70px !default;
$app-footer-height: 50px !default;
$app-aside-width: 200px !default;
$app-aside-burger-width: 40px !default;
$app-aside-burger-height: 40px !default;
$app-aside-collapsed-width: 55px !default;
$lp-header-height: 150px !default;
$lp-header-height-mobile: 100px !default;

@mixin jnt-app-layout($passed: (), $context: null, $strategy: 'changes') {
  $vars: $passed;
  $declare: false;
  @if $passed == () or $strategy == 'merge' {
    $declare: true;
  }
  #{if($context, $context, $jnt-app-layout-host)} {
    @if $declare {
      display: block;
      overflow-x: hidden;
      position: relative;
      font-family: $jnt-app-layout-font-family;
      &[data-with-header='false'] {
        @include jnt-app-content((padding: (top: 0)));
        @include jnt-app-aside((padding: 0));
      }
      &[data-position='default'] {
        @include jnt-app-body((height: 0 !important));
      }
      &[data-position='fixed'] {
        >, > * > jnt-app-header[child-of=jnt-app-layout-host] {
          @include jnt-app-header((position: fixed));
        }
        >, > * >, > * > * >, > * > * > * > {
          @include jnt-app-aside((position: fixed));
        }
      }
    }
  }
}
@if $jnt-debug {
  @debug 'app-layout compiled';
}

@mixin jnt-app-busyness($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    position: fixed,
    background: (
      from: $jnt-secondary-background,
      to: $jnt-purple-lighten-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-app-busyness-host)} {
    position: map-get($vars, position);
    @if $declare {
      top: 0;
      left: 0;
      right: 0;
      z-index: 4;
      margin: 0;
      @include for-mobile() {
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba($jnt-secondary-color, 0.5);
      }
    }
  }
  [data-loader][child-of=jnt-app-busyness-host] {
    @if $declare {
      animation-name: jnt-app-business-loading;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      height: $jnt-gutter-tiny;
      width: 100%;
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px;
      background-color: $jnt-secondary-color;
    }
    @if map-has-key($vars, background) {
      $background: map-get($vars, background);
      background: map-get($background, from) linear-gradient(90deg, map-get($background, from) 25%, map-get($background, to) 37%, map-get($background, from) 63%);
    }
  }
}
@keyframes jnt-app-business-loading {
  0% {
    width: 0;
  }
  10% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@if $jnt-debug {
  @debug 'app-busyness compiled';
}

@mixin jnt-app-header($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    position: absolute,
    background: $jnt-primary-dark-color,
    padding: 0 $jnt-gutter-big,
    height: $app-header-height
  );
  $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-app-header-host)} {
    @if $declare {
      display: flex;
      justify-content: space-between;
      flex: 0 0 auto;
      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);
    position: map-get($vars, position);
    > [data-menu][child-of=jnt-app-header-host] {
      @if $declare {
        display: flex;
        align-items: center;
        @include jnt-menu((
          top: (
            item: (
              corner: $jnt-corner-small,
              color: $jnt-white-color,
              active: (
                color: $jnt-white-color,
                underline: true,
                underline-color: $jnt-white-color,
                background-color: transparent,
                shadow: none
              ),
              icon: (
                color: $jnt-white-color
              ),
              padding: $jnt-gutter-small,
              hover: (
                background-color: rgba($jnt-primary-light-color, .5)
              )
            )
          )
        ));
      }
    }
  }
  hr[child-of=jnt-app-header-host] {
    @if $declare {
      width: 100%;
      border: none;
      height: 1px;
      background: $jnt-secondary-color;
    }
  }
  #{$context} #{$wrapper} [data-logo][child-of=jnt-app-header-host] {
    @if $declare {
      display: flex;
      align-items: center;
      margin-right: $jnt-gutter-huge;
      & > * {
        display: block;
      }
    }
  }
  #{$context} #{$wrapper} [data-burger][child-of=jnt-app-header-host] {
    @if $declare {
      @include jnt-button((color: $jnt-white-color,
        hover-color: $jnt-white-color, icon: (size: 40px)), '&');
    }
  }
  #{$context} #{$wrapper} [data-actions][child-of=jnt-app-header-host] {
    @if $declare {
      margin-left: auto;
    }
  }
  #{$context} #{$wrapper} [data-content][child-of=jnt-app-header-host] {
    @if $declare {
      display: flex;
      align-items: center;
    }
  }
}
@if $jnt-debug {
  @debug 'app-header compiled';
}

@mixin jnt-app-page-header($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    font-size: $jnt-page-header-font-size,
    icon: (
      color: $jnt-primary-text-color,
      size: 30px
    )
  );
  $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-app-page-header-host)} {
    @if $declare {
      @include reset-default();
      display: block;
      margin-bottom: $jnt-gutter-normal;
    }
  }
  #{$context} #{$wrapper} [data-thumbnail][child-of=jnt-app-page-header-host] {
    @if $declare {
      line-height: 1;
      border-radius: $jnt-corner-normal;
      background: $jnt-primary-background;
      padding: $jnt-gutter-normal;
    }
    [data-icon][child-of=jnt-app-page-header-host] {
      @if map-has-key($vars, icon) {
        $icon: map-get($vars, icon);
        @include jnt-icon((
          color: map-get($icon, color),
          size: map-get($icon, size)
        ), '&');
      }
    }
  }
  #{$context} #{$wrapper} [data-title][child-of=jnt-app-page-header-host] {
    font-size: map-get($vars, font-size);
    @if $declare {
      font-weight: $jnt-font-weight-bold;
      line-height: 1.2em;
    }
  }
  #{$context} #{$wrapper} [data-teaser][child-of=jnt-app-page-header-host] {
    @if $declare {
      font-size: .85em;
      color: $jnt-primary-text-light-color;
    }
  }
  #{$context} #{$wrapper} [data-actions][child-of=jnt-app-page-header-host] {
    @if $declare {
      margin-left: auto;
    }
  }
}

@mixin jnt-app-header-action($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-app-header-action-host)} {
    @if $declare {
      position: relative;
      cursor: pointer;
      height: 100%;
      display: flex;
      @include jnt-icon((size: 20px, color: $jnt-white-color));
      &:hover {
        background-color: $jnt-primary-color;
      }
    }
  }
  [data-label][child-of=jnt-app-header-action-host] {
    @if $declare {
      display: flex;
      align-items: center;
      padding: 0 $jnt-gutter-normal;
    }
  }
}
@if $jnt-debug {
  @debug 'app-header-action compiled';
}

@mixin jnt-app-header-actions($passed: (), $context: null, $strategy: 'changes') {
  $declare: false;
  @if $passed == () or $strategy == 'merge' {
    $declare: true;
  }
  #{if($context, $context, $jnt-app-header-actions-host)} {
    @if $declare {
      position: relative;
      cursor: pointer;
      display: flex;
      align-items: stretch;
    }
  }
}
@if $jnt-debug {
  @debug 'app-header-actions compiled';
}

@mixin jnt-app-header-userbar($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    padding: 0 $jnt-gutter-normal,
    hover: (
      background: $jnt-primary-color
    ),
    dropdown: (
      max-width: 320px,
      width: null,
      padding: 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-app-header-userbar-host)} {
    @if $declare {
      position: relative;
      cursor: pointer;
      display: block;
      align-items: stretch;
      @include max-for-tablet() {
        [data-user][child-of=jnt-app-header-userbar-host] {
          padding: 0;
        }
      }
    }
    @include min-for-desktop() {
      @if $declare {
        display: flex;
      }
      &:hover {
        @if map-has-key($vars, hover) {
          $hover: map-get($vars, hover);
          background-color: map-get($hover, background);
        }
      }
    }
  }
  #{$context} #{$wrapper} [data-user][child-of=jnt-app-header-userbar-host] {
    padding: map-get($vars, padding);
  }
  #{$context} #{$wrapper} [data-content][child-of=jnt-app-header-userbar-host] {
    @if map-has-key($vars, dropdown) {
      $dropdown: map-get($vars, dropdown);
      max-width: map-get($dropdown, max-width);
      width: map-get($dropdown, width);
      padding: map-get($dropdown, padding);
    }
  }
}
@if $jnt-debug {
  @debug 'app-header-userbar compiled';
}

@mixin jnt-app-page-header($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    font-size: $jnt-page-header-font-size,
    icon: (
      color: $jnt-primary-text-color,
      size: 30px
    )
  );
  $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-app-page-header-host)} {
    @if $declare {
      @include reset-default();
      display: block;
      margin-bottom: $jnt-gutter-normal;
    }
  }
  #{$context} #{$wrapper} [data-thumbnail][child-of=jnt-app-page-header-host] {
    @if $declare {
      line-height: 1;
      border-radius: $jnt-corner-normal;
      background: $jnt-primary-background;
      padding: $jnt-gutter-normal;
    }
    [data-icon][child-of=jnt-app-page-header-host] {
      @if map-has-key($vars, icon) {
        $icon: map-get($vars, icon);
        @include jnt-icon((
          color: map-get($icon, color),
          size: map-get($icon, size)
        ), '&');
      }
    }
  }
  #{$context} #{$wrapper} [data-title][child-of=jnt-app-page-header-host] {
    font-size: map-get($vars, font-size);
    @if $declare {
      font-weight: $jnt-font-weight-bold;
      line-height: 1.2em;
    }
  }
  #{$context} #{$wrapper} [data-teaser][child-of=jnt-app-page-header-host] {
    @if $declare {
      font-size: .85em;
      color: $jnt-primary-text-light-color;
    }
  }
  #{$context} #{$wrapper} [data-actions][child-of=jnt-app-page-header-host] {
    @if $declare {
      margin-left: auto;
    }
  }
}

@mixin jnt-app-aside($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    display-burger: true,
    padding: $app-header-height 0 0 0,
    position: absolute,
    background: $jnt-primary-background,
    menu: (
      item: (
        color: $jnt-primary-text-light-color,
        active: (
          background-color: $jnt-secondary-color
        ),
        icon: (
          color: $jnt-primary-text-light-color,
        )
      ),
      sub: (
        background-color: $jnt-primary-background
      )
    )
  );
  $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-app-aside-host)} {
    @if $declare {
      display: block;
      box-sizing: border-box;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 2;
      @include for-mobile() {
        &[data-opened='true'] {
          width: 100%;
          #{$wrapper} [data-overlay][child-of=jnt-app-aside-host] {
            width: 100%;
            height: 100%;
            opacity: 1;
          }
          #{$wrapper} [data-drawer][child-of=jnt-app-aside-host] {
            transform: translate3d(0, 0, 0);
          }
        }
        &[data-opened='false'] {
          width: 0;
          #{$wrapper} [data-overlay][child-of=jnt-app-aside-host] {
            opacity: 0;
          }
          #{$wrapper} [data-drawer][child-of=jnt-app-aside-host] {
            transform: translate3d(-100%, 0, 0);
            transition: none;
          }
        }
      }
    }
    position: map-get($vars, position);
  }
  #{$context} #{$wrapper} [data-menu][child-of=jnt-app-aside-host] {
    @if $declare {
      @include jnt-menu((
        top: (
          item: (
            corner: 0,
            height: 52px,
            orphan: (
              color: $jnt-primary-text-light-color,
              hover-color: $jnt-primary-text-dark-color
            ),
            active: (
              underline: false,
              color: $jnt-primary-color,
              shadow: inset 4px 0px 0px $jnt-primary-color
            ),
            icon: (
              spacing: $jnt-gutter-normal
            ),
            padding: 0 $jnt-gutter-normal,
            toggle: (
              toggle: false
            ),
            focus: (
              outline: null,
              shadow: inset $jnt-outline-shadow-small $jnt-primary-light-color
            )
          )
        ),
        sub: (
          collapsed: (
            item: (
              padding: 0 $jnt-gutter-normal
            )
          ),
          item: (
            color: $jnt-primary-text-light-color,
            padding: 0 $jnt-gutter-normal 0 50px,
            active: (
              underline: false,
              background-color: $jnt-secondary-background,
              color: $jnt-primary-color,
              shadow: inset 4px 0px 0px $jnt-primary-color
            ),
            focus: (
              outline: null,
              shadow: inset $jnt-outline-shadow-small $jnt-primary-light-color
            ),
            hover: (
              color: $jnt-primary-text-color
            ),
            icon: (
              color: $jnt-primary-text-light-color,
              spacing: $jnt-gutter-small
            ),
            height: 50px
          )
        )
      ), '&');
    }
    @if map-has-key($vars, menu) {
      $menu: map-get($vars, menu);
      @if map-has-key($menu, item) {
        $item: map-get($menu, item);
        @include jnt-menu((
          top: (
            item: (
              color: map-get($item, color)
            )
          )
        ), '&');
        @if map-has-key($item, icon) {
          $icon: map-get($item, icon);
          @include jnt-menu((top: (item: (icon: (color: map-get($icon, color))))), '&');
        }
        @if map-has-key($item, active) {
          $active: map-get($item, active);
          @include jnt-menu((
            top: (
              item: (
                active: (
                  background-color: map-get($active, background-color)
                )
              )
            )
          ), '&');
        }
      }
      @if map-has-key($menu, sub) {
        $sub: map-get($menu, sub);
        @include jnt-menu((
          sub: (
            background-color: map-get($sub, background-color)
          )
        ), '&');
      }
    }
  }
  @include jnt-menu((
    sub: (
      collapsed: (
        item: (
          padding: 0 $jnt-gutter-normal
        )
      ),
      item: (
        color: $jnt-primary-text-light-color,
        padding: 0 $jnt-gutter-normal 0 50px,
        active: (
          underline: false,
          background-color: $jnt-secondary-background,
          color: $jnt-primary-color
        ),
        focus: (
          outline: null,
          shadow: inset $jnt-outline-shadow-small $jnt-primary-light-color
        ),
        icon: (
          color: $jnt-primary-text-light-color
        ),
        height: 50px
      )
    )
  ), '[context=popover-aside-sub-menu]');
  #{$context} #{$wrapper} button[child-of=jnt-app-aside-host] {
    background-color: map-get($vars, background);
    @if $declare {
      display: block;
      width: 100%;
      border: 0;
      border-bottom: 1px solid $jnt-muted-color;
      color: $jnt-primary-text-light-color;
      font-size: $jnt-font-size-base;
      height: 50px;
      padding: 0 $jnt-gutter-normal;
      cursor: pointer;
      white-space: nowrap;
      border-radius: 0;
      &:focus {
        outline: 0;
      }
      &:hover {
        color: $jnt-primary-text-light-color;
        background-color: $jnt-secondary-background;
      }
    }
    span[child-of=jnt-app-aside-host] {
      @if $declare {
        text-overflow: clip;
      }
    }
    [data-icon][child-of=jnt-app-aside-host] {
      @include jnt-icon((color: $jnt-primary-text-light-color, size: 20px), '&');
    }
    @include for-mobile() {
      @if $declare {
        display: none;
      }
    }
  }
  #{$context} #{$wrapper} [data-overlay][child-of=jnt-app-aside-host] {
    @if $declare {
      position: absolute;
      top: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.4);
      opacity: 0;
      z-index: 1;
    }
  }
  #{$context} #{$wrapper} [data-drawer][child-of=jnt-app-aside-host] {
    position: map-get($vars, position);
    padding: map-get($vars, padding);
    background-color: map-get($vars, background);
    @if $declare {
      top: 0;
      left: 0;
      z-index: 2;
      height: 100%;
      box-shadow: $jnt-shadow-normal;
      box-sizing: border-box;
      transform: translate3d(0, 0, 0);
      transition: transform .3s linear, width .3s linear;
    }
    [data-burger][child-of=jnt-app-aside-host] {
      @if $declare {
        position: absolute;
        left: 100%;
        @include jnt-button((
          without-text-corner: 0 $jnt-corner-small $jnt-corner-small 0,
          shadow: 4px 2px 4px 0px rgba($jnt-black-color, 0.25),
          schemes: (
            secondary: (
              color: $jnt-primary-background,
              inverse-color: $jnt-primary-text-color,
              hover-color: $jnt-primary-background,
              focus: (
                shadow: 4px 2px 4px 0px rgba($jnt-black-color, 0.25)
              )
            )
          )
        ), '&');
      }
    }
    [data-scroll][child-of=jnt-app-aside-host] {
      @if $declare {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        &[data-windows='true'] {
          @include jnt-scrollbar();
        }
      }
    }
    &[data-collapsed='true'] {
      @if $declare {
        width: $app-aside-collapsed-width;
      }
    }
    &[data-collapsed='false'] {
      @if $declare {
        width: $app-aside-width;
      }
    }
  }
}
@if $jnt-debug {
  @debug 'app-aside compiled';
}

@mixin jnt-app-body($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    height: calc(100vh - #{$app-footer-height} - #{$app-header-height}),
    padding: 0 0 $jnt-gutter-large 0,
    background: $jnt-page-background,
    margin: $jnt-gutter-small 0 0 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-app-body-host)} {
    @if $declare {
      display: block;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      width: 100%;
      transform-style: preserve-3d;
    }
    min-height: map-get($vars, height);
    padding: map-get($vars, padding);
    background-color: map-get($vars, background);
    margin: map-get($vars, margin);
    @content;
  }
}
@if $jnt-debug {
  @debug 'app-body compiled';
}

@mixin jnt-app-content($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    padding: (
      top: $app-header-height,
      left: 0,
      bottom: 0,
      right: 0
    ),
    background: $jnt-page-background
  );
  $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-app-content-host)} {
    @if $declare {
      display: block;
      flex: auto;
      box-sizing: border-box;
      overflow-x: hidden;
      overflow-y: auto;
      position: relative;
      z-index: 1;
      &[data-windows='true'] {
        @include jnt-scrollbar();
      }
    }
    @if map-has-key($vars, padding) {
      $padding: map-get($vars, padding);
      padding-top: map-get($padding, top);
      padding-left: map-get($padding, left);
      padding-right: map-get($padding, right);
      padding-bottom: map-get($padding, bottom);
    }
    background-color: map-get($vars, background);
    &[data-with-aside='full'] {
      @if $declare {
        padding-left: $app-aside-width;
      }
    }
    &[data-with-aside='collapsed'] {
      @if $declare {
        padding-left: $app-aside-collapsed-width;
      }
    }
    @include for-mobile() {
      @if $declare {
        padding-left: 0 !important;
        &[data-with-breadcrumbs='false'][data-with-aside='true'] {
          margin-top: $app-aside-burger-height;
        }
      }
    }
    @include jnt-app-body((height: calc(100vh - #{$app-footer-height} - #{$app-header-height})));
    &[data-with-footer='false'] {
      @include jnt-app-body((height: calc(100vh - #{$app-header-height})));
    }
  }
}
@if $jnt-debug {
  @debug 'app-content compiled';
}

@mixin jnt-app-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-app-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 'app-footer compiled';
}