//
// Social Buttons
//

$buttonNames: (
  "facebook",
  "twitter",
  "linkedin",
  "dribbble",
  "googleplus",
  "instagram",
  "pinterest",
  "dropbox",
  "flickr",
  "tumblr",
  "skype",
  "youtube",
  "github"
);
$buttonColors: (
  #3b5998,
  #55acee,
  #007bb6,
  #ea4c89,
  #dd4b39,
  #3f729b,
  #cb2027,
  #007ee5,
  #ff0084,
  #32506d,
  #00aff0,
  #bb0000,
  #171515
);

@mixin socialButtons($class, $name, $color: #3b5998) {
  .#{$class}-#{$name} {
    background: $color;
    color: $white;
    &:hover {
      background: darken($color, 8%);
      color: $white;
    }
    &:active {
      background: darken($color, 25%);
      color: $white;
    }
  }
}

// loop over $buttonNames
@each $buttonName in $buttonNames {
  // Find the current index of $buttonNames...
  $index: index($buttonNames, $buttonName);
  // ... to pull the right value $buttonColors
  @include socialButtons("btn", $buttonName, nth($buttonColors, $index));
}

$buttons: (
  "facebook": #3b5998,
  "twitter": #55acee,
  "linkedin": #007bb6,
  "dribbble": #ea4c89,
  "googleplus": #dd4b39,
  "instagram": #3f729b,
  "pinterest": #cb2027,
  "dropbox": #007ee5,
  "flickr": #ff0084,
  "tumblr": #32506d,
  "skype": #00aff0,
  "youtube": #bb0000,
  "github": #171515,
);

@each $buttonName, $color in $buttons {
  @include socialButtons("btn", $buttonName, $color);
}