lightspeeddevelopment/lsx

@mixin lsx-button-scaffolding {
    &,
    &:active,
    &:visited {
        border: 0 none;
        border-radius: 3px;
        display: inline-block;
        font-size: 14px;
        font-weight: 700;
        height: 48px;
        left: 0;
        letter-spacing: 0.6px;
        line-height: 1.25;
        padding: 15px;
        position: relative;
        text-transform: uppercase;
        top: 0;
        transition: all 100ms ease;
    }

    & > .fa {
        margin-left: 10px;
    }
}
.button-holder {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    margin: 0;
    padding: 0;
}

@mixin lsx-bordered-button(
    $color: map-get($buttons, bg),
    $color-hover: map-get($buttons, color),
    $bg: transparent,
    $bg-hover: map-get($buttons, bg)
) {
    @include lsx-button-colour($color, $color-hover, $bg, $bg-hover);

    &,
    &:active,
    &:visited {
        border: 2px solid $color;
        box-shadow: none;
        height: 50px;
    }

    &:active {
        left: 0;
        top: 0;
    }

    transition: all 300ms ease;
}

@mixin custom-buttons-colours(
    $color: map-get($buttons, color),
    $color-hover: map-get($buttons, color-hover),
    $bg: map-get($buttons, bg),
    $bg-hover: map-get($buttons, bg-hover),
    $shadow: map-get($buttons, shadow)
) {
    .btn {
        @include lsx-button-colour(
            $color,
            $color-hover,
            $bg,
            $bg-hover,
            $shadow
        );
    }

    a.wp-block-button__link {
        @include lsx-button-colour(
            $color,
            $color-hover,
            $bg,
            $bg-hover,
            $shadow
        );
    }
    .button-3d-true {
        a.wp-block-button__link {
            @include lsx-button-colour(
                $color,
                $color-hover,
                $bg,
                $bg-hover,
                $shadow
            );
        }
        .wp-block-buttons & {
            &.wp-block.block-editor-block-list__block {
                @include lsx-button-colour(
                    $color,
                    $color-hover,
                    $bg,
                    $bg-hover,
                    $shadow
                );
            }
        }
    }

    #respond {
        & > .comment-form {
            input[type="submit"] {
                @include lsx-button-colour(
                    $color,
                    $color-hover,
                    $bg,
                    $bg-hover,
                    $shadow
                );
            }
        }
    }

    .border-btn {
        @include lsx-bordered-button($bg, #fff, transparent, $bg);
    }

    .white-border-btn {
        @include lsx-bordered-button(#fff, $bg, transparent, #fff);
    }

    #top-menu {
        .top-menu {
            & > .menu {
                & > .menu-item {
                    &.cta {
                        & > a {
                            @include lsx-button-colour(
                                $color,
                                $color-hover,
                                $bg,
                                $bg-hover,
                                $shadow
                            );
                        }
                    }

                    &.cta-red {
                        & > a {
                            @include lsx-button-colour(
                                #ffffff,
                                #ffffff,
                                #d93a3a,
                                #9f2020,
                                #9f2020
                            );
                        }
                    }
                }
            }
        }
    }

    #footer-cta {
        input[type="submit"] {
            @include lsx-button-colour(
                $color,
                $color-hover,
                $bg,
                $bg-hover,
                $shadow
            );
        }
    }

    // WooCommerce

    #wc_am_lost_api_key_form {
        input[type="submit"] {
            @include lsx-button-colour(
                $color,
                $color-hover,
                $bg,
                $bg-hover,
                $shadow
            );
        }
    }

    .lsx-wc-cart-menu-item {
        .widget_shopping_cart {
            .buttons {
                .button {
                    @include lsx-button-colour(
                        $color,
                        $color-hover,
                        $bg,
                        $bg-hover,
                        $shadow
                    );
                }
            }
        }
    }

    .woocommerce-page #main {
        #respond input#submit,
        a.button:not(.quick-view-button),
        button.button,
        input.button {
            @include lsx-button-colour(
                $color,
                $color-hover,
                $bg,
                $bg-hover,
                $shadow
            );
            min-height: 40px;
            height: 100% !important;
        }
        .woocommerce {
            .woocommerce-cart-form {
                .shop_table {
                    .button {
                        &[name="update_cart"] {
                            background-color: nth($green, 1);
                            box-shadow: 2px 2px 0 0 nth($green, 2);
                            &:hover {
                                background-color: nth($green, 2);
                            }
                        }
                    }
                }
            }
            .cart_totals {
                .wc-proceed-to-checkout {
                    .checkout-button {
                        background-color: nth($orange, 1);
                        box-shadow: 2px 2px 0 0 nth($orange, 2);
                        &:hover {
                            background-color: nth($orange, 2);
                        }
                    }
                }
            }
        }
    }

    // Sensei

    .course-container,
    .course,
    .lesson,
    .quiz {
        a.button,
        a.comment-reply-link,
        #commentform #submit,
        .submit,
        input[type="submit"],
        input.button,
        button.button {
            &:not(.btn) {
                @include lsx-button-colour(
                    $color,
                    $color-hover,
                    $bg,
                    $bg-hover,
                    $shadow
                );
            }
        }
    }

    .quiz {
        input[type="submit"] {
            &.complete:not(.btn) {
                @include lsx-button-colour(
                    $color,
                    $color-hover,
                    #63a95f,
                    #4e8b4a,
                    #457a42
                );
            }

            &.reset:not(.btn) {
                @include lsx-button-colour(
                    $color,
                    $color-hover,
                    #ed6c6e,
                    #e73f41,
                    #e5282b
                );
            }
        }
    }
}

@mixin custom-buttons-colours-admin(
    $color: map-get($buttons, color),
    $bg: map-get($buttons, bg)
) {
    .wp-block-button:not(.is-style-outline) {
        div.wp-block-button__link {
            background-color: $bg;
        }
    }
}

@mixin custom-cta-buttons-colours(
    $color: map-get($cta-buttons, color),
    $color-hover: map-get($cta-buttons, color-hover),
    $bg: map-get($cta-buttons, bg),
    $bg-hover: map-get($cta-buttons, bg-hover),
    $shadow: map-get($cta-buttons, shadow)
) {
    .cta-btn {
        @include lsx-button-colour(
            $color,
            $color-hover,
            $bg,
            $bg-hover,
            $shadow
        );
    }

    .cta-border-btn {
        @include lsx-bordered-button($bg, #fff, transparent, $bg);
    }

    // Caldera Form

    .caldera-forms-modal {
        @include lsx-button-colour(
            $color,
            $color-hover,
            $bg,
            $bg-hover,
            $shadow
        );
    }

    // WooCommerce

    .lsx-wc-cart-menu-item {
        .widget_shopping_cart {
            .buttons {
                .button.checkout {
                    @include lsx-button-colour(
                        $color,
                        $color-hover,
                        $bg,
                        $bg-hover,
                        $shadow
                    );
                }
            }
        }
    }
}

@mixin custom-secondary-buttons-colours(
    $color: map-get($secondary-buttons, color),
    $color-hover: map-get($secondary-buttons, color-hover),
    $bg: map-get($secondary-buttons, bg),
    $bg-hover: map-get($secondary-buttons, bg-hover),
    $shadow: map-get($secondary-buttons, shadow)
) {
    .secondary-btn {
        @include lsx-button-colour(
            $color,
            $color-hover,
            $bg,
            $bg-hover,
            $shadow
        );
    }

    .secondary-border-btn {
        @include lsx-bordered-button($bg, #fff, transparent, $bg);
    }
}

@mixin custom-tertiary-buttons-colours(
    $color: map-get($tertiary-buttons, color),
    $color-hover: map-get($tertiary-buttons, color-hover),
    $bg: map-get($tertiary-buttons, bg),
    $bg-hover: map-get($tertiary-buttons, bg-hover),
    $shadow: map-get($tertiary-buttons, shadow)
) {
    .tertiary-btn {
        @include lsx-button-colour(
            $color,
            $color-hover,
            $bg,
            $bg-hover,
            $shadow
        );
    }

    .tertiary-border-btn {
        @include lsx-bordered-button($bg, #fff, transparent, $bg);
    }
}