Network {
  div {
    margin: .8rem
    border-bottom: 1px solid gainsboro
  }

}

NetworkConnection {
  padding-left: 6rem
  padding-bottom: .8rem
  position: relative

  display: flex
  flex-direction: row
  flex-wrap: wrap
  align-items: center

  section.avatar {
    position: absolute
    left: 0
    top: 0

    a img {
      height: 3rem
      width: 3rem
    }
  }

  section.time-ago {
    position: absolute
    left: 0
    top: 3.5rem

    font-size: .8rem
    $textSubtle
  }

  section.name {
    flex-basis: 100%

    margin-right: 1rem
  }

  section.type {
    flex-basis: 100%

    font-size: .8rem
    $textSubtle
  }

  section.source {
    flex-basis: 100%
    label { margin-right: .5rem }
  }

  section.state {
    display: flex
    flex-direction: row
    align-items: center

    margin-right: 2rem

    label { margin-right: .5rem }
    i {
      width: 1rem
      height: 1rem
      border-radius: .5rem

      margin: 0 .2rem 0 .5rem

      background: #ccc

      -connecting, -disconnecting {
        background: #95cc95
       }

      -connected {
        background: #06e206
      }
    }
  }

  section.actions {
    button {
      padding: .2rem
      font-size: .7rem
    }
  }


  section.ping {
    flex-basis: 100%
    display: flex

    font-size: .8rem
    $textSubtle

    div.rtt {
      flex-basis: 8rem
      label { margin-right: .5rem }
    }

    div.skew {
      flex-basis: 8rem
      label { margin-right: .5rem }
    }
  }

  section.address{
    flex-basis: 100%

    font-size: .8rem
    $textSubtle
  }
}