$mapHeight: 520px;
$mapWidth: 2500px ;

// start bounce mixin =========================================================

@mixin bounce-up-down{

  @include animation-duration( 1s);
  @include animation-delay(0.5s);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count:infinite;
  -webkit-animation-iteration-count:infinite;

  -webkit-animation-name: bounce;
  animation-name: bounce;
}

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

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

// end bounce mixin ===========================================================

#pf-map-tab-element{
  max-width: 2515px;
  margin: 0 auto;
}


.pf-map-tab-content{

  .pf-map-wrapper{
    position: relative;
    width: 100%;
    max-width: $mapWidth + 15px;
    height: $mapHeight + 30px;
    overflow: auto;
    padding: 5px;
    background: rgba($gray-darker, 0.93);
    box-shadow:inset -3px 3px 10px 0 rgba($black, 0.3);
    @include border-bottom-radius(5px);
    border: {
      width: 1px;
      style: solid;
      color: $gray-dark;
    }
  }
}

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

  &.pf-map-overlay-timer{
    width: 36px;
    bottom: 23px;
  }

  &.pf-map-overlay-info{
    top: 8px;
    color: $gray-darker;
    padding: 3px;
    line-height: 26px;
    min-height: 36px;
    min-width: 36px;

    i{
      display: none;
      margin: 2px;
      width: 26px;
      height: 26px;
      opacity: 0.8;
      color: $orange-dark;

      &.fa{
        font-size: 26px;
      }

      &.glyphicon{
        margin-left: 4px;
        font-size: 25px;
      }

    }
  }
}

// 20x20px grid background
.pf-grid-small{
  background: inline-image("#{$base-url}/grid_40x40.png") !important;
}

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

  // jsPlumb classes ==========================================================
  ._jsPlumb_target, ._jsPlumb_source{

  }

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

  // system that is currently dragged
  .jsPlumb_dragged{
    @extend .pf-system-selected;
  }

  // hover effects ============================================================
  ._jsPlumb_hover{

    // hover effect for connections
    &._jsPlumb_overlay{      
      opacity: 0 !important; // hide opacity on hover
    }    

    &:not(._jsPlumb_overlay){
      @include bounce-up-down; // label should not bounce
    }
  }

  // hover effect for systems
  ._jsPlumb_target_hover, ._jsPlumb_source_hover{
    @include bounce-up-down;
    @include box-shadow(0 6px 12px rgba(0,0,0,.3));
  }

  // ==========================================================================
  .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;
    }
    @include border-radius(5px);

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

    &:hover{
      // makes the systems "flying" :)
      @include box-shadow(0 6px 12px rgba(0,0,0, 0.3));
      @include transform( translate3d(0, -2px, 0) );
    }

    .pf-system-head{
      padding: 0px 3px 0px 3px;
      cursor: pointer;
      font-family: Arial; // fix for element width on custom font family
      font-weight: bold;

      .pf-system-head-name{
        border: none;
        display: inline-block;
        min-width: 41px;
        color: $gray-lighter;
        margin-right: 2px;
      }

      .fa-lock{
        display: none; // triggered by system-lock class
      }

      .pf-system-head-expand{
        margin-left: 2px;
        color: $gray-light;
        display: none;  // triggered by JS
      }

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

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

    .pf-system-body{
      height: 0px;
      width: 100%;
      overflow: hidden;
      cursor: -moz-grab;
      cursor: -webkit-grab;
      cursor: grab;
      padding: 0 4px;
      white-space: nowrap;
      display: none;  // triggered by JS
      will-change: width;

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

      .pf-system-body-item{
        color: $gray-light;
        font-size: 10px;

        .pf-system-body-right{
          text-overflow: ellipsis;
          float: right;
          color: $orange-light;
          display: none; // hover effect
        }
        // user status ========================================================
        .pf-user-status{
          font-size: 7px;
          width: 10px;
        }

        .pf-system-body-item-name{
          display: inline-block;
          width: 65px;
          overflow: hidden;
          height: 11px;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

    }

    // 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-darkest 0px 0px 8px 0px);

    .pf-system-head, .pf-system-body{
      background-color: $red-darkest;
    }
  }

  // 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;
    }
  }

  // Endpoints ================================================================
  .pf-map-endpoint-source, .pf-map-endpoint-target{
    z-index: 90;

    svg {
      overflow: visible; // this fixes a "half-pixel" bug on SVG circle with border
      circle{
        @include transition( stroke 0.18s ease-out, fill 0.18s ease-out);
      }

      *{
        stroke: $gray-light;
        stroke-width: 2; // border width
        fill: $gray;
        cursor: pointer;
      }
    }

    // hover (with cursor) effect for  Endpoints
    &:hover{
      circle{
          stroke: $orange !important;
      }
    }

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

    // while dragging
    &._jsPlumb_dragging{
      circle {
        stroke: $orange;
      }
    }
  }

  ._jsPlumb_endpoint_drop_allowed{
    circle {
      stroke: $green !important;
      fill: $green !important;
    }
  }

  ._jsPlumb_endpoint_drop_forbidden{
    circle {
      stroke: $red-darker !important;
      fill: $red-darker !important;
    }
  }

  // Connections ==============================================================

  svg._jsPlumb_connector{
    cursor: pointer;
    stroke-linecap: round; // line endings
    @include transition( stroke 0.18s ease-out) ;
    will-change: all;

    path{
      @include transition( stroke 0.18s ease-out) ;
    }

    path:not(:first-child){
      stroke: $gray; // inner line
    }

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

    &._jsPlumb_hover{
      z-index: 80;

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

    &._jsPlumb_dragging{
      @include transition( opacity 0.18s ease-out) ;
      opacity: 0.4;
      z-index: 80;
    }
  }

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

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

    path:not(:first-child){
      stroke: $teal-lighter;
    }

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

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

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

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

    path:not(:first-child){
      stroke: $indigo-darkest;
    }

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

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

  svg.pf-map-connection-wh-eol {

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

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

  svg.pf-map-connection-wh-reduced {

    path:not(:first-child){
      stroke: $orange;
    }
  }

  svg.pf-map-connection-wh-critical {

    path:not(:first-child){
      stroke: $red-darker;
    }
  }

  // Connection overlay =======================================================
  .pf-map-connection-overlay{
    padding: 1px 4px;
    font-size: 11px;
    z-index: 1020;
    @include border-radius(8px);
    @include box-shadow(0 6px 12px rgba(0,0,0,.4));
  }

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

  .mass{
    background-color: $red-darker;
    color: #eaeaea;
  }
}

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

// context menu ===============================================================
.dropdown-menu{
  font-family: $font-family-bold;
  z-index: 1020; // over tooltips
  will-change: opacity, top, left, transform;

  i{
    width: 20px
  }
}

// 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 );

}