/****************************************************************************
 ** @license
 ** This demo file is part of yFiles for HTML 2.6.
 ** Copyright (c) 2000-2024 by yWorks GmbH, Vor dem Kreuzberg 28,
 ** 72070 Tuebingen, Germany. All rights reserved.
 **
 ** yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
 ** of demo files in source code or binary form, with or without
 ** modification, is not permitted.
 **
 ** Owners of a valid software license for a yFiles for HTML version that this
 ** demo is shipped with are allowed to use the demo source code as basis
 ** for their own yFiles for HTML powered applications. Use of such programs is
 ** governed by the rights and conditions as set out in the yFiles for HTML
 ** license agreement.
 **
 ** THIS SOFTWARE IS PROVIDED ''AS IS'' AND ANY EXPRESS OR IMPLIED
 ** WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 ** MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
 ** NO EVENT SHALL yWorks BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
 ** TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 ** PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
 ** LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 ** NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 ** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 **
 ***************************************************************************/
.node,
.edge,
.edge > *,
.label {
  --hover-elevation: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}

/* Nodes */
.node {
  transition-property: opacity, stroke, fill, filter, stroke-width;
}
.node.type-0 {
  fill: #17bebb;
  stroke: #094c4b;
}
.node.type-1 {
  fill: #ffc914;
  stroke: #665008;
}
.node.type-2 {
  fill: #ff6c00;
  stroke: #662b00;
}
.node.hovering {
  stroke-width: 4px;
  filter: var(--hover-elevation);
  opacity: 1 !important;
  cursor: pointer;
}
.node.connected {
  fill: #c1c1c1;
  stroke: #4d4d4d;
}

/* Edges */
@keyframes marching-ants {
  to {
    stroke-dashoffset: 0;
  }
}
.edge {
  color: #000; /* use currentColor for edge stroke and arrow */
  transition-property: opacity, color;
}
.edge > * {
  transition-property: stroke-width;
}
.edge.selected {
  color: #e01a4f;
  stroke-dasharray: 4px;
  stroke-dashoffset: 8px;
  animation: marching-ants 0.7s linear infinite;
}
.edge.hovering {
  filter: var(--hover-elevation);
  opacity: 1 !important;
}
.edge.hovering > * {
  stroke-width: 2px;
}

/* Labels */
.label {
  opacity: 1;
  transition-property: opacity;
}
.label.invisible {
  opacity: 0;
}

/* Fade-out items that are neither selected nor connected */
#graphComponent.focus-selection .node:not(.selected, .connected),
#graphComponent.focus-selection .edge:not(.selected, .connected) {
  opacity: 0.2;
}
