.networks
  .netbox
    a(class="icon ion-social-facebook" href="#" data-tip="I share some interesting posts about Tech in FB!")
    a(class="icon ion-social-twitter"  href="#" data-tip="Wanna know when I'm cooking a new Codepen recipe? Follow me!")
    a(class="icon ion-social-github"   href="#" data-tip="I've written a lot of lines of code, take a look :)")
    a(class="icon ion-social-codepen"  href="#" data-tip="I do some Pens to have fun!")
    

$background-color: #EF5350; // I use #1a1a1a
$soft-color: #444; // I use #444
$main-color: #FFE082; // I use #fff176

$size: 40px;

:root {
  font-size: $size;
}

body {
  background-color: $background-color;
}

.networks {
  // This is just a container to center the netbox
  width: 100%;
  height: 100vh;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.netbox {
  position: relative;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  border: 1px solid $soft-color;
  color: $soft-color;
  
  .icon {
    padding: 0.6rem 0.6rem;
    color: $soft-color;
    transition: color 140ms ease;
    margin: 0 0.4rem;
    
    &:after {
      position: absolute;
      right: 0;
      bottom: 3.5rem;
      z-index: 20;
      
      content: attr(data-tip);
      display: block;
      width: auto;
      
      font-size: 0.6rem;
      color: $background-color;
      background-color: $main-color;
      padding: 1rem;
      
      opacity: 0;
      pointer-events: none;
      transform: translateY(1rem);
      transition: all 300ms ease 200ms;
      // The animation is delayed 200ms to avoid multiple animations when hovering multiple icons quickly
    }
    
    &:hover {
      color: $main-color;
      
      &:after {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
  }
  
  &:before {
    position: absolute;
    top: -0.5rem;
    right: 0;
    
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    
    background-color: $main-color;
  }
  
  &:after {
    position: absolute;
    top: -0.8rem;
    right: 0;
    
    content: 'Find me on my networks!';
    font-size: 0.5rem;
    padding-left: 10px;
    background-color: $background-color;
    // This background color should match the general background to make the efect with the yellow line
  }
  
}