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

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

.networkLoading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: $black;

  h1 {
    font-size: 22px;
    color: $green;
    font-family: 'courier';
    text-align: center;
    margin-top: 25%;
  }
}

.networkchannels {
  position: relative;
}

.network, .channels {
  display: inline-block;
  vertical-align: top;
}

.network {
  width: 70%;
}

.channels {
  width: calc(30% - 2px);
  border: 1px solid $darkestgrey;
  border-radius: 5px;
}

.node {
  r: 15;
  fill: $darkestgrey;

  .active {
    r: 25;
    fill: $green;
    stroke: $green;
  }
}

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

.channel {
  padding: 10px;
  background: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  transition: all 0.25s;
  border-bottom: 1px solid $white;

  &.active, &:hover {
    background: rgba(255, 255, 255, 0.4);
  }

  header {
    margin-bottom: 10px;

    .active {
      color: $green;
    }

    .notactive {
      color: $green;
    }

    span svg {
      font-size: 10px;
    }

    i {
      text-transform: uppercase;
      font-size: 10px;
      margin-left: 5px;
    }
  }

  .content {
    div {
      margin-bottom: 5px;
    }

    h4 {
      text-transform: uppercase;
      margin-bottom: 5px;
      font-size: 10px;
      color: $main;
    }

    h2 {
      font-size: 14px;
      color: $white;
    }
  }
}