.wp-block-button {
    .wp-block-button__link {
        transition: all 0.25s;

        &:hover {
            background-color: white !important;
            color: var(--wp--preset--color--secondary) !important;
            border-color: white !important;
        }

        &.has-secondary-color {
            border-color: white !important;

            &:hover {
                background-color: var(--wp--preset--color--primary) !important;
                color: white !important;
                border-color: var(--wp--preset--color--primary) !important;
            }
        }
    }

    &.is-style-line {
        .wp-block-button__link {
            border-radius: unset;
            background-color: unset !important;
            padding: unset;
            border: 0;
            position: relative;
            transition: all 0.5s;
            padding: 0 20px 5px 0;

            &:before {
                content: "";
                width: calc(100% - 20px);
                height: 1px;
                background-color: currentColor;
                transition: all 0.5s;
                position: absolute;
                bottom: 0;
                left: -30px;
                opacity: 0;
                transition: all 0.5s;
            }

            &:after {
                content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11.773" height="8.983" viewBox="0 0 11.773 8.983"><defs><clipPath id="a"><rect width="11.773" height="8.983" fill="%236b83d0"/></clipPath></defs><g transform="translate(0 0)"><g transform="translate(0 0)" clip-path="url(%23a)"><path d="M6.891,8.82a.553.553,0,0,0,.782,0l3.938-3.938a.562.562,0,0,0,.07-.085c.008-.013.014-.026.021-.039a.514.514,0,0,0,.029-.056.508.508,0,0,0,.017-.054c0-.016.011-.032.015-.049a.556.556,0,0,0,0-.216c0-.017-.01-.033-.015-.049a.508.508,0,0,0-.017-.054.56.56,0,0,0-.029-.056c-.007-.013-.013-.027-.021-.039a.562.562,0,0,0-.07-.085L7.672.161a.553.553,0,0,0-.782.782l3,3H.553a.553.553,0,1,0,0,1.105H9.886l-3,3a.552.552,0,0,0,0,.782" transform="translate(0 0.001)" fill="%236b83d0"/></g></g></svg>');
                width: 12px;
                height: 9px;
                position: absolute;
                right: 0;
                top: 0;
                transition: all 0.5s;
            }

            &:hover {
                background-color: transparent !important;

                &:before {
                    left: 0;
                    opacity: 1;
                }
                &:after {
                    right: -5px;
                }
            }

            &.has-primary-color {
                &:hover {
                    background-color: transparent !important;
                    color: var(--wp--preset--color--primary) !important;
                }
            }
        }
    }

    &.is-style-outline {
        .wp-block-button__link {
            &.has-white-color {
                &:hover {
                    background-color: white;
                    color: var(--wp--preset--color--secondary) !important;
                }
            }
        }
    }
}

.has-white-background-color,
.has-light-grey-background-color,
.has-white-to-grey-medium-gradient-background {
    .wp-block-button {
        .wp-block-button__link {
            transition: all 0.25s;
    
            &:hover {
                background-color: var(--wp--preset--color--secondary) !important;
                color: white !important;
                border-color: var(--wp--preset--color--secondary) !important;
            }
    
            &.has-secondary-color {
                border-color: white !important;
    
                &:hover {
                    background-color: var(--wp--preset--color--primary) !important;
                    color: white !important;
                    border-color: var(--wp--preset--color--primary) !important;
                }
            }
        }
    }
}

@media screen and (max-width: 781px) {
    .wp-block-buttons {
        &.is-content-justification-right {
            justify-content: flex-start !important;
        }
    }
}