.linkedin,
.facebook,
.twitter,
.instagram, 
.tiktok, 
.youtube,
.bluesky {
  text-transform: capitalize;
  text-indent:-9999px;
  position:relative;
  display:inline-block;
  margin:var(--d-space-xxs) 0 0 0;
  border-radius: calc(var(--d-social-media-size) / 2);
}
.linkedin span,
.facebook span,
.twitter span,
.instagram span, 
.tiktok span, 
.youtube span,
.bluesky span {
  width: var(--d-social-media-size);
  height: var(--d-social-media-size);
  -webkit-mask-image: url('../../images/icons/social-media.svg');
  mask-image: url('../../images/icons/social-media.svg');
  -webkit-mask-size: calc(var(--d-social-media-size) * 7) var(--d-social-media-size); /* width = var(--d-social-media-size) x (no. of icons + 1) */
  mask-size: calc(var(--d-social-media-size) * 7) var(--d-social-media-size); /* width = var(--d-social-media-size) x (no. of icons + 1) */
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  border-radius: calc(var(--d-social-media-size) / 2);
  background-color: var(--d-social-media-color);
  display: block;
}
.twitter span {
  -webkit-mask-position: calc(var(--d-social-media-size) * -1) 0;
  mask-position: calc(var(--d-social-media-size) * -1) 0;
}
.facebook span {
  -webkit-mask-position: calc(var(--d-social-media-size) * -2) 0;
  mask-position: calc(var(--d-social-media-size) * -2) 0;
}
.instagram span {
  -webkit-mask-position: calc(var(--d-social-media-size) * -3) 0;
  mask-position: calc(var(--d-social-media-size) * -3) 0;
}
.tiktok span {
  -webkit-mask-position: calc(var(--d-social-media-size) * -4) 0;
  mask-position: calc(var(--d-social-media-size) * -4) 0;
}
.youtube span {
  -webkit-mask-position: calc(var(--d-social-media-size) * -5) 0;
  mask-position: calc(var(--d-social-media-size) * -5) 0;
}
.bluesky span {
  -webkit-mask-position: calc(var(--d-social-media-size) * -6) 0;
  mask-position: calc(var(--d-social-media-size) * -6) 0;
}
.linkedin span:hover,
.facebook span:hover,
.twitter span:hover,
.instagram span:hover,
.tiktok span:hover,
.youtube span:hover,
.bluesky span:hover,
.linkedin span:focus-visible,
.facebook span:focus-visible,
.twitter span:focus-visible,
.instagram span:focus-visible,
.tiktok span:focus-visible,
.youtube span:focus-visible,
.bluesky span:focus-visible {
  background-color: var(--d-social-media-color-hover);
}