:root .wp-element-button[class] {
        background-color: var(--wp--custom--color--button--default--background);
        border: 1px solid var(--wp--custom--color--button--default--background);
        border-radius: var(--wp--custom--radius--xxxl);
        color: var(--wp--custom--color--button--default--text);
        font-size: var(--wp--custom--font--size--button--lg);
        font-weight: var(--wp--custom--font--weight--medium);
        line-height: 1.2;
        padding: 19px var(--wp--custom--spacing--48);
        -webkit-text-decoration: none;
        text-decoration: none;
        transition: opacity .25s ease-in-out
    }

    :root .wp-element-button[class]:focus,
    :root .wp-element-button[class]:hover {
        opacity: .75
    }

    :root .wp-element-button[class]:disabled {
        background-color: var(--wp--custom--color--button--disabled--background);
        border-color: var(--wp--custom--color--button--disabled--background);
        color: var(--wp--custom--color--button--disabled--text);
        cursor: not-allowed
    }

    :root .is-style-arrow-link .wp-element-button[class] {
        align-items: center;
        background: transparent;
        border: none;
        border-radius: 0;
        color: var(--wp--custom--color--text--primary);
        display: inline-flex;
        font-size: var(--wp--custom--font--size--button--sm);
        font-weight: 400;
        gap: 8px;
        padding: 0
    }

    :root .is-style-arrow-link .wp-element-button[class]:before {
        background-color: var(--wp--custom--color--surface--brand);
        content: "";
        display: block;
        flex-shrink: 0;
        height: 32px;
        -webkit-mask-image: var(--sf-img-0);
        mask-image: var(--sf-img-0);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
        width: 32px
    }

    :root .is-style-arrow-link .wp-element-button[class]:focus,
    :root .is-style-arrow-link .wp-element-button[class]:hover {
        background: transparent;
        border: none;
        color: var(--wp--custom--color--text--brand)
    }

    :root .is-style-arrow-link .wp-element-button[class]:disabled {
        background: transparent;
        border: none;
        color: var(--wp--custom--color--button--disabled--text)
    }

    :root .is-style-arrow-link .wp-element-button[class]:disabled:before,
    :root .is-style-arrow-link .wp-element-button[class][aria-disabled=true]:before {
        background-color: var(--wp--custom--color--button--disabled--text)
    }

    :root .is-style-button-secondary .wp-element-button[class] {
        border-color: var(--wp--custom--color--button--secondary--default--border)
    }

    :root .is-style-button-secondary .wp-element-button[class]:focus,
    :root .is-style-button-secondary .wp-element-button[class]:hover {
        border-color: var(--wp--custom--color--button--secondary--hover--border, var(--wp--custom--color--button--hover--background))
    }

    :root .is-style-button-secondary .wp-element-button[class]:disabled {
        border-color: var(--wp--custom--color--button--secondary--disabled--border, var(--wp--custom--color--button--disabled--background))
    }

    :root .is-style-simple .wp-element-button[class]:hover {
        -webkit-text-decoration: none;
        text-decoration: none
    }

    :root .is-style-simple.has-icon .wp-element-button[class]:before {
        content: none
    }

    :root .is-style-simple.has-icon .wp-element-button[class]:after {
        background-color: var(--wp--custom--color--primary--dark-green-1);
        display: block;
        flex-shrink: 0;
        height: 24px;
        -webkit-mask-image: var(--sf-img-1);
        mask-image: var(--sf-img-1);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-text-decoration: none;
        text-decoration: none;
        width: 24px
    }

    :root .is-style-simple.is-size-sm.has-icon .wp-element-button[class]:after {
        height: 16px;
        width: 16px
    }

    :root .has-icon .wp-element-button[class]:after {
        background-color: var(--wp--custom--color--primary--white);
        border-radius: 50%;
        content: "";
        display: block;
        flex-shrink: 0;
        height: 36px;
        width: 36px
    }

    :root .has-icon .wp-element-button[class]:before {
        background-color: var(--wp--custom--color--primary--dark-green-1);
        content: "";
        display: block;
        height: 18px;
        inset-inline-end: 15px;
        -webkit-mask-image: var(--sf-img-2);
        mask-image: var(--sf-img-2);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
        pointer-events: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        z-index: 1
    }

    [dir=rtl]:root .has-icon .wp-element-button[class]:before {
        transform: translateY(-50%) scaleX(-1)
    }

    :root .is-style-button-secondary.has-icon .wp-element-button[class]:after {
        background-color: var(--wp--custom--color--surface--brand)
    }

    :root .is-style-button-secondary.has-icon .wp-element-button[class]:before {
        background-color: currentcolor
    }

    :root .is-size-sm.has-icon .wp-element-button[class]:after {
        height: 32px;
        width: 32px
    }

    :root .is-size-sm.has-icon .wp-element-button[class]:before {
        height: 16px;
        inset-inline-end: 12px;
        width: 16px
    }