@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;

  h1 {
    font-size: 22px;
    text-align: center;
    margin-top: calc(50% - 22px);
  }
}

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

//   line.active {
//     opacity: 1;
//     stroke: green;
//     stroke-width: 5;
//     stroke-dasharray: 100;
//     animation: dash 2.5s infinite linear;
//   }

//   circle {
//     cursor: pointer;
//     stroke-width: 2 !important;
//   }
// }

.node {
  stroke-width: 2 !important;
}

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