/****************************
 * Social media
****************************/
.vii-social-buttons ul {display:inline-flex; margin:0; gap:var(--vii-gap-container); flex-wrap:wrap;}
.vii-social-buttons ul > li > a {color:var(--color);}
.vii-social-buttons ul > li > a:hover, .vii-social-buttons ul > li > a:focus {color:var(--color-hover); text-decoration:none;}

/* style text */
.vii-social-buttons.text {
    --color:var(--vii-color-text);
    --color-hover:var(--vii-color-permalink-highlight);
}
.txt_color_white .vii-social-buttons.text {
    --color:rgba(255, 255, 255, 1);
    --color-hover:var(--vii-color-permalink-highlight);
}

/* style icon */
.vii-social-buttons.icon {
    --sb-size:22px;
    --color:var(--vii-color-white);
    --border-color:rgba(0, 0, 0, 0.1);
    --bg:var(--vii-color-primary);
}
.vii-social-buttons.icon ul {gap:5px;}
.vii-social-buttons.icon ul > li a {
    padding:.1em;
    border-radius:4px; background:var(--bg);
    box-shadow:inset 0 0 0 1px var(--border-color);
    text-decoration:none; color:var(--vii-color-text); font-size:var(--sb-size); line-height:1; aspect-ratio:1;
    width:48px; display:flex; align-items:center; justify-content:center;
}
.vii-social-buttons.icon ul > li > a i {color:var(--color); transition:all .3s ease; display:block;}
.vii-social-buttons.icon ul > li a:hover {background:var(--vii-color-white); --border-color:var(--vii-color-primary);}
.vii-social-buttons.icon ul > li a:hover i {color:var(--vii-color-primary);}


/* style icon white */
.txt_color_white .vii-social-buttons__heading {color:var(--vii-color-light-blue);}
.txt_color_white .vii-social-buttons.icon {
    --color:#fff;
    --border-color:rgba(255, 255, 255, 0.1);
    --bg:rgba(255, 255, 255, 0.2);
}
.txt_color_white .vii-social-buttons.icon ul > li a:hover {background:var(--vii-color-primary); --border-color:rgba(255, 255, 255, 0.1);}
.txt_color_white .vii-social-buttons.icon ul > li a:hover i {color:#fff;}

@media only screen and (max-width:1023px) {
    .vii-social-buttons.icon {--sb-size:20px;}
}