/**
 * MKM Bix - Social Links
 * Social media link styles
 * @package MKM_Bix
 */

/* ==================== SOCIAL LINKS WRAPPER ==================== */
.mkm-social-links {
    display: flex;
    align-items: center;
    gap: var(--mkm-space-2);
    flex-wrap: wrap;
}

/* ==================== SOCIAL LINK ==================== */
.mkm-social-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mkm-gray-100);
    color: var(--mkm-gray-700);
    border-radius: var(--mkm-radius-full);
    transition: all var(--mkm-transition-fast);
}

.mkm-social-link:hover {
    transform: translateY(-3px);
}

.mkm-social-link svg {
    width: 16px;
    height: 16px;
}

/* ==================== SOCIAL LINK SIZES ==================== */
.mkm-social-links-sm .mkm-social-link {
    width: 32px;
    height: 32px;
}

.mkm-social-links-sm .mkm-social-link svg {
    width: 14px;
    height: 14px;
}

.mkm-social-links-lg .mkm-social-link {
    width: 44px;
    height: 44px;
}

.mkm-social-links-lg .mkm-social-link svg {
    width: 20px;
    height: 20px;
}

/* ==================== SOCIAL COLORS ==================== */
.mkm-social-link.facebook:hover {
    background: #1877f2;
    color: var(--mkm-white);
}

.mkm-social-link.twitter:hover {
    background: #000000;
    color: var(--mkm-white);
}

.mkm-social-link.instagram:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: var(--mkm-white);
}

.mkm-social-link.youtube:hover {
    background: #ff0000;
    color: var(--mkm-white);
}

.mkm-social-link.linkedin:hover {
    background: #0a66c2;
    color: var(--mkm-white);
}

.mkm-social-link.pinterest:hover {
    background: #e60023;
    color: var(--mkm-white);
}

.mkm-social-link.telegram:hover {
    background: #0088cc;
    color: var(--mkm-white);
}

.mkm-social-link.whatsapp:hover {
    background: #25d366;
    color: var(--mkm-white);
}

.mkm-social-link.tiktok:hover {
    background: #000000;
    color: var(--mkm-white);
}

.mkm-social-link.reddit:hover {
    background: #ff4500;
    color: var(--mkm-white);
}

.mkm-social-link.github:hover {
    background: #333333;
    color: var(--mkm-white);
}

.mkm-social-link.discord:hover {
    background: #5865f2;
    color: var(--mkm-white);
}

/* ==================== SOCIAL LINKS COLORED ==================== */
.mkm-social-links-colored .mkm-social-link.facebook {
    background: #1877f2;
    color: var(--mkm-white);
}

.mkm-social-links-colored .mkm-social-link.twitter {
    background: #000000;
    color: var(--mkm-white);
}

.mkm-social-links-colored .mkm-social-link.instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: var(--mkm-white);
}

.mkm-social-links-colored .mkm-social-link.youtube {
    background: #ff0000;
    color: var(--mkm-white);
}

.mkm-social-links-colored .mkm-social-link.linkedin {
    background: #0a66c2;
    color: var(--mkm-white);
}

.mkm-social-links-colored .mkm-social-link:hover {
    opacity: 0.9;
    transform: translateY(-3px);
}

/* ==================== SOCIAL LINKS OUTLINE ==================== */
.mkm-social-links-outline .mkm-social-link {
    background: transparent;
    border: 1px solid var(--mkm-gray-300);
}

.mkm-social-links-outline .mkm-social-link:hover {
    border-color: transparent;
}

/* ==================== SOCIAL LINKS LIGHT (for dark backgrounds) ==================== */
.mkm-social-links-light .mkm-social-link {
    background: rgba(255, 255, 255, 0.1);
    color: var(--mkm-white);
}

.mkm-social-links-light .mkm-social-link:hover {
    background: var(--mkm-white);
    color: var(--mkm-gray-900);
}