@import '../node_modules/jointjs/dist/joint';

// EPAM primary colors
$sharp-blue: #39c2d7;
$lime-green: #a3c644;
$graphite: #464547;
$white: #fff;

// EPAM secondary colors
$raspberry: #b22746;
$plum: #8e244d;
$dark-blue: #1a9cb0;
$dark-green: #7f993a;
$medium-gray: #666;
$gray: #999;
$light-gray: #ccc;

// Semantic color mapping
$step-color: $sharp-blue;
$port-color: $graphite;
$port-color-empty: $dark-blue;
$port-color-available: $lime-green;

@mixin grab {
  // http://www.google.com/intl/en_ALL/mapfiles/openhand.cur
  cursor: url('data:image/vnd.microsoft.icon;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8='), all-scroll !important;
  cursor: -moz-grab !important;
  cursor: -webkit-grab !important;
  cursor: grab !important;
}

@mixin grabbing {
  // http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur
  cursor: url('data:image/vnd.microsoft.icon;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAAH/AAAB/wAAA/0AAANsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//+AB///wAf//4AH//+AD///yT/////////////////////////////8='), all-scroll !important;
  cursor: -moz-grabbing !important;
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
}

.pannable,
.pannable.joint-cell .port-body {
  @include grab;
}

.pannable.joint-link {
  .connection-wrap {
    @include grab;
  }

  .link-tools {
    display: none;
  }

  .marker-arrowheads {
    display: none;
  }
}

.pannable.is-panning,
.is-panning .pannable,
.is-panning .pannable.joint-cell * {
  @include grabbing;
}

.joint-type-visualdeclaration {
  .root {
    fill: $step-color;
    stroke: $step-color;
  }

  .label {
    font-weight: 500;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 16px;
    text-decoration: none;
    text-transform: none;
  }
}

.joint-type-visualstep.selected {
  .body {
    stroke: $raspberry;
    stroke-width: 3px;
  }
}

.joint-type-visualstep {
  text {
    font-weight: 500;
    font-family: "Source Sans Pro", sans-serif;
  }

  rect {
    rx: 5px;
    ry: 5px;
  }

  .body {
    fill: $white;
    stroke: $step-color;
    stroke-width: 2px;
  }

  .label {
    fill: $step-color;
    font-size: 16px;
  }

  .port-body {
    stroke: $white;
    stroke-width: 3px;
    fill: $port-color;
  }

  .port-body.empty {
    stroke: $port-color-empty;
    stroke-width: 1.5px;
    fill: $white;
  }

  .port-body.available-magnet {
    fill: $port-color-available;
  }

  .port-body.disabled {
    opacity: 0.5;
  }

  .port-body:hover {
    opacity: 1;
    fill: $step-color;
  }

  .port-label {
    fill: $port-color;
    text-decoration: none;
    text-transform: none;
  }
}

.joint-type-visualgroup {
  @extend .joint-type-visualstep;

  .body {
    fill: transparent;
  }
}

.joint-type-visualworkflow {
  @extend .joint-type-visualstep;
}

.joint-link {
  .connection {
    stroke: $port-color;
    stroke-width: 2px;
  }

  .marker-arrowheads .marker-arrowhead,
  .marker-vertex-group .marker-vertex,
  .marker-vertex-group .marker-vertex:hover {
    fill: $port-color;
  }

  .marker-arrowheads .marker-arrowhead:hover {
    fill: $step-color;
  }

  .link-tools .link-tool .tool-remove circle {
    fill: $raspberry;
  }
}

.joint-highlight-stroke {
  stroke: $sharp-blue;
}
