/**
 * WPE Social Links Block - Frontend Styles
 * Clean, Modern, Professional, Outline Style
 */

/* Social links container */
.wpe-social-links-container {
    display: flex;
    gap: 16px;
    padding: 15px;
    border-radius: var(--border-radius, 4px);
    width: fit-content;
}

/* Container with background */
.wpe-social-links-container[style*="--background-color"] {
    background-color: var(--background-color);
    padding: 15px;
}

/* Layout variations */
.wpe-social-links-horizontal {
    flex-direction: row;
}

.wpe-social-links-vertical {
    flex-direction: column;
}

/* Button shared styles - Outline Mode */
.wpe-social-links-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 2px solid var(--button-color, #0073aa);
    color: var(--button-color, #0073aa);
    border-radius: var(--border-radius, 4px);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.wpe-social-links-button:hover,
.wpe-social-links-button.wpe-social-hover {
    background-color: var(--button-color, #0073aa);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.wpe-social-links-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Icon container */
.wpe-social-links-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG icons - now using fill */
.wpe-social-links-icon svg {
    fill: currentColor;
    stroke: none;
}

/* Button sizes */
.wpe-social-links-small .wpe-social-links-button {
    width: 32px;
    height: 32px;
}

.wpe-social-links-medium .wpe-social-links-button {
    width: 40px;
    height: 40px;
}

.wpe-social-links-large .wpe-social-links-button {
    width: 48px;
    height: 48px;
}

/* Icon sizes */
.wpe-social-links-small .wpe-social-links-icon svg {
    width: 16px;
    height: 16px;
}

.wpe-social-links-medium .wpe-social-links-icon svg {
    width: 20px;
    height: 20px;
}

.wpe-social-links-large .wpe-social-links-icon svg {
    width: 24px;
    height: 24px;
}

/* Social network specific styles */
.wpe-social-links-facebook {
    border-color: var(--button-color, #1877F2);
    color: var(--button-color, #1877F2);
}

.wpe-social-links-facebook:hover {
    background-color: var(--button-color, #1877F2);
}

.wpe-social-links-twitter {
    border-color: var(--button-color, #1DA1F2);
    color: var(--button-color, #1DA1F2);
}

.wpe-social-links-twitter:hover {
    background-color: var(--button-color, #1DA1F2);
}

.wpe-social-links-linkedin {
    border-color: var(--button-color, #0A66C2);
    color: var(--button-color, #0A66C2);
}

.wpe-social-links-linkedin:hover {
    background-color: var(--button-color, #0A66C2);
}

.wpe-social-links-email {
    border-color: var(--button-color, #333333);
    color: var(--button-color, #333333);
}

.wpe-social-links-email:hover {
    background-color: var(--button-color, #333333);
}

/* Modern subtle shadow */
.wpe-social-links-button {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wpe-social-links-container {
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .wpe-social-links-horizontal {
        flex-wrap: wrap;
    }
}