
$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-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-lighter;
    }
  }
}

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

// 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
    //@include transition( opacity 0.1s ease-in);
  }

  // hover effects ===================================================

  ._jsPlumb_hover{

    // hover effect for connections
    &._jsPlumb_overlay{      
      opacity: 0; // 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;
    background-color: $gray-dark;
    font-family: $font-family-bold;
    z-index: 100;
    //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
      }
    }

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

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

      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: $teal;
          display: none; // hover effect
        }
        // user status ===============================================
        .pf-user-status{
          font-size: 7px;
        }

        .pf-user-status-corp{
          color: $green;
        }

        .pf-user-status-ally{
          color: $blue;
        }

      }

    }

    // 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: 50;
    svg {
      width: 10;
      height: 10;

      circle{
        @include transition( stroke 0.2s ease-out);
      }

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

        &:hover{
         stroke: $gray-lightest; // hover style
        }
      }

    }

    // hover effect for  Endpoints
    &:hover{
      circle{
          stroke: $gray-lightest !important;
      }
    }

  }

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

  svg._jsPlumb_connector{
    cursor: pointer;
    stroke-linecap: round; // line endings

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

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

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

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

  svg.pf-map-connection-stargate {

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

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

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

  svg.pf-map-connection-jumpbridge {

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

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

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

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

  svg.pf-map-connection-wh-fresh {
    // special wh-connection style (
  }

  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(3px);
    @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

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

}
