.social-link {
  @include square($social-link-size);

  cursor: pointer;
  display: inline-block;
  background-color: currentColor;

  font-size: $font-size-large;
  text-align: center;
  vertical-align: middle;

  .icon {
    color: white;
    line-height: $social-link-size;
    position: static; // Override positioning since we're using vertical-align: middle;
  }
}

@each $name, $color in $social-links {
  // We intentionally make this more specific to resolve color conflicts
  // with .u-bg-dark handling for standard links. Selectors are repeated to bump
  // up specificity (without using !important)
  // see: http://cssguidelin.es/#hacking-specificity
  .social-link-#{$name}.social-link-#{$name} {
    color: $color;

    &:focus,
    &:hover {
      color: darken($color, 10%);
    }
  }
}