.ll-social-icons {
--ll-social-icon-size: 20px;
--ll-social-icon-gap: 12px;
--ll-social-icon-color: #1f1f1f;
--ll-social-icon-hover-color: #b88a7a;
--ll-social-icon-active-color: #1f1f1f;
--ll-social-icon-bg-color: transparent;
--ll-social-icon-border-radius: 12px;
--ll-social-icon-transition: 0.2s;
display: flex;
align-items: center;
gap: var(--ll-social-icon-gap);
flex-wrap: wrap;
}

:where(.ll-social-align-left) {
justify-content: flex-start;
}

:where(.ll-social-align-center) {
justify-content: center;
}

:where(.ll-social-align-right) {
justify-content: flex-end;
}

.ll-social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(var(--ll-social-icon-size) + 10px);
height: calc(var(--ll-social-icon-size) + 10px);
color: var(--ll-social-icon-color);
background-color: var(--ll-social-icon-bg-color);
border-radius: var(--ll-social-icon-border-radius);
text-decoration: none;
transition: color var(--ll-social-icon-transition) ease, background-color var(--ll-social-icon-transition) ease, transform var(--ll-social-icon-transition) ease;
}

.ll-social-icon:visited {
color: var(--ll-social-icon-color);
}

.ll-social-bg-circle .ll-social-icon {
border-radius: 999px;
}

.ll-social-bg-none .ll-social-icon {
background-color: transparent;
width: var(--ll-social-icon-size);
height: var(--ll-social-icon-size);
}

.ll-social-icon svg {
width: var(--ll-social-icon-size);
height: var(--ll-social-icon-size);
display: block;
fill: currentColor;
}

.ll-social-icon:hover,
.ll-social-icon:focus-visible {
color: var(--ll-social-icon-hover-color);
transform: translateY(-1px);
}

.ll-social-icon:active {
color: var(--ll-social-icon-active-color);
}

.ll-social-icon:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}