//
// Social menu
// ----------------------------

.menu--social {
  .nav-link {
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
    background-repeat: no-repeat;
    background-size: contain;
    text-indent: 9999px;
    overflow: hidden;

    &:hover {
      opacity: 1;
    }
  }

  // Example of the postCSS inline SVG with Bootstrap icons
  @each $name, $color in $social_icons {
    [href*="#{$name}"] {
      background-image: svg-load("../icons/#{$name}.svg", fill=#{$white});

      &:hover {
        background-image: svg-load("../icons/#{$name}.svg", fill=#{$color});
      }
    }
  }
}
