.social-media-icon {
  width: 28px;
  height: 28px;
}

.social-media-icon a{
  position: relative;
  width: inherit;
  height: inherit;
  margin-right: 1rem;
  transition: all .3s ease-out;
}

.social-media-icon a:focus-within::after{
  border: 2px solid blue;
}

.social-media-icon a:after{
  content: "";
  height: inherit;
  width: inherit;
  position: absolute;
  top: 0;
  left: 0;

  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;

  background-color: inherit;
}

.icon-facebook.social-media-icon a:after  { mask-image: url(../img/icon-facebook.svg); -webkit-mask-image: url(../img/icon-facebook.svg); }
.icon-twitter.social-media-icon a:after { mask-image: url(../img/icon-twitter.svg); -webkit-mask-image: url(../img/icon-twitter.svg); }
.icon-instagram.social-media-icon a:after { mask-image: url(../img/icon-instagram.svg); -webkit-mask-image: url(../img/icon-instagram.svg); }
.icon-linkedin.social-media-icon a:after  { mask-image: url(../img/icon-linkedin.svg); -webkit-mask-image: url(../img/icon-linkedin.svg); }