/****************************
 * Social media
****************************/
.social-buttons ul {display:flex; margin:0; list-style:none;}
.social-buttons ul > li {padding:0;}
.social-buttons ul > li:not(:last-child) {margin:0 16px 0 0;}
.social-buttons ul > li > a {
    text-decoration:none; color:var(--vii-color-permalink);
    border:2px solid rgb(0 0 0 / 0.35); border-radius:50%;
    width:40px; height:40px; line-height:1;
    display:flex; align-items:center; justify-content:center;
}
.social-buttons ul > li > a:hover, .social-buttons ul > li > a:focus {
    text-decoration:none !important;
    background:var(--vii-color-primary);
    color:var(--vii-color-on-primary) !important;
}
.social-buttons ul > li > a:focus-visible {border-radius:50% !important;}

.site-footer-content .social-buttons {padding-left:30px;}
.site-footer-content .social-buttons ul > li > a {border:2px solid rgba(255, 255, 255, .1);}

.site-nav--mobile .social-buttons ul {justify-content:center;}