.lienzo-button, .button-modal {
    display: flex;

    & a, & button{
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        overflow: hidden;
        position: relative;
        text-decoration: none !important;
        transition: all 0.6s ease;
        font-weight: 500;
        outline: 0;
        padding: 10px;
        padding-right: 25px;
        border-radius: 50px;
        color: var(--wp--preset--color--text-primary) !important;
        border: 1px solid var(--wp--preset--color--secondary);
        background: var(--wp--preset--color--primary);
        font-size: var(--wp--preset--font-size--normal);

        &:hover{
            background: var(--wp--preset--color--secondary);
        }
        
        & svg{
            border-radius: 50%;
            width: 45px;
            height: 45px;
            display: grid;
            transition: all 0.6s ease;
            justify-content: center;
            align-content: center;
            background: var(--wp--preset--color--primary);
            padding: 10px;
            color: var(--wp--preset--color--secondary);
            border:1px solid var(--wp--preset--color--secondary);
            stroke: var(--wp--preset--color--secondary);
        }

    }
}

.is-style-buttons-outstanding {
    a, button{
        color: var(--wp--preset--color--text-primary) !important;
        border: 1px solid var(--wp--preset--color--tertiary);
        box-shadow: 0 0 15px 0 var(--wp--preset--color--tertiary);
        background: var(--wp--preset--color--primary);

        & svg{
            color: var(--wp--preset--color--tertiary);
            border:1px solid var(--wp--preset--color--tertiary);
            stroke: var(--wp--preset--color--tertiary);
        }

        &:hover{
            background: var(--wp--preset--color--tertiary);
        }
    }
}

.is-style-buttons-outstanding-purple {
    a, button{
        color: var(--wp--preset--color--text-primary) !important;
        border: 1px solid var(--wp--preset--color--septenary);
        box-shadow: 0 0 15px 0 var(--wp--preset--color--septenary);
        background: var(--wp--preset--color--primary);

        & svg{
            color: var(--wp--preset--color--septenary);
            border:1px solid var(--wp--preset--color--septenary);
            stroke: var(--wp--preset--color--septenary);
        }

        &:hover{
            background: var(--wp--preset--color--septenary);
        }
    }
}

.is-style-buttons-outstanding-purple-filling {
    a, button{
        color: var(--wp--preset--color--text-primary) !important;
        border: 1px solid var(--wp--preset--color--septenary);
        box-shadow: 0 0 15px 0 var(--wp--preset--color--septenary);
        background: var(--wp--preset--color--septenary);

        & svg{
            color: var(--wp--preset--color--septenary);
            border:1px solid var(--wp--preset--color--septenary);
            stroke: var(--wp--preset--color--septenary);
        }

        &:hover{
            background: var(--wp--preset--color--septenary);
            border: 1px solid var(--wp--preset--color--text-primary);
        }
    }
}

.lienzo-button.alignwide,
.button-modal.alignwide{
    display: block;
    max-width: var(--wp--style--global--wide-size);
    
    & a{ justify-content: center; }
}

.lienzo-button.alignfull,
.button-modal.alignfull{
    display: inline;
    width: none;

    & a{ justify-content: center; }
}

.lienzo-button.aligncenter,
.button-modal.aligncenter{
    justify-content: center;
}

.lienzo-button.alignright,
.button-modal.alignright{
    justify-content: right;
}

.lienzo-button.alignleft,
.button-modal.alignleft{
    justify-content: left;
}

.editor-styles-wrapper .lienzo-button {
    pointer-events: none;
}