$icon-size: 48px;
$icon-padding: 5px;
$icon-size-total: $icon-size + $icon-padding;
$icon-more-count: 6;
$icon-transition-length: .4s;

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 300px;
  margin: auto;
  background: #f8f8f8;
  color: #222;
  font-family: "Source Sans Pro", sans-serif;
  text-align: center;
}

.title,
.desc {
  margin: 0;
}

.title {
  color: lighten(#f40924, 15%);
  font-size: 3rem;
  font-weight: 300;
}

.explanation {
  max-width: 500px;
  margin: 1em auto;
}

.iconbar {
  margin: 20px 0;
  text-align: center;
  
  &:hover {
    .iconbar__link--outside {
      opacity: 1;
    }
  }
}

.iconbar__container {
  display: inline-block;
  position: relative;
}

.iconbar__link {
  color: inherit;
  text-decoration: none;
}

.icon {
  width: $icon-size-total;
  padding: $icon-padding;
  font-size: 3em;
}

// Colors!
.iconbar__link {
  transition: all .3s;
  
  &--github:hover {
    color: #333;
  }
  
  &--twitter:hover {
    color: #55acee;
  }
  
  &--email:hover {
    color: #4285f4;
  }
  
  &--facebook:hover {
    color: #3b5999;
  }
  
  &--google-plus:hover {
    color: #dd4b39;
  }
  
  &--instagram:hover {
    color: #3f729b;
  }
  
  &--reddit:hover {
    color: #ff4500;
  }
  
  &--linkedin:hover {
    color: #0976b4;
  }
  
  &--web:hover {
    color: #f40924;
  }
}

.iconbar__link--outside {
  display: inline-block;
}

.iconbar__link--outside {
  position: absolute;
  top: 0;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity $icon-transition-length, transform $icon-transition-length cubic-bezier(.3, .15, 0, 1.3), color $icon-transition-length 0;
  
  &:nth-of-type(2n-1) {
    right: 100%;
  }
  
  &:nth-of-type(2n) {
    left: 100%;
  }
}

@for $i from 1 through $icon-more-count {
  .iconbar__link--outside:nth-of-type(#{$i}) {
    // NOTE: There are three transitions. One on opacity, one on transform, one on color. Color HAS TO STAY 0 or the color transition will be delayed, perhaps significantly.
    // The outermost icons will disappear first on hovering out
    transition-delay: ($icon-more-count - ($i - 1)) * .1s - .1s, ($icon-more-count - ($i - 1)) * .1s, 0;
    // But when hovering in, the innermost icons will appear first
    .iconbar:hover & {
      transform: translateY(0);
      transition-delay: ($i - 1) * ($icon-transition-length / 4) - .1s, ($i - 1) * ($icon-transition-length / 4), 0;
    }
    
    // Use modulo (%) to get even and odd numbers
    // Give the first left and right elements some added margin of the calculation of 4px to mimic the invisible margin inline-block elements have
    @if ($i % 2 == 0) {
      // Even ones, scattered on the right
      margin-left: (floor(($i - 1)/2)) * $icon-size-total + 6px;
    }

    @else {
      // Odd ones, scattered on the left
      margin-right: (floor(($i - 1)/2)) * $icon-size-total + 6px;
    }
  }
}