/* ========================================
   Canonical Social Icons System
======================================== */

.bc-social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;

    margin: 20px auto 32px;

    width: 100%;
}

.bc-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.bc-social-icon svg {
    width: 20px;
    height: 20px;

    display: block;

    fill: currentColor;
    stroke: currentColor;

    transition:
        transform var(--bcn-transition-fast),
        opacity var(--bcn-transition-fast);
}

.bc-social-icon--utility svg {
    width: 24px;
    height: 24px;
}

.bc-social-icon:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}