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

.wp-block-ssmb-icon-button {
    display: flex;
    font-size: 24px;
    text-align: center;
    height: fit-content;
    position: relative;

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

    /* Min Height */
    min-height: var(--ssmb-block-button-min-height-size, 44px);

    /* Content Vertical Alignment */
    &.ssmb-block-button-vertical-align {
        align-items: var(--ssmb-block-button-content-vertical-align, flex-start);
    }    
    
    /* Content Horizontal Alignment */
    &.ssmb-block-button-horizontal-align {
        justify-content: var(--ssmb-block-button-content-horizontal-align, flex-start);
    }

    /* Max Width */
    width: var(--ssmb-block-button-width-size, 44px);

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

    /* Margin */
    &.ssmb-block-button-margin {
        margin: var(--ssmb-block-button-margin-top-size, 0)
                var(--ssmb-block-button-margin-right-size, 0)
                var(--ssmb-block-button-margin-bottom-size, 0)
                var(--ssmb-block-button-margin-left-size, 0);
    }

    &.ssmb-block-button-border-none {
        border-style: none;
    }

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

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

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

    /* Border Styles */
    border-width: var(--ssmb-block-button-border-top-width, 1px)
                  var(--ssmb-block-button-border-right-width, 1px)
                  var(--ssmb-block-button-border-bottom-width, 1px)
                  var(--ssmb-block-button-border-left-width, 1px);
    border-color: var(--ssmb-block-button-border-color, transparent);
    border-radius: var(--ssmb-top-left-block-button-radius)
                   var(--ssmb-top-right-block-button-radius)
                   var(--ssmb-bottom-right-block-button-radius)
                   var(--ssmb-bottom-left-block-button-radius);

    /* Box Shadow */
    box-shadow: var(--ssmb-block-button-box-shadow);

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

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

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

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

    /* Hover State */
    &.is-hovered-state,
    &:hover {
        /* Background color */
        background-color: var(--ssmb-block-button-background-color-hover, var(--ssmb-block-button-background-color));

        /* Pseudo-element for overlay, like tint, when background image exists */
        .ssmb-block-button-background-image::before,
        .ssmb-block-button-background-gradient::before {
            background-color: rgba(0 0 0 / var(--ssmb-block-button-background-tint));
        }

        /* Before background for tint and opacity */
        .ssmb-button-overlay-background {
            background-color: var(--ssmb-block-overlay-background-color-hover, transparent);
        }

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

        /* Box Shadow */
        box-shadow: var(--ssmb-block-button-box-shadow-hover,var(--ssmb-block-button-box-shadow));
    }

    /* Icon Wrapper */
    .ssmb-icon-button-wrapper {
        z-index: 1;

        /* Styles for Icon Button */
        .ssmb-icon-button {
            border: none;

            /* Icon Button */
            .ssmb-inner-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: var(--ssmb-button-background-color, transparent);
                background-image: var(--ssmb-button-background-gradient, none);

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

                /* Width */
                min-width: var(--ssmb-button-width-size);

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

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

                /* Box Shadow */
                box-shadow: var(--ssmb-button-box-shadow);

                /* Icon Radius */
                border-radius: var(--ssmb-top-left-button-radius)
                               var(--ssmb-top-right-button-radius)
                               var(--ssmb-bottom-right-button-radius)
                               var(--ssmb-bottom-left-button-radius);

                /* nesting and !important enforce custom color styles for the icon in .uploaded.has-custom-color buttons,
                overriding inline styles to ensure consistent icon coloring as defined by --ssmb-button-icon-color. */
                &.uploaded {
                    &.has-custom-color {
                        svg {
                            &:last-child {
                                fill: var(--ssmb-button-icon-color, transparent) !important;
        
                                :is(g, path, rect, polygon, ellipse) {
                                    fill: var(--ssmb-button-icon-color, transparent) !important;
                                }
                            }
                        }
                    }
                }
                
                &:not(.uploaded) {
                    svg {
                        &:last-child {
                            fill: var(--ssmb-button-icon-color, transparent) !important;

                            :is(g, path, rect, polygon, ellipse) {
                                fill: var(--ssmb-button-icon-color, transparent) !important;
                            }
                        }
                    }
                }
                
                svg {
                    &:last-child {
                        width: var(--ssmb-button-icon-size);
                        height: var(--ssmb-button-icon-size);
                        transform: rotate(var(--ssmb-button-icon-rotation, 0deg));
                    }
                }
            }
            
            &.ssmb-button-border-none {
                .ssmb-inner-icon {
                    border-style: none;
                }
            }
            
            &.ssmb-button-border-solid {
                .ssmb-inner-icon {
                    border-style: solid;
                }
            }
            
            &.ssmb-button-border-dashed {
                .ssmb-inner-icon {
                    border-style: dashed;
                }
            }
            
            &.ssmb-button-border-dotted {
                .ssmb-inner-icon {
                    border-style: dotted;
                }
            }

            /* Icon Position */
            &.ssmb-button-icon-position-left {
                svg {
                    &:last-child {
                        margin-inline-end: var(--ssmb-button-icon-gap);
                    }
                }
            }

            &.ssmb-button-icon-position-right {
                svg {
                    &:last-child {
                        margin-inline-start: var(--ssmb-button-icon-gap);
                    }
                }
            }

            // Hover Effect
            &.ssmb-button-effect-hover-scale {
                transition: transform 0.3s ease;

                &.is-hovered-state,
                &:hover {
                    transform: scale(1.05);
                }
            }
            
            &.ssmb-button-effect-hover-lift {
                transition: transform 0.3s ease;

                &.is-hovered-state,
                &:hover {
                    transform: translateY(-5px);
                }
            }
            
            &.ssmb-button-effect-hover-darken {
                transition: filter 0.3s ease;

                &.is-hovered-state,
                &:hover {
                    filter: brightness(.9) contrast(1.25);
                }
            }

            &.ssmb-button-effect-hover-lift-scale {
                transition: transform 0.3s ease;

                &.is-hovered-state,
                &:hover {
                    transform: scale(1.05) translateY(-5px);
                }
            }
            
            &.ssmb-button-effect-hover-blink {
                &.is-hovered-state,
                &:hover {
                    svg {
                        animation: scale-up 0.5s ease-in-out;
                    }
                }
            }

            &.ssmb-button-effect-hover-rotate {
                transition: transform 0.3s ease-in-out;

                &.is-hovered-state,
                &:hover {
                    transform: rotate(10deg);
                }
            }

            &.ssmb-button-effect-hover-skew {
                transition: transform 0.3s ease-in-out;

                &.is-hovered-state,
                &:hover {
                    transform: skew(10deg, 5deg);
                }
            }

            &.ssmb-button-effect-hover-flip {
                transition: transform 0.3s ease-in-out;

                &.is-hovered-state,
                &:hover {
                    transform: rotateY(180deg);
                }
            }

            &.ssmb-button-effect-hover-blur {
                transition: filter 0.3s ease-in-out;

                &.is-hovered-state,
                &:hover {
                    filter: blur(2px);
                }
            }

            &.is-hovered-state,
            &:hover {
                /* Icon Button */
                .ssmb-inner-icon {
                    /* Background */
                    background-color: var(--ssmb-button-background-color-hover, var(--ssmb-button-background-color));

                    /* Border Styles */
                    border-color: var(--ssmb-button-border-color-hover, var(--ssmb-button-border-color));
                    border-width: var(--ssmb-button-border-top-width-hover, var(--ssmb-button-border-top-width))
                                  var(--ssmb-button-border-right-width-hover, var(--ssmb-button-border-right-width))
                                  var(--ssmb-button-border-bottom-width-hover, var(--ssmb-button-border-bottom-width))
                                  var(--ssmb-button-border-left-width-hover, var(--ssmb-button-border-left-width));
    
                    /* Box Shadow */
                    box-shadow: var(--ssmb-button-box-shadow-hover, var(--ssmb-button-box-shadow));

                    /* nesting and !important enforce custom color styles for the icon in .uploaded.has-custom-color buttons,
                    overriding inline styles to ensure consistent icon coloring as defined by --ssmb-button-icon-color. */
                    &.uploaded {
                        &.has-hover-color {
                            svg {
                                &:last-child {
                                    fill: var(--ssmb-button-icon-color-hover, var(--ssmb-button-icon-color)) !important;
                                    
                                    :is(g, path, rect, polygon, ellipse) {
                                        fill: var(--ssmb-button-icon-color-hover, var(--ssmb-button-icon-color)) !important;
                                    }
                                }
                            }
                        }
                    }
    
                    &:not(.uploaded) {
                        svg {
                            &:last-child {
                                fill: var(--ssmb-button-icon-color-hover, var(--ssmb-button-icon-color)) !important;
        
                                :is(g, path, rect, polygon, ellipse) {
                                    fill: var(--ssmb-button-icon-color-hover, var(--ssmb-button-icon-color)) !important;
                                }
                            }
                        }

                        &.has-hover-color {
                            svg {
                                &:last-child {
                                    fill: var(--ssmb-button-icon-color-hover, var(--ssmb-button-icon-color)) !important;
                                    
                                    :is(g, path, rect, polygon, ellipse) {
                                        fill: var(--ssmb-button-icon-color-hover, var(--ssmb-button-icon-color)) !important;
                                    }
                                }
                            }
                        }
                    }

                    svg {
                        &:last-child {
                            transform: rotate(var(--ssmb-button-icon-rotation-hover, var(--ssmb-button-icon-rotation)));
                        }
                    }
                }
            }
        }
    }
}

/* Hover Effect for Icons */
@keyframes scale-up {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.2);
    }

    100% {
      transform: scale(1);
    }
  }

/* Responsive Control - Tablet */
@media (max-width: 1024px) {
    .wp-block-ssmb-icon-button {
        margin: 0;

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

        /* Min Height */
        min-height: var(--ssmb-block-button-min-height-size-tablet, var(--ssmb-block-button-min-height-size));
        
        /* Max Width */
        width: var(--ssmb-block-button-width-size-tablet, var(--ssmb-block-button-width-size));

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

        /* Content Horizontal Alignment */
        &.ssmb-block-button-horizontal-align {
            justify-content: var(--ssmb-block-button-content-horizontal-align-tablet, var(--ssmb-block-button-content-horizontal-align));
        } 

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

        /* Margin */
        &.ssmb-block-button-margin {
            margin: var(--ssmb-block-button-margin-top-size-tablet, var(--ssmb-block-button-margin-top-size))
                        var(--ssmb-block-button-margin-right-size-tablet, var(--ssmb-block-button-margin-right-size))
                        var(--ssmb-block-button-margin-bottom-size-tablet, var(--ssmb-block-button-margin-bottom-size))
                        var(--ssmb-block-button-margin-left-size-tablet, var(--ssmb-block-button-margin-left-size));
        }

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

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

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

        /* Icon Wrapper */
        .ssmb-icon-button-wrapper {
            .ssmb-icon-button {
                /* Icon Position */
                &.ssmb-button-icon-position-left {
                    svg {
                        &:last-child {
                            margin-inline-end: var(--ssmb-button-icon-gap-tablet, var(--ssmb-button-icon-gap));
                        }
                    }
                }

                &.ssmb-button-icon-position-right {
                    svg {
                        &:last-child {
                            margin-inline-start: var(--ssmb-button-icon-gap-tablet, var(--ssmb-button-icon-gap));
                        }
                    }
                }

                /* Icon Button */
                .ssmb-inner-icon {
                    /* Min Height */
                    min-height: var(--ssmb-button-min-height-size-tablet, var(--ssmb-button-min-height-size));
    
                    /* Width */
                    min-width: var(--ssmb-button-width-size-tablet, var(--ssmb-button-width-size));
    
                    /* Padding */
                    padding: var(--ssmb-button-padding-top-size-tablet, var(--ssmb-button-padding-top-size))
                                 var(--ssmb-button-padding-right-size-tablet, var(--ssmb-button-padding-right-size))
                                 var(--ssmb-button-padding-bottom-size-tablet, var(--ssmb-button-padding-bottom-size))
                                 var(--ssmb-button-padding-left-size-tablet, var(--ssmb-button-padding-left-size));
                    border-width: var(--ssmb-button-border-top-width-tablet, var(--ssmb-button-border-top-width))
                                  var(--ssmb-button-border-right-width-tablet, var(--ssmb-button-border-right-width))
                                  var(--ssmb-button-border-bottom-width-tablet, var(--ssmb-button-border-bottom-width))
                                  var(--ssmb-button-border-left-width-tablet, var(--ssmb-button-border-left-width));

                    /* Icon Radius */
                    border-radius: var(--ssmb-top-left-button-radius-tablet, var(--ssmb-top-left-button-radius))
                                   var(--ssmb-top-right-button-radius-tablet, var(--ssmb-top-right-button-radius))
                                   var(--ssmb-bottom-right-button-radius-tablet, var(--ssmb-bottom-right-button-radius))
                                   var(--ssmb-bottom-left-button-radius-tablet, var(--ssmb-bottom-left-button-radius));

                    svg {
                        &:last-child {
                            width: var(--ssmb-button-icon-size-tablet, var(--ssmb-button-icon-size));
                            height: var(--ssmb-button-icon-size-tablet, var(--ssmb-button-icon-size));
                            transform: rotate(var(--ssmb-button-icon-rotation-tablet, (var(--ssmb-button-icon-rotation))));
                        }
                    }
                }


                &.is-hovered-state,
                &:hover {
                    /* Icon Button */
                    .ssmb-inner-icon {
                        border-width: var(--ssmb-button-border-top-width-hover-tablet, var(--ssmb-button-border-top-width))
                                      var(--ssmb-button-border-right-width-hover-tablet, var(--ssmb-button-border-right-width))
                                      var(--ssmb-button-border-bottom-width-hover-tablet, var(--ssmb-button-border-bottom-width))
                                      var(--ssmb-button-border-left-width-hover-tablet, var(--ssmb-button-border-left-width));
                    }
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .wp-block-ssmb-icon-button {
        margin: 0;

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

        /* Min Height */
        min-height: var(--ssmb-block-button-min-height-size-mobile, var(--ssmb-block-button-min-height-size-tablet, var(--ssmb-block-button-min-height-size)));
        
        /* Max Width */
        width: var(--ssmb-block-button-width-size-mobile, var(--ssmb-block-button-width-size-tablet, var(--ssmb-block-button-width-size)));

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

        /* Content Horizontal Alignment */
        &.ssmb-block-button-horizontal-align {
            justify-content: var(--ssmb-block-button-content-horizontal-align-mobile, var(--ssmb-block-button-content-horizontal-align-tablet, var(--ssmb-block-button-content-horizontal-align)));
        }

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

        /* Margin */
        &.ssmb-block-button-margin {
            margin: var(--ssmb-block-button-margin-top-size-mobile, var(--ssmb-block-button-margin-top-size-tablet, var(--ssmb-block-button-margin-top-size)))
                        var(--ssmb-block-button-margin-right-size-mobile, var(--ssmb-block-button-margin-right-size-tablet, var(--ssmb-block-button-margin-right-size)))
                        var(--ssmb-block-button-margin-bottom-size-mobile, var(--ssmb-block-button-margin-bottom-size-tablet, var(--ssmb-block-button-margin-bottom-size)))
                        var(--ssmb-block-button-margin-left-size-mobile, var(--ssmb-block-button-margin-left-size-tablet, var(--ssmb-block-button-margin-left-size)));
        }

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

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

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

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

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

        /* Icon Wrapper */
        .ssmb-icon-button-wrapper {
            .ssmb-icon-button {
                /* Icon Position */
                &.ssmb-button-icon-position-left {
                    svg {
                        &:last-child {
                            margin-inline-end: var(--ssmb-button-icon-gap-mobile, var(--ssmb-button-icon-gap-tablet, var(--ssmb-button-icon-gap)));
                        }
                    }
                }

                &.ssmb-button-icon-position-right {
                    svg {
                        &:last-child {
                            margin-inline-start: var(--ssmb-button-icon-gap-mobile, var(--ssmb-button-icon-gap-tablet, var(--ssmb-button-icon-gap)));
                        }
                    }
                }
                
                /* Icon Button */
                .ssmb-inner-icon {
                    /* Min Height */
                    min-height: var(--ssmb-button-min-height-size-mobile, var(--ssmb-button-min-height-size-tablet, var(--ssmb-button-min-height-size)));

                    /* Width */
                    min-width: var(--ssmb-button-width-size-mobile, var(--ssmb-button-width-size-tablet, var(--ssmb-button-width-size)));

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

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

                    /* Border Radius */
                    border-radius: var(--ssmb-top-left-button-radius-mobile, var(--ssmb-top-left-button-radius-tablet, var(--ssmb-top-left-button-radius)))
                                   var(--ssmb-top-right-button-radius-mobile, var(--ssmb-top-right-button-radius-tablet, var(--ssmb-top-right-button-radius)))
                                   var(--ssmb-bottom-right-button-radius-mobile, var(--ssmb-bottom-right-button-radius-tablet, var(--ssmb-bottom-right-button-radius)))
                                   var(--ssmb-bottom-left-button-radius-mobile, var(--ssmb-bottom-left-button-radius-tablet, var(--ssmb-bottom-left-button-radius)));
                    
                    svg {
                        &:last-child {
                            width: var(--ssmb-button-icon-size-mobile, var(--ssmb-button-icon-size-tablet, var(--ssmb-button-icon-size)));
                            height: var(--ssmb-button-icon-size-mobile, var(--ssmb-button-icon-size-tablet, var(--ssmb-button-icon-size)));
                        }
                    }
                }

                &.is-hovered-state,
                &:hover {
                    /* Icon Button */
                    .ssmb-inner-icon {
                        border-width: var(--ssmb-button-border-top-width-hover-mobile, var(--ssmb-button-border-top-width-hover-tablet, var(--ssmb-button-border-top-width-hover)))
                                      var(--ssmb-button-border-right-width-hover-mobile, var(--ssmb-button-border-right-width-hover-tablet, var(--ssmb-button-border-right-width-hover)))
                                      var(--ssmb-button-border-bottom-width-hover-mobile, var(--ssmb-button-border-bottom-width-hover-tablet, var(--ssmb-button-border-bottom-width-hover)))
                                      var(--ssmb-button-border-left-width-hover-mobile, var(--ssmb-button-border-left-width-hover-tablet, var(--ssmb-button-border-left-width-hover)));
                    }
                }
            }
        }
    }
}