/**
 * Social media buttons
 */

/* Component block */
.social {
  padding-left: 0;
  li {
    display: inline-block;
    margin-right: 10px;
  }
}

/* Bootstrap button modifier */
.btn-social {
  width: 46px;
  height: 46px;
  padding: 0;
  touch-action: manipulation;
  border-style: none;
}

/* SVG path variant modifiers
 * The .social-bg-* and .social-fg-* classes are applied to the background and
 * foreground paths in the inline SVG for the button.
 */
.social-fg-facebook,
.social-fg-twitter,
.social-fg-linkedin,
.social-fg-email {
  fill: #fff;
}
.social-bg-facebook {
  fill: #3d5193;
}
.social-bg-twitter {
  fill: #38a8e0;
}
.social-bg-linkedin {
  fill: #0077b5;
}
.social-bg-email {
  fill: #8c8d8d;
}

/* Invert foreground and background colours for hovers/focus. */
.btn-social:hover,
.btn-social:focus-visible {
  .social-bg-facebook,
  .social-bg-twitter,
  .social-bg-linkedin,
  .social-bg-email {
    fill: #fff;
  }

  .social-fg-facebook {
    fill: #3d5193;
  }
  .social-fg-twitter {
    fill: #38a8e0;
  }
  .social-fg-linkedin {
    fill: #0077b5;
  }
  .social-fg-email {
    fill: #8c8d8d;
  }
}
