$mapOverlayTop:         8px;
$mapOverlayRight:       25px;
$mapOverlayBottom:      25px;
$mapOverlayLeft:        5px;

$mapBubbleWidth:        30px;

// bounce mixin =================================================================================================
@mixin bounce-up-down{
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: bounce;
}

@include keyframes(bounce){
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-8px);}
  60% {transform: translateY(-4px);}
}

// map overlay ========================================================================================================
.pf-map-overlay{
  position: absolute;
  display: none; // triggered by js
  z-index: 10000;
  background: rgba($black, 0.25);
  border-radius: 5px;

  &.pf-map-overlay-timer{
    right: $mapOverlayRight;
    bottom: $mapOverlayBottom;
    width: 36px;
    height: 36px;
  }

  &.pf-map-overlay-zoom{
    bottom: $mapOverlayBottom;
    left: $mapOverlayLeft;
    width: 26px;
    height: 52px;
    padding: 2px 4px;
    display: block;

    .pf-zoom-overlay-up,
    .pf-zoom-overlay-down{
      display: block;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
      @include transition(color .18s ease-in-out);
      will-change: color;

      &:hover{
        color: $orange-dark;
      }

      &.disabled{
        cursor: not-allowed;
        color: $gray-darker;
      }
    }

    .pf-zoom-overlay-value{
      display: block;
      margin-top: 2px;
      text-align: center;
      font-size: 11px;
      line-height: 13px;
      @include transition(color .18s ease-in-out);
      will-change: color;
    }

    .active{
      color: $orange-dark;
    }
  }

  &.pf-map-overlay-info{
    top: $mapOverlayTop;
    right: $mapOverlayRight;
    height: 36px;
    min-height: 36px;
    min-width: 36px;
    padding: 3px 3px 3px 8px;
    line-height: 26px;

    i{
      margin: 0; // overwrite default
      margin-top: 5px;
      width: 0; // is animated
      height: 26px;
      opacity: 0; // is animated
      color: $gray-light;
      transform: scale(0);
      transform-origin: 50% 50% 0px;
      @include transition(color .18s ease-in-out );
      cursor: help;
      will-change: all;

      &.fas, &.far{
        font-size: 20px;
      }

      &.glyphicon{
        margin-top: 1px;
        font-size: 22px;
        padding-left: 3px;
      }

      &.active, &:hover{
        color: $orange-dark;
      }
    }
  }

  &.pf-map-overlay-local{
    top: 54px;
    right: $mapOverlayRight;
    min-height: 80px;
    width: 32px;
    display: block;
    will-change: width;

    .pf-map-overlay-local-content {
      margin-right: 36px;
      padding: 5px 0 5px 5px;
      overflow: hidden;

      .pf-map-overlay-headline{
        font-size: 12px;
        font-family: $font-family-bold;
        white-space: nowrap;

        .badge{
          margin-left: 5px;
        }

        .pf-system-sec{
          cursor: default; // overwrite
        }
      }

      .pf-local-table {
        font-size: 10px;

        &.no-footer{
          border-bottom: 1px solid transparent; // overwrite default
        }

        td {
          white-space: nowrap;
        }
      }

      .dataTables_paginate,
      .dataTables_empty{
        white-space: nowrap;
        padding-top: 3px; // overwrite default
      }

      .pf-map-overlay-toolbar{
        .pf-map-overlay-toolbar-icon{
          vertical-align: 0; // overwrite default
          margin-top: 14px;
        }

        .pf-map-overlay-toolbar-checkbox{
          display: inline-block;
          margin-bottom: 0; // overwrite default
        }
      }
    }

    .pf-map-overlay-local-main{
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      padding: 3px;
      width: 32px;
      cursor: pointer;
      text-align: center;
      border-left: 1px solid $gray-darker;

      .pf-map-overlay-local-trigger{
        margin-bottom: 10px;

        &:hover, &.right{
          color: $orange-dark; // overlay open
        }
      }

      i{
        font-size: 12px;
      }
    }

    .pf-map-overlay-local-jumps{
      position: absolute;
      bottom: 5px;
      width: calc(100% - 6px);
    }

    .badge{
      font-family: Arial, sans-serif;         // fix for element width on custom font family
      background-color: $gray-darker;
    }
  }

}

// 20x20px grid background
.pf-grid-small{
  &:before{
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    //background: inline-image("/grid_40x40.png") !important;
    background: url('data:image/png;base64,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') !important;
  }
}

.pf-map-region {
  .pf-system-head-region {
    display: block !important;
  }
}

// class gets applied to body tag if system/connection gets dragged
// to prevent cursor "flicker" we need to change the cursor for "neighbored" elements
.jtk-drag-select{
  .pf-map{
    cursor: grab !important;
    .pf-system{
      cursor: grab !important;
      .pf-system-head{
        cursor: grab !important;
      }
    }
  }
}

.pf-map{
  width: $mapWidth;
  height: $mapHeight;
  position: relative;
  font-family: $font-family-bold;
  will-change: transform;

  &.pf-map-move{
    cursor: move !important;
  }

  // jsPlumb classes ==================================================================================================
  // gets applied to system that is currently being dragged
  .jtk-drag{
    @extend .pf-system-selected;
  }

  // gets applied to "endpoints", "overlays" and <svg>´s if <svg> is hovered
  .jtk-hover:not(.jtk-overlay){
    @include bounce-up-down;    // label should not bounce
  }

  // gets applied to source/target (system) if <svg> or endpoint is hovered
  .jtk-source-hover, .jtk-target-hover{
    @include bounce-up-down;
    @include box-shadow(0 6px 12px rgba(0,0,0,.3));
  }

  // gets applied to *all* systems that are target for a drop of current element
  .jtk-drag-active{
    @include transition(box-shadow 0.12s ease-out, transform 0.08s ease-out !important);

  }

  // gets applied to any drop target over which the current element is hovering.
  // When the mouse is released the element having this class will be the recipient of an on drop event
  .jtk-drag-hover{

    &.jtk-drag-active{
      // @see .pf-system:hover style. We want the same hover style for systems that are active drop-target
      @include box-shadow(0 6px 12px rgba(0,0,0, 0.3));
      transform: translate3d(0, -1px, 0) scale(1.1) !important;
    }

  }

  // ==================================================================================================================
  .pf-system{
    position: absolute;
    min-width: 60px;
    height: auto;
    overflow: hidden; // hide bg on round corners -_-
    background-color: $gray-dark;
    font-family: $font-family-bold;
    z-index: 100;
    will-change: top, left, opacity, transform;

    //opacity: 0; // trigger by js
    border: {
      width: 2px;
      style: solid;
      color: $gray-light;
    }
    border-radius: 5px;

    // change border color with transition
    @include transition( border-color 0.2s ease-out, box-shadow 0.12s ease-out, opacity 0.12s ease-out);
    transform: translate3d(0, 0, 0);

    &:not(.jtk-drag-hover):hover{
      // makes the systems "flying" :)
      @include box-shadow(0 6px 12px rgba(0,0,0, 0.3));
      transform: translate3d(0, -1px, 0) !important;
    }

    .pf-system-head{
      padding: 0 3px 0 4px;
      cursor: pointer;
      font-family: Oxygen, Arial, sans-serif;
      font-weight: bold; // fix for element width on custom font family
      white-space: nowrap;
      backface-visibility: hidden; // fixed blurry text on system scale() -> requires display: inline-block; transform: translateY(0); for child nodes

      .pf-system-head-name{
        border: none;
        display: inline-block;
        min-width: 50px;
        color: $gray-lighter;
        margin-right: 2px;
        letter-spacing: 0.03em;
        -webkit-font-smoothing: antialiased;
        transform: translateY(0); // fixed "blurry" text in scaled parent
      }

      .pf-system-head-counter{
        display: inline-block;
        text-align: right;
        min-width: 8px;
        margin-right: 1px;
        color: $green;
        cursor: help;

        &:empty{
          display: none;
        }
      }

      .pf-system-effect{
        font-size: 11px;
        transform: translateY(0); // fixed "blurry" text in scaled parent
      }

      .fa-lock{
        font-size: 11px;
        display: none; // triggered by system-lock class
        transform: translateY(0); // fixed "blurry" text in scaled parent
      }

      .pf-system-head-expand{
        margin-left: 2px;
        color: $gray-light;
        width: 10px;
        display: none;  // triggered by JS
        transform: translateY(0); // fixed "blurry" text in scaled parent
      }

      // overwrites "xEditable" style for empty values
      .editable-empty{
        font-style: normal;
      }
    }

    // ================================================================================================================
    .pf-system-head-info{
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      color: lighten($gray-light, 10%);
      font-size: 10px;
      line-height: 14px; // 15 is "default", lower it a bit and set fix "height" for 1-2px bottom space
      height: 15px;
      padding-right: 2px; // bring right aligned text in line with wh "effect" icon
      transform: translateY(0); // fixed "blurry" text in scaled parent
      min-width: 100%; // required for text "truncate" inside
      max-width: 0; // required for text "truncate" inside

      [class^="pf-system-sec-"]{
        cursor: help;
      }
    }

    .pf-system-head-info-left,
    .pf-system-head-info-right, {
      display: inline-flex;
      flex: 1 1 auto;
      min-width: 0; // required for text "truncate" inside

      &:empty{
        display: none;
      }
      > * {
        line-height: inherit;
        text-align: inherit;
      }

      .pf-system-head-region{
        display: none; // triggered by map option
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .pf-system-head-info-left {
      > *:not(:first-child){
        margin-left: 5px;
      }
    }

    .pf-system-head-info-right {
      justify-content: flex-end;

      > *:not(:last-child){
        margin-right: 5px;
      }
    }

    // ================================================================================================================

    .pf-system-body{
      height: 0px;
      width: 100%;
      overflow: hidden;
      cursor: -moz-grab;
      cursor: -webkit-grab;
      cursor: grab;
      padding: 0 4px;
      white-space: nowrap;
      backface-visibility: hidden; // fixed blurry text on system scale() -> requires display: inline-block; transform: translateY(0); for child nodes
      display: none;  // triggered by JS
      will-change: width;

      border: {
        top: {
          width: 1px;
          style: dashed;
          color: $gray-light;
        }
      }

      .pf-system-body-item{
        position: relative;
        color: lighten($gray-light, 10%);
        font-size: 10px;
        line-height: 16px;
        height: 16px;

        .pf-system-body-right{
          float: right;
          color: $orange-light;
          width: 50px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          transform: translateY(0); // fixed "blurry" text in scaled parent
          display: none; // hover effect
        }

        // user status ================================================================================================
        .pf-user-status{
          font-size: 6px;
          width: 10px;
          vertical-align: middle;
          transform: translateY(0); // fixed "blurry" text in scaled parent
        }

        .pf-system-body-item-name{
          position: absolute;
          display: inline-block;
          width: calc(100% - 10px); // -10px icon
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          transform: translateY(0); // fixed "blurry" text in scaled parent
        }
      }

    }

    // system head specific tooltip style
    .tooltip{

      &.in{
        opacity: 1;
      }

      .tooltip-inner{
        color: $gray-dark;
        background-color: $gray-lighter;
        padding: 3px 3px;
      }

    }
  }

  // active system
  .pf-system-active:not(.pf-map-endpoint-source):not(.pf-map-endpoint-target){
    @include box-shadow($yellow-lighter 0px 0px 8px 0px);
  }


  // selected system
  .pf-system-selected:not(.pf-map-endpoint-source):not(.pf-map-endpoint-target){
    @include box-shadow($red-darker 0px 0px 8px 0px);
    background-color: $red-darker;
    .pf-system-head, .pf-system-body{
      background-color: $red-darker;
    }
  }

  // locked system
  .pf-system-locked{

    .pf-system-sec{
      cursor: default !important;
    }

    .pf-system-body{
      cursor: default !important;
    }

    .fa-lock{
      color: $gray-light !important;
      display: inline-block !important;
    }
  }

  // debug system class
  .pf-system-debug{
    position: absolute;
    color: $white;
    font-size: 10px;
    line-height: 22px;
    text-align: center;
    pointer-events: none;
    font-family: Oxygen, Arial, sans-serif;
    z-index: 500;

    &:before{
      content: attr(data-depth);
      font-family: Oxygen, Arial, sans-serif;
      position: absolute;
      line-height: 10px;
      top: 1px;
      left: 2px;
      color: $black;
    }
  }

  // Endpoints ========================================================================================================
  .jtk-endpoint{
    z-index: 90;

    svg {
      circle{
        @include transition(stroke 0.18s ease-out, fill 0.18s ease-out);
      }

      *{
        stroke: $gray-light;
        cursor: pointer;
      }
    }

    // hover (with cursor) on endpoints (before drag)
    &:hover{
      circle{
        stroke: $orange !important;
      }
    }

    // hover class (e.g. connection is hovered -> endpoints get this class)
    &.jtk-hover{
      z-index: 95;  // increase z-index -> prevent overlapping multiple endpoints

      &.pf-map-endpoint-bubble{
        &:after{
          filter: drop-shadow( -3px 3px 4px rgba(0,0,0, 0.3));
          animation-iteration-count: infinite;
          animation-delay: 0.5s;
        }
      }
    }

    &:after{
      content: var(--svgBubble);
      position: absolute;
      display: block;
      pointer-events: none;
      top: ($mapBubbleWidth / -2) + 7;
      left: ($mapBubbleWidth / -2) + 7;
      width: $mapBubbleWidth;
      height: $mapBubbleWidth;
      z-index: -1;
      will-change: opacity, transform;

      animation-name: pfBubblePop;
      animation-duration: 0.09s;
      animation-timing-function: cubic-bezier(0.16, 0.87, 0.48, 0.99);
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
    }
  }

  .pf-map-endpoint-bubble{
    &:after{
      display: block;
      animation-name: pfBubbleWobble;
      animation-duration: 1s;
      animation-timing-function: linear;
      animation-iteration-count: 1;
      animation-fill-mode: both;
    }
  }

  .jtk-endpoint-drop-allowed{
    circle {
      stroke: $green !important;
      fill: $green !important;
    }
  }

  .jtk-endpoint-drop-forbidden{
    circle {
      stroke: $red-dark !important;
      fill: $red-dark !important;
    }
  }

  // Connections ======================================================================================================
  .jtk-connector{
    z-index: 40;        // min z-index for connections
    cursor: pointer;
    overflow: unset;    // fixes a strange 1px flicker issue when connection is hovered and "jumps" up+down
    @include transition(stroke 0.18s ease-out, opacity 0.18s ease-out);
    will-change: all;

    path {
      shape-rendering: geometricPrecision;        // maybe better render quality ?!
      @include transition(stroke 0.18s ease-out);
    }

    &.jtk-hover{
      z-index: 80;      // max z-index for connections
      filter: drop-shadow(-3px 3px 4px rgba(0,0,0, 0.3));

      path:first-child{
        stroke: $gray-lightest;
      }
    }

    &.jtk-dragging{
      z-index: 80;      // max z-index for connections
      opacity: 0.4;
    }
  }

  .pf-map-connection-abyssal {
    z-index: 40;

    path:first-child{
      stroke: rgba(255,255,255,0);  // invisible border color
    }

    path:nth-child(2){
      stroke: darken($pink-darker, 8%);
      stroke-dasharray: 2px, 8px, 2px, 8px;
    }

    &.jtk-hover{
      path:first-child{
        stroke: rgba(255,255,255,0);  // invisible border color
      }

      path:nth-child(2){
        stroke: $gray-lightest;
      }
    }
  }

  .pf-map-connection-jumpbridge {
    z-index: 50;

    path:first-child{
      stroke: rgba(255,255,255,0);  // invisible border color
    }

    path:nth-child(2){
      stroke: $teal-lighter;
      stroke-dasharray: 15px, 10px, 5px, 10px, 5px, 10px;
    }

    &.jtk-hover{
      path:first-child{
        stroke: rgba(255,255,255,0);  // invisible border color
      }

      path:nth-child(2){
        stroke: $gray-lightest;
      }
    }
  }

  .pf-map-connection-stargate {
    z-index: 60;

    path:first-child{
      stroke: $gray-light;
    }

    path:nth-child(2){
      stroke: $indigo-darkest;
    }
  }

  .pf-map-connection-wh-fresh,
  .pf-map-connection-wh-reduced,
  .pf-map-connection-wh-critical,
  .pf-map-connection-wh-eol{
    z-index: 70;
  }

  .pf-map-connection-wh-eol {

    path:first-child{
      stroke: $pink-dark;
    }
  }

  .pf-map-connection-wh-reduced {

    path:nth-child(2){
      stroke: $orange;
    }
  }

  .pf-map-connection-wh-critical {

    path:nth-child(2){
      stroke: $red-dark;
    }
  }

  .pf-map-connection-wh-size-s {

    path:first-child {
      stroke-width: 7px;
      stroke-dasharray: 3px, 10px;
      stroke-linecap: square;
    }

    path:nth-child(2) {
      stroke-width: 3px;
    }
  }

  .pf-map-connection-wh-size-m {

    path:first-child {
      stroke-dasharray: 20px, 4px;
      stroke-linecap: butt;
    }
  }

  .pf-map-connection-wh-size-xl {

    path:first-child {
      stroke-width: 9px;
    }

    path:nth-child(2) {
      stroke-width: 5px;
    }
  }

  .pf-map-connection-active{
    filter: drop-shadow( 0px 0px 3px $yellow-lighter) !important; // overwrite "hover" shadow
  }

  .pf-map-connection-process{
    opacity: 0.4 !important;

    path{
      pointer-events: none;
    }
  }

  // Overlays =========================================================================================================
  .jtk-overlay{
    opacity: 1;
    pointer-events: none; // click through overlays
    will-change: opacity;
    @include transition(opacity 0.18s ease-out);

    &.jtk-hover:not(.debug){
      opacity: 0 !important;
    }
  }

  %map-overlay{
    font-size: 11px;
    z-index: 1020;
    background-color: $gray;
    color: $gray-lighter;
  }

  .pf-map-component-overlay{
    @extend %map-overlay;
    line-height: 14px;
    padding: 1px 4px;
    border-radius: 6px;
    @include box-shadow(0 3px 6px rgba(0,0,0,.3));

    &.small{
      -webkit-font-smoothing: antialiased;
      font-family: Arial, sans-serif;
      padding: 1px 2px;
      line-height: 12px;
      min-width: 14px;
      border-radius: 3px;
    }

    &.icon{
      font-size: 12px;
      line-height: 12px;
      padding: 0;
      width: 12px;
      height: 12px;
      overflow: hidden;
      text-align: center;
      border-radius: 50%;
    }

    &.debug{
      background-color: $purple-dark;
      opacity: 0.8;
    }
  }

  // Connection overlays ==============================================================================================
  .pf-map-connection-state-overlay{

    @extend %map-overlay;
    background-color: transparent;
    font-size: 12px;
    width: 15px;
    height: 15px;
    opacity: 0.4 !important;
    z-index: 1030;
  }

  .frig{
    background-color: $orange-light;
    color: $gray-darkest;
  }

  .mass{
    background-color: $red-dark;
    color: $gray-lightest;
  }

  .eol{
    background-color: $gray;
    color: $pink-dark;
  }

  // Arrow overlays ===================================================================================================
  .pf-map-connection-arrow-overlay-success{
    .pf-map-connection-arrow-overlay{
      stroke: $gray-dark;
      fill: $green;
    }
  }

  .pf-map-connection-arrow-overlay-danger{
    .pf-map-connection-arrow-overlay{
      stroke: $gray-dark;
      fill: $red;

      animation-name: pfPulseDanger;
      animation-duration: 4s;
      animation-iteration-count: infinite;
    }
  }
}

// DratSelect =========================================================================================================
.pf-map-drag-to-select {
  background: $teal-dark !important;
  display: block;
  position: absolute;
  visibility: hidden; // triggered by js
  opacity: 0; // triggered by js
  z-index: 9000;
  border: 1px dashed $gray-lighter;

  // positioning set by js
  left:   var(--selectBox-left, 0px) ;
  top:    var(--selectBox-top, 0px);
  width:  var(--selectBox-width, 1px);
  height: var(--selectBox-height, 1px);

  pointer-events: none; // required for "mouseover" event which should be ignored
  will-change: left, top, width, height, opacity;
  border-radius: 5px;
  @include transition(opacity 0.15s linear);

  &.active {
    visibility: visible;
    opacity: 0.3;
  }
}

// dialogs ============================================================================================================
.ui-dialog-content{
  label{
    min-width: 60px;
  }
}

// context menu =======================================================================================================
.dropdown-menu{
  min-width: 150px; // overwrite default
  font-family: $font-family-bold;
  z-index: 1050; // over tooltips
  will-change: opacity, top, left, transform;

  a{
    cursor: pointer; // fixed bug on Chrome anchor tag: href="#"
  }

  i{
    width: 20px;
    pointer-events: none;

    &.fa-char:before{
      font-weight: bolder;
    }
  }

  // nested (sub) menu
  &:not(.dropdown-submenu-left){
    .dropdown-menu{
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      clip-path: inset(-12px -12px -12px 0px); // hide left box shadow
    }
  }

  // top menu
  &[role] > li{
    @include pf-navigation-indicator(left);
  }

  & > li {

    &.disabled{
      cursor: not-allowed;
      pointer-events: none;
    }

    & > a {
      padding: 3px 8px; // overwrite default
    }
  }

  &.dropdown-submenu-left{
    > .dropdown-submenu > .dropdown-menu {
      left: -100%;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      clip-path: inset(-12px 0 -12px -12px); // hide right box shadow
    }
  }
}

// tooltip for a system with active user (they are not positioned within the system element)
.pf-system-tooltip-inner{
  color: $gray-lighter;
  padding: 2px 4px;
  min-width: 25px; // make sure tooltip is not flickering on low numbers -> fix width
  @include transition( color 0.2s ease-out );
}