/**
 * Social media buttons
 */

@use "../settings" as *;
@use "../tools" as *;

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

/* Bootstrap button modifier */
.btn-social {
  --#{$prefix}btn-focus-border-color: #{$black};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($gray-800)};
  width: 46px;
  height: 46px;
  padding: 0;
  touch-action: manipulation;
  border-style: none;
  @include edgel-focus-outline();
}

/* 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: #000;
}
.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: #000;
  }
  .social-fg-linkedin {
    fill: #0077b5;
  }
  .social-fg-email {
    fill: #8c8d8d;
  }
}