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

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

.network, .data {
  display: inline-block;
  vertical-align: top;
  height: 100vh;
}

.network {
  width: 70%;
}

.data {
  width: calc(30% - 1px);
  color: #00FF00;
  word-wrap: break-word;
  overflow-y: scroll;
  border-left: 1px solid $darkgrey;
  font-family: 'Courier New';

  header {
    margin: 20px 0;
    padding: 20px;
    border-bottom: 1px solid $darkgrey;

    h1 {
      font-weight: bold;
      font-size: 30px;
    }
  }


  .tabs {
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    
    .tab {
      padding: 10px;
      cursor: pointer;
      transition: all 0.25s;

      &:hover {
        background: #00FF00;
        color: $black;
        opacity: 0.5;
      }

      &.active {
        background: #00FF00;
        color: $black;
      }
    }

  }
  
  .currentTab {
    margin-top: 20px;
    padding: 20px;
  }
}