/**
 * Frontend styles for the Social Sharing Block
 */

.wp-block-wpzoom-blocks-social-sharing {
    position: relative;


    &.align-center .social-sharing-icons {
        justify-content: center;
    }

    &.align-left .social-sharing-icons  {
        justify-content: flex-start;
    }

    &.align-right .social-sharing-icons {
        justify-content: flex-end;
    }
    
    .social-sharing-icons {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        margin: 0;
        
        .social-sharing-icon-li {
            display: inline-block;
            margin: 0;
            padding: 0;
        }
        
        .social-sharing-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all 0.3s ease;
            
            &:hover {
                opacity: 0.9;
                transform: scale(1.05);
            }
            
            // Ensure SVG icons respect the color attribute
            svg {
                fill: currentColor;
            }
        }
        
        .social-sharing-icon-label {
            margin-left: 8px;
        }
    }
}

// Block style variations
.is-style-default {
    .social-sharing-icon {
        border-radius: 50%;
        // No color overrides here to allow custom colors
    }
}

.is-style-filled {
    .social-sharing-icon {
        border-radius: 0;
        // No color overrides here to allow custom colors
    }
}

.is-style-rounded {
    .social-sharing-icon {
        border-radius: 8px;
        // No color overrides here to allow custom colors
    }
}

.is-style-outlined-pill {
    .social-sharing-icon {
        background-color: transparent !important;
        border: 1px solid currentColor;
        border-radius: 50%;
        
        // Only override colors if they haven't been customized
        &:not([style*="color:"]) {
            svg {
                fill: #000;
            }

            .social-sharing-icon-label {
                color: #000;
            }
        }
    }
}

.is-style-outlined-square {
    .social-sharing-icon {
        background-color: transparent !important;
        border: 1px solid currentColor;
        border-radius: 0;

        // Only override colors if they haven't been customized
        &:not([style*="color:"]) {
            svg {
                fill: #000;
            }
            
            .social-sharing-icon-label {
                color: #000;
            }
        }
    }
}

.is-style-minimal {
    .social-sharing-icon {
        background-color: transparent !important;
        border: none !important;
        padding: 5px !important;
        
        // Only override colors if they haven't been customized
        &:not([style*="color:"]) {
            svg {
                fill: #000;
            }

            .social-sharing-icon-label {
                color: #000;
            }
        }
    }
}

.is-style-one-tone {
    .social-sharing-icon {
        // No background-color override to allow custom colors

        // Don't override SVG fill to respect the icon color set in attributes
    }
}