@import '../../variables.scss';

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}

@keyframes fadein {
  0%   { background: $white; }
  50%  { background: lighten($secondary, 50%); }
  100% { background: $secondary; animation-fill-mode:forwards; }
}

.networkLoading {
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 100vh;
  animation: fadein 0.5s;
  animation-timing-function:linear;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;

  h1 {
    font-size: 22px;
    text-align: center;
    margin-top: calc(50% - 22px);
    animation: color-change 1s infinite;
  }
}

.network {
  width: 100%;
  height: 100vh;
  animation: fadein 0.5s;
  animation-timing-function:linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.node {
  stroke-width: 2 !important;
  animation: color-change 1s infinite;
  fill: #353535;

  &.owner {
    fill: #FFFFFF;
  }

  &.peer {
    fill: #5589F3;
  }
}

.activeEdge {
  opacity: 1;
  stroke: #88D4A2;
  stroke-width: 5;
  stroke-dasharray: 100;
  animation: dash 2.5s infinite linear;
}

.network {
  display: inline-block;
  vertical-align: top;
  height: 100vh;
  width: 70%;
}