.rec-icon-social {
    width: 45px;
    height: 45px;
    fill: currentColor;
    user-select: none;
    transition: .2s ease all;
}

.custom_footer .icon--circle {
    --rec-social-icon-foreground: var(--rec-footer-bg);
    --rec-social-icon-bg: var(--rec-footer-foreground);
    --rec-social-icon-foreground-hover: var(--rec-footer-foreground);
    --rec-social-icon-bg-hover: var(--rec-footer-bg);
}

.icon--circle {
    color: var(--rec-social-icon-foreground);
    background: var(--rec-social-icon-bg);
    padding: 10px;
    box-sizing: border-box;
    border-radius: 50%;
    overflow: visible;
    border: .125rem solid;

    &:hover {
        color: var(--rec-social-icon-foreground-hover);
        background: var(--rec-social-icon-bg-hover);
    }

}