/*
    This file is part of rhizi, a collaborative knowledge graph editor.
    Copyright (C) 2014-2015  Dor Garbash, Amir Sagie and Alon Levy

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published
    by the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

@mixin node-fill-color($color) {
  fill: $color;
  stroke: $color;
  stroke-width: 4px;
  stroke-opacity: 0.4;
  &.related {
    stroke: $cyan;
    stroke-opacity: 0.5;
    stroke-width: 2px;
  }
  &.selected {
    stroke: $yellow;
    stroke-opacity: 0.5;
    stroke-width: 2px;
    z-index: 1;
  }
  &:hover { 
    stroke: $orange;
    stroke-opacity: 0.5;
    stroke-width: 5px;
  }
}


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

.node {
  stroke-width: 1px;
  font-size: $h3-size;
  z-index:100;
  pointer-events:all;
}

.notselected, .notselected *{
  opacity: 0.5;
  -webkit-filter: blur(10px);
  &:hover {
    opacity: 1;
    stroke: $orange;
    stroke-opacity: 0.5;
    stroke-width: 5px;
  }
}

.linklabel.notselected {
  display: none;
}

.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: 0.5;
      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.bubble {
  fill: rgba(87, 154, 202, 0.17);
  stroke: rgba(87, 154, 202, 0.17);
  pointer-events:none;
}

/* 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.
 */

.node.person {
  @include node-fill-color($blue);
}

.node.personality-trait {
  @include node-fill-color($orange);
}

.node.accepting-changes {
  @include node-fill-color(adjust-hue($yellow, 25));
}

.node.decision-making {
  @include node-fill-color(adjust-hue($yellow, 50));
}

.node.beneficiary {
  @include node-fill-color($green);
}

.node.completed-project {
  @include node-fill-color($purple);
}

.node.ongoing-project {
  @include node-fill-color($magenta);
}

.node.future-project {
  @include node-fill-color($cyan);
}
.node.collaborator {
  @include node-fill-color($blue);
}

.node.club {
  @include node-fill-color($magenta);
}

.node.skill {
  @include node-fill-color($yellow);
}

.node.interest {
  @include node-fill-color($purple);
}

.node.third-internship-proposal {
  @include node-fill-color($cyan);
}

.node.internship {
  @include node-fill-color($orange);
}

.node.team {
  @include node-fill-color($orange);
}

.node.empty {
  @include node-fill-color($mid-grey);
}

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

.node.project {
  @include node-fill-color($magenta);
}

.node.keyword {
  @include node-fill-color($purple);
}

.node.idea {
  @include node-fill-color($green);
}

.node.resource {
  @include node-fill-color($cyan);
}


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

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

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


#editbox input{
  width:130px;
}

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

}

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

.activity-fold {
  width: 100%; 
}

.activity-fold-button {
  cursor: pointer;
  width: 100%;
  border-radius: 0 0 8px 8px;
  height: 20px;
  background-color: rgba(1.0, 1.0, 1.0, 0.3);
  text-align: center;
}

.activity-root-div {
  width: 100%;
  max-height: 400px;
  background: white;
  overflow: auto;
}

.activity-div {
	border: 1px solid $light-grey;
}

.activity-div:hover {
	color: $dark-cyan;
	border-color: $dark-cyan;
}

.activity-div:focus {
	outline: none;
}