.graph-view {
    background-color: $light-grey;
    height: 100%;
}

.node {
  stroke-width: 1px;
  font-size: $h3-size;
  z-index:100;
  &.related {
    fill: none;
    stroke: $cyan;
    stroke-opacity: 0.5;
    stroke-width: 2px;
  }
}

.ghostnode{

}

.notselected .circle, .notselected *{
  opacity: 0.2;
  -webkit-filter: blur(10px);
}

.linklabel.notselected {
  display: none;
}

.circle {
  z-index: 100;
  pointer-events:all;
  fill: $dark-grey;
}

.circle:hover {
    stroke: $orange;
    stroke-opacity: 1;
    stroke-width: 5px;
    opacity: 1;
}

.nodetext {
  fill: $dark-grey;
  font-size: $h3-size;
  z-index:3;
}

// editor for node text
.svg-input-fo-node {
  fill: $dark-grey;
  z-index:3;
}

.svg-input-fo-node input {
  font-size: $h3-size;
  background-color: transparent;
}

// editor for link text
.svg-input-fo-link {
    stroke: $dark-grey;
}

.svg-input-fo-link input {
  font-size: $h4-size;;
  background-color: transparent;
}

.link {
  fill: $dark-magenta;
  pointer-events: all;
  stroke: $mid-grey;
  stroke-width: 1px;
  stroke-opacity: 0.5;
  z-index:1;
  &.selected {
    stroke: $yellow;
    stroke-opacity: 1.0;
    stroke-width: 2px;
  }
  &.related {
    fill: none;
    stroke: $cyan;
    stroke-opacity: 0.5;
    stroke-width: 2px;
  }
  &.hovering {
      stroke: $orange;
      stroke-opacity: 1;
      stroke-width: 2px;
      opacity: 1;
  }
}

.linklabel{
  font-size: $h4-size;
  fill: black;
  stroke: transparent;
  text-shadow: 2px 2px yellow;
}

.ghostlink {
  opacity: 0.0;
  fill: white;
  pointer-events: all;
  stroke-width: 15px;
  z-index:2; /* higher than link, lower than node */
}

.circle.chosen {
  stroke: $cyan;
  stroke-opacity: 0.5;
}

.circle.enter {
  stroke-opacity: 1;
}

.circle.bubble {
  fill: rgba(87, 154, 202, 0.17);
  stroke: rgba(87, 154, 202, 0.17);
  pointer-events:none;
}

.circle.exit {
  stroke-opacity: 1;
}

.circle.chainlink {
  stroke: #AAA;
}

.circle.temp {
  box-shadow: 0 0 40px #FFFF8F;
}

.circle.temp, .circle.chosen {
  stroke-width: 3px;
}

.circle.temp.empty {
  stroke-width: 1.5px;
}

/* Per node and edge type (type is a property of nodes and links) styling
 * note that this should be automatically generated somehow for user settings.
 */

.circle.person {
  fill: $blue;
}

.circle.beneficiary {
  fill: $green;
}

.circle.completed-project {
  fill: $purple;
}

.circle.ongoing-project {
  fill: $magenta
}

.circle.future-project {
  fill: $cyan
}
.circle.collaborator {
  fill: $blue;
}

.circle.club {
  fill: $magenta;
}

.circle.skill {
  fill: $yellow;
}

.circle.interest {
  fill: $purple;
}

.circle.project {
  fill: $green;
}

.circle.third-internship-proposal {
  fill: $cyan;
}

.circle.internship {
  fill: $orange;
}

.circle.empty {
  fill: $mid-grey;
}

// TODO: how to define type colors using the scss dollar attributes? injecting css is easy, scss - not sure

.circle.project {
  fill: $magenta;
}

.circle.keyword {
  fill: $purple;
}

.circle.idea {
  fill: $green;
}

.circle.resource {
  fill: $cyan;
}


/* Selected parts of the graph, right now by clicking, later with search. */

.node.first-selected .circle {
    stroke: $yellow;
    stroke-opacity: 1;
    stroke-width: 6px;
    z-index: 1;
    &:hover {
      stroke: $orange;
      stroke-opacity: 1;
    }
}

.node.selected .circle {
    stroke: $yellow;
    stroke-opacity: 1;
    stroke-width: 2px;
    z-index: 1;
}

.graph.link.temp_and {
  stroke-dasharray: 3,3;
}


#editbox input{
  width:130px;
}

.overlay {
  fill:none;
  pointer-events: all;
  z-index:0;

}

g:focus circle {
    stroke: #ff0000;
    stroke-opacity: 1;
    stroke-width: 3px;
    z-index: 1;
}

.editinfo{
  position: fixed;
  top:-40px;
  z-index:5;
}

.editlinkinfo{
  position: fixed;
  top:-40px;
  z-index:5;
}

#editlinkname{
  width:inherit;
  height:inherit;
  font-size: $h3-size;
}

#graph-view__canvas {
    height: inherit; // inherit from container which should be set to 100%
}

.insideforeign {
    display: inline;
    &:focus {
      outline: none;
    }
}

// TODO: right to left language
.foreign {
    text-align: left;
}