a[class*='social-'] {
display: inline-flex;
margin: var(--space-1);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
align-items: center;
color: inherit;
text-decoration: none;
&::before {
--size: 1em;
height: var(--size);
width: var(--size);
display: inline-block;
content: '';
background-repeat: no-repeat;
margin-right: var(--space-1);
}
&:focus, &:hover {
text-decoration: underline;
}
}
.social-facebook::before {
background-image: url('data:image/svg+xml;utf8,');
}
.social-twitter::before {
background-image: url('data:image/svg+xml;utf8,');
}
.social-linkedin::before {
background-image: url('data:image/svg+xml;utf8,');
}
.social-youtube::before {
background-image: url('data:image/svg+xml;utf8,');
}
.social-github::before {
background-image: url('data:image/svg+xml;utf8,');
}
.social-website::before {
background-image: url('data:image/svg+xml;utf8,');
}
.social-slides::before {
background-image: url('data:image/svg+xml;utf8,');
}