/**
 * Block Styles
 *
 * NOTE: `!important` is used in this stylesheet to enforce specific styles
 * for components that need to override default styles.
 */

.wp-block-smart-social-media-buttons-main {
	display: flex;
    position: relative;
    z-index: 1;

    * {
        transition: all 0.3s ease;
    }

    /* Block Wrapper */
    .ssmb-block-wrapper {
        width: 100%;
        height: fit-content;
        position: relative;

        /* Margin */
        margin: var(--ssmb-margin-top-size, 0)
                    var(--ssmb-margin-right-size, 0)
                    var(--ssmb-margin-bottom-size, 10px)
                    var(--ssmb-margin-left-size, 0);

        /* Border */
        &.ssmb-border-none {
            .ssmb-button-group-wrapper {
                border-style: none;
            }
        }

        &.ssmb-border-solid {
            .ssmb-button-group-wrapper {
                border-style: solid;
            }
        }

        &.ssmb-border-dashed {
            .ssmb-button-group-wrapper {
                border-style: dashed;
            }
        }

        &.ssmb-border-dotted {
            .ssmb-button-group-wrapper {
                border-style: dotted;
            }
        }

        /* Content Horizontal Alignment */
        &.ssmb-content-horizontal-align {
            display: flex;
            justify-content: var(--ssmb-content-horizontal-align, flex-start);
        }

        /* Hover State */
        &.is-hovered-state {
            .ssmb-button-group-wrapper {
                /* Box Shadow */
                box-shadow: var(--ssmb-box-shadow-hover, var(--ssmb-box-shadow));
                transition: box-shadow 0.3s ease-in-out;

                /* Background color */
                background-color: var(--ssmb-background-color-hover, var(--ssmb-background-color, transparent));

                /* Border Styles */
                border-color: var(--ssmb-border-color-hover, var(--ssmb-border-color, transparent));
                border-width: var(--ssmb-border-top-width-hover, var(--ssmb-border-top-width))
                              var(--ssmb-border-right-width-hover,  var(--ssmb-border-right-width))
                              var(--ssmb-border-bottom-width-hover, var(--ssmb-border-bottom-width))
                              var(--ssmb-border-left-width-hover, var(--ssmb-border-left-width));

                &.ssmb-background-image::before,
                &.ssmb-background-gradient::before {
                    background-color: rgba(0 0 0 / var(--ssmb-background-tint));
                }

                .ssmb-overlay-background {
                    background-color: var(--ssmb-overlay-background-color-hover, var(--ssmb-overlay-background-color, transparent));
                }
            }
        }

        .ssmb-button-group-wrapper {
            &:hover {
                /* Box Shadow */
                box-shadow: var(--ssmb-box-shadow-hover, var(--ssmb-box-shadow));
                transition: box-shadow 0.3s ease-in-out;

                /* Background color */
                background-color: var(--ssmb-background-color-hover, var(--ssmb-background-color, transparent));

                /* Border Styles */
                border-color: var(--ssmb-border-color-hover, var(--ssmb-border-color, transparent));
                border-width: var(--ssmb-border-top-width-hover, var(--ssmb-border-top-width))
                              var(--ssmb-border-right-width-hover,  var(--ssmb-border-right-width))
                              var(--ssmb-border-bottom-width-hover, var(--ssmb-border-bottom-width))
                              var(--ssmb-border-left-width-hover, var(--ssmb-border-left-width));

                &.ssmb-background-image::before,
                &.ssmb-background-gradient::before {
                    background-color: rgba(0 0 0 / var(--ssmb-background-tint));
                }

                .ssmb-overlay-background {
                    background-color: var(--ssmb-overlay-background-color-hover, var(--ssmb-overlay-background-color, transparent));
                }
            }
        }
    }
	
    /* Button Wrapper */
    .ssmb-button-group-wrapper {
        width: 100%;
        position: relative;

        /* Background color/image */
        background-color: var(--ssmb-background-color, transparent);
        background-image: var(--ssmb-background-image, none);
        background-size: var(--ssmb-background-size, cover);
        background-position: var(--ssmb-background-position, center center);
        background-repeat: var(--ssmb-background-repeat, no-repeat);
        background-attachment: var(--ssmb-background-attachment, scroll);
        mix-blend-mode: var(--ssmb-background-blend-mode, normal);

        /* Border Styles */
        border-color: var(--ssmb-border-color, transparent);
        border-width: var(--ssmb-border-top-width, 1px)
                      var(--ssmb-border-right-width, 1px)
                      var(--ssmb-border-bottom-width, 1px)
                      var(--ssmb-border-left-width, 1px);
        border-radius: var(--ssmb-top-left-radius, 0)
                       var(--ssmb-top-right-radius, 0)
                       var(--ssmb-bottom-right-radius, 0)
                       var(--ssmb-bottom-left-radius, 0);
        
        /* Box Shadow */
        box-shadow: var(--ssmb-box-shadow, none);

        /* Min Height */
        min-height: var(--ssmb-min-height-size);

        /* Max Width */
        max-width: var(--ssmb-max-width-size);

        /* Padding */
        padding: var(--ssmb-padding-top-size, 0)
                 var(--ssmb-padding-right-size, 0)
                 var(--ssmb-padding-bottom-size, 0)
                 var(--ssmb-padding-left-size, 0);

        /* Ensure content stays above the background and tint */
        .ssmb-background-image,
        .ssmb-background-gradient {
            position: relative;
            z-index: 0;
        }

        /* Gradient background */
        &.ssmb-background-gradient {
            background-image: var(--ssmb-background-gradient, none);
        }

        /* Pseudo-element for overlay, like tint, when background image exists */
        &.ssmb-background-image::before,
        &.ssmb-background-gradient::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0 0 0 / var(--ssmb-background-tint));
            pointer-events: none;
            z-index: 1;
            mix-blend-mode: var(--ssmb-background-blend-mode, normal);
            border-radius: var(--ssmb-top-left-radius) var(--ssmb-top-right-radius) var(--ssmb-bottom-right-radius) var(--ssmb-bottom-left-radius);
        }

        /* Before background for tint and opacity */
        .ssmb-overlay-background {
            background-color: var(--ssmb-overlay-background-color, transparent);
            background-image: var(--ssmb-background-gradient, none);
            mix-blend-mode: var(--ssmb-background-blend-mode, normal);
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            border-radius: var(--ssmb-top-left-radius) var(--ssmb-top-right-radius) var(--ssmb-bottom-right-radius) var(--ssmb-bottom-left-radius);
        }
    }

    /* Block Inner Blocks */
	.ssmb-block-editor-inner-blocks {
		display: flex;
		width: 100%;
        height: 100%;
        min-height: inherit;
        position: relative;
		z-index: 1;
	
        /* Horizontal Alignment */
        &.ssmb-horizontal-align {
            .ssmb-button-list {
                display: flex;
                flex-direction: row;
                justify-content: var(--ssmb-horizontal-align, flex-start);
            }
        }

        /* Vertical Alignment */
        // ssmb-vertical-align controls the vertical alignment of the container as a whole.
        // since both content and container use align-items for alignment, !important is used here to ensure the container alignment isn’t overridden by internal content alignment settings.
        &.ssmb-vertical-align {
            .ssmb-button-list {
                display: flex;
                flex-direction: column;
                align-items: var(--ssmb-vertical-align, flex-start) !important;
            }
        }

        /* Flex Wrap */
		&.ssmb-flex-nowrap {
            .ssmb-button-list {
                flex-wrap: nowrap;
            }
		}

		&.ssmb-flex-wrap {
			.ssmb-button-list {
                flex-wrap: wrap;
            }
		}

		&.ssmb-flex-wrap-reverse {
			.ssmb-button-list {
                flex-wrap: wrap-reverse;
            }
		}

        &.ssmb-full-width {
            &.ssmb-flex-wrap-reverse {
                .ssmb-button-list {
                    flex-direction: column-reverse;
                }
            }

            /* Full Width */
            .ssmb-block-button {
                width: 100%;
                
                .ssmb-icon-button-wrapper {
                    width: 100%;
                    
                    .ssmb-inner-icon {
                        width: 100%;
                    }
                }
            }
        }

        /* Content Vertical Alignment */
        &.ssmb-content-vertical-align {
            align-items: var(--ssmb-content-vertical-align, flex-start);

            .ssmb-button-list {
                align-items: var(--ssmb-content-vertical-align, flex-start);
            }
        }

        .ssmb-button-list {
            display: flex;
            width: 100%;

            /* Row/Column Gap */
            gap: var(--ssmb-row-gap-size, 10px) var(--ssmb-column-gap-size, 10px);
        }
	}
}

/* Responsive Control - Tablet */
@media (max-width: 1024px) {
    .wp-block-smart-social-media-buttons-main {
        /* Block Wrapper */
        .ssmb-block-wrapper {
            /* Content Horizontal Alignment */
            &.ssmb-content-horizontal-align {
                display: flex;
                justify-content: var(--ssmb-content-horizontal-align-tablet, var(--ssmb-content-horizontal-align, flex-start));
            }

            /* Margin */
            margin: var(--ssmb-margin-top-size-tablet, var(--ssmb-margin-top-size))
                    var(--ssmb-margin-right-size-tablet, var(--ssmb-margin-right-size))
                    var(--ssmb-margin-bottom-size-tablet, var(--ssmb-margin-bottom-size))
                    var(--ssmb-margin-left-size-tablet, var(--ssmb-margin-left-size));

            /* Hover State */
            &.is-hovered-state,
            &:hover {
                .ssmb-button-group-wrapper {
                    /* Border Styles */
                    border-width: var(--ssmb-border-top-width-hover-tablet, var(--ssmb-border-top-width-hover))
                                  var(--ssmb-border-right-width-hover-tablet, var(--ssmb-border-top-width-hover))
                                  var(--ssmb-border-bottom-width-hover-tablet, var(--ssmb-border-top-width-hover))
                                  var(--ssmb-border-left-width-hover-tablet, var(--ssmb-border-top-width-hover));
                }
            }
        }

        .ssmb-button-group-wrapper {
            /* Min Height */
            min-height: var(--ssmb-min-height-size-tablet, var(--ssmb-min-height-size));

            /* Max Width */
            max-width: var(--ssmb-max-width-size-tablet, var(--ssmb-max-width-size));

            /* Background */
            background-image: var(--ssmb-background-image-tablet, var(--ssmb-background-image));
            background-size: var(--ssmb-background-size-tablet, var(--ssmb-background-size, cover));

            /* Border */
            border-width: var(--ssmb-border-top-width-tablet, var(--ssmb-border-top-width))
                          var(--ssmb-border-right-width-tablet, var(--ssmb-border-top-width))
                          var(--ssmb-border-bottom-width-tablet, var(--ssmb-border-top-width))
                          var(--ssmb-border-left-width-tablet, var(--ssmb-border-top-width));
            border-radius: var(--ssmb-top-left-radius-tablet, var(--ssmb-top-left-radius))
                           var(--ssmb-top-right-radius-tablet, var(--ssmb-top-left-radius))
                           var(--ssmb-bottom-right-radius-tablet, var(--ssmb-top-left-radius))
                           var(--ssmb-bottom-left-radius-tablet, var(--ssmb-top-left-radius));

            /* Padding */
            padding: var(--ssmb-padding-top-size-tablet, var(--ssmb-padding-top-size))
                     var(--ssmb-padding-right-size-tablet, var(--ssmb-padding-right-size))
                     var(--ssmb-padding-bottom-size-tablet, var(--ssmb-padding-bottom-size))
                     var(--ssmb-padding-left-size-tablet, var(--ssmb-padding-left-size));

            /* Pseudo-element for overlay, like tint, when background image exists */
            &.ssmb-background-image::before,
            &.ssmb-background-gradient::before {
                border-radius: var(--ssmb-top-left-radius-tablet, var(--ssmb-top-left-radius))
                               var(--ssmb-top-right-radius-tablet, var(--ssmb-top-right-radius))
                               var(--ssmb-bottom-right-radius-tablet, var(--ssmb-bottom-right-radius))
                               var(--ssmb-bottom-left-radius-tablet, var(--ssmb-bottom-left-radius));
            }

            /* Before background for tint and opacity */
            .ssmb-overlay-background {
                border-radius: var(--ssmb-top-left-radius-tablet, var(--ssmb-top-left-radius))
                               var(--ssmb-top-right-radius-tablet, var(--ssmb-top-right-radius))
                               var(--ssmb-bottom-right-radius-tablet, var(--ssmb-bottom-right-radius))
                               var(--ssmb-bottom-left-radius-tablet, var(--ssmb-bottom-left-radius));
            }
        }

        .ssmb-block-editor-inner-blocks {
            /* Horizontal Alignment */
            &.ssmb-horizontal-align {
                .ssmb-button-list {
                    justify-content: var(--ssmb-horizontal-align-tablet, var(--ssmb-horizontal-align, flex-start));
                }
            }
        
            /* Vertical Alignment */
            // ssmb-vertical-align controls the vertical alignment of the container as a whole.
            // since both content and container use align-items for alignment, !important is used here to ensure the container alignment isn’t overridden by internal content alignment settings.
            &.ssmb-vertical-align {
                .ssmb-button-list {
                    align-items: var(--ssmb-vertical-align-tablet, var(--ssmb-vertical-align, flex-start)) !important;
                }
            }

            /* Content Vertical Alignment */
            &.ssmb-content-vertical-align {
                align-items: var(--ssmb-content-vertical-align-tablet, var(--ssmb-content-vertical-align, flex-start));

                .ssmb-button-list {
                    align-items: var(--ssmb-content-vertical-align-tablet, var(--ssmb-content-vertical-align, flex-start));
                }
            }
            
            .ssmb-button-list {    
                /* Row/Column Gap */    
                gap: var(--ssmb-row-gap-size-tablet, var(--ssmb-row-gap-size))
                     var(--ssmb-column-gap-size-tablet, var(--ssmb-column-gap-size));
            }
        }
    }
}

/* Responsive Control - Mobile */
@media (max-width: 768px) {
    .wp-block-smart-social-media-buttons-main {
        /* Block Wrapper */
        .ssmb-block-wrapper {
            /* Content Horizontal Alignment */
            &.ssmb-content-horizontal-align {
                display: flex;
                justify-content: var(--ssmb-content-horizontal-align-mobile, var(--ssmb-content-horizontal-align-tablet, var(--ssmb-content-horizontal-align, flex-start)));
            }

            /* Margin */
            margin: var(--ssmb-margin-top-size-mobile, var(--ssmb-margin-top-size-tablet, var(--ssmb-margin-top-size)))
                    var(--ssmb-margin-right-size-mobile, var(--ssmb-margin-right-size-tablet, var(--ssmb-margin-right-size)))
                    var(--ssmb-margin-bottom-size-mobile, var(--ssmb-margin-bottom-size-tablet, var(--ssmb-margin-bottom-size)))
                    var(--ssmb-margin-left-size-mobile, var(--ssmb-margin-left-size-tablet, var(--ssmb-margin-left-size)));

            /* Hover State */
            &.is-hovered-state,
            &:hover {
                .ssmb-button-group-wrapper {
                    /* Border Styles */
                    border-width: var(--ssmb-border-top-width-hover-mobile, var(--ssmb-border-top-width-hover-tablet, var(--ssmb-border-top-width-hover)))
                                  var(--ssmb-border-right-width-hover-mobile, var(--ssmb-border-right-width-hover-tablet, var(--ssmb-border-right-width-hover)))
                                  var(--ssmb-border-bottom-width-hover-mobile, var(--ssmb-border-bottom-width-hover-tablet, var(--ssmb-border-bottom-width-hover)))
                                  var(--ssmb-border-left-width-hover-mobile, var(--ssmb-border-left-width-hover-tablet, var(--ssmb-border-left-width-hover)));
                }
            }
        }

        .ssmb-button-group-wrapper {
            /* Min Height */
            min-height: var(--ssmb-min-height-size-mobile, var(--ssmb-min-height-size-tablet, var(--ssmb-min-height-size)));

            /* Max Width */
            max-width: var(--ssmb-max-width-size-mobile, var(--ssmb-max-width-size-tablet, var(--ssmb-max-width-size)));

            /* Background */
            background-image: var(--ssmb-background-image-mobile, var(--ssmb-background-image-tablet, var(--ssmb-background-image)));
            background-size: var(--ssmb-background-size-mobile, var(--ssmb-background-size, cover));

            /* Border */
            border-width: var(--ssmb-border-top-width-mobile, var(--ssmb-border-top-width-tablet, var(--ssmb-border-top-width)))
                          var(--ssmb-border-right-width-mobile, var(--ssmb-border-right-width-tablet, var(--ssmb-border-right-width)))
                          var(--ssmb-border-bottom-width-mobile, var(--ssmb-border-bottom-width-tablet, var(--ssmb-border-bottom-width)))
                          var(--ssmb-border-left-width-mobile, var(--ssmb-border-left-width-tablet, var(--ssmb-border-left-width)));
            border-radius: var(--ssmb-top-left-radius-mobile, var(--ssmb-top-left-radius-tablet, var(--ssmb-top-left-radius)))
                          var(--ssmb-top-right-radius-mobile, var(--ssmb-top-right-radius-tablet, var(--ssmb-top-right-radius)))
                          var(--ssmb-bottom-right-radius-mobile, var(--ssmb-bottom-right-radius-tablet, var(--ssmb-bottom-right-radius)))
                          var(--ssmb-bottom-left-radius-mobile, var(--ssmb-bottom-left-radius-tablet, var(--ssmb-bottom-left-radius)));

            /* Padding */
            padding: var(--ssmb-padding-top-size-mobile, var(--ssmb-padding-top-size-tablet, var(--ssmb-padding-top-size)))
                     var(--ssmb-padding-right-size-mobile, var(--ssmb-padding-right-size-tablet, var(--ssmb-padding-right-size)))
                     var(--ssmb-padding-bottom-size-mobile, var(--ssmb-padding-bottom-size-tablet, var(--ssmb-padding-bottom-size)))
                     var(--ssmb-padding-left-size-mobile, var(--ssmb-padding-left-size-tablet, var(--ssmb-padding-left-size)));

            /* Pseudo-element for overlay, like tint, when background image exists */
            &.ssmb-background-image::before,
            &.ssmb-background-gradient::before {
                border-radius: var(--ssmb-top-left-radius-mobile, var(--ssmb-top-left-radius-tablet, var(--ssmb-top-left-radius)))
                               var(--ssmb-top-right-radius-mobile, var(--ssmb-top-right-radius-tablet, var(--ssmb-top-right-radius)))
                               var(--ssmb-bottom-right-radius-mobile, var(--ssmb-bottom-right-radius-tablet, var(--ssmb-bottom-right-radius)))
                               var(--ssmb-bottom-left-radius-mobile, var(--ssmb-bottom-left-radius-tablet, var(--ssmb-bottom-left-radius)));
            }

            /* Before background for tint and opacity */
            .ssmb-overlay-background {
                border-radius: var(--ssmb-top-left-radius-mobile, var(--ssmb-top-left-radius-tablet, var(--ssmb-top-left-radius)))
                               var(--ssmb-top-right-radius-mobile, var(--ssmb-top-right-radius-tablet, var(--ssmb-top-right-radius)))
                               var(--ssmb-bottom-right-radius-mobile, var(--ssmb-bottom-right-radius-tablet, var(--ssmb-bottom-right-radius)))
                               var(--ssmb-bottom-left-radius-mobile, var(--ssmb-bottom-left-radius-tablet, var(--ssmb-bottom-left-radius)));
            }
        }

        .ssmb-block-editor-inner-blocks {
            /* Horizontal Alignment */
            &.ssmb-horizontal-align {
                .ssmb-button-list {
                    justify-content: var(--ssmb-horizontal-align-mobile, var(--ssmb-horizontal-align-tablet, var(--ssmb-horizontal-align, flex-start)));
                }
            }
        
            /* Vertical Alignment */
            // ssmb-vertical-align controls the vertical alignment of the container as a whole.
            // since both content and container use align-items for alignment, !important is used here to ensure the container alignment isn’t overridden by internal content alignment settings.
            &.ssmb-vertical-align {
                .ssmb-button-list {
                    align-items: var(--ssmb-vertical-align-mobile, var(--ssmb-vertical-align-tablet, var(--ssmb-vertical-align, flex-start))) !important;
                }
            }

            /* Content Vertical Alignment */
            &.ssmb-content-vertical-align {
                align-items: var(--ssmb-content-vertical-align-mobile, var(--ssmb-content-vertical-align-tablet, var(--ssmb-content-vertical-align, flex-start)));

                .ssmb-button-list {
                    align-items: var(--ssmb-content-vertical-align-mobile, var(--ssmb-content-vertical-align-tablet, var(--ssmb-content-vertical-align, flex-start)));
                }
            }

            .ssmb-button-list {    
                /* Row/Column Gap */    
                gap: var(--ssmb-row-gap-size-mobile, var(--ssmb-row-gap-size-tablet, var(--ssmb-row-gap-size)))
                     var(--ssmb-column-gap-size-mobile, var(--ssmb-column-gap-size-tablet, var(--ssmb-column-gap-size)));
            }
        }
    }
}