a { color: var(--clr-text); }

.btn, .gform_button, .gform_next_button, .gform_previous_button, .button { 
    --fs: 1.5rem; 
    --lh: 1; 
    --p: 0 1.8rem; 
    --br: 6.4rem; 
    --gap: 1rem;

    --clr: #fff; --bg-clr: var(--clr-primary); --border: 1px solid var(--clr-primary); --box-shadow: none; 
    --hover-clr: var(--clr); --hover-bg-clr: var(--clr-primary-130); --hover-border: var(--border); --hover-box-shadow: var(--box-shadow); 
    --focus-clr: var(--hover-clr); --focus-bg-clr: var(--hover-bg-clr); --focus-border: var(--hover-border); --focus-box-shadow: var(--hover-box-shadow); 
    --active-clr: var(--focus-clr); --active-bg-clr: var(--focus-bg-clr); --active-border: var(--focus-border); --active-box-shadow: var(--focus-box-shadow); 

    font-family: 'Poppins', sans-serif; font-weight: 600; min-height: 4.6rem; display: inline-flex; justify-content: center; align-items: center; min-height: 4.6rem; gap: var(--gap); font-size: var(--fs); line-height: var(--lh); padding: var(--p); color: var(--clr); background-color: var(--bg-clr); border-radius: var(--br); border: var(--border); box-shadow: var(--box-shadow); text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; 
    transition-duration: var(--ts-35); transition-timing-function: var(--cb--smooth); 
    -webkit-transition-property: color, background-color, border-color, -webkit-box-shadow; 
    transition-property: color, background-color, border-color, box-shadow, -webkit-box-shadow;

    span { font: inherit; color: inherit; }
    .wpb-icon { --clr: inherit; transition-duration: var(--ts-35); transition-timing-function: var(--cb--smooth); }
    .btn__icon { --size: 2.4rem; min-width: var(--size); width: var(--size); height: var(--size); border-radius: 50%; background-color: var(--clr); color: var(--bg-clr); display: inline-grid; place-items: center; overflow: hidden; transition-property: background, background-color, color; transition-duration: var(--ts-35); transition-timing-function: var(--cb--smooth); 
        i { font-size: .6em; line-height: 0; transition: color var(--ts-35) var(--cb--smooth); }
    }

    &:hover { color: var(--hover-clr)!important; background-color: var(--hover-bg-clr)!important; border: var(--hover-border)!important; box-shadow: var(--hover-box-shadow)!important;
        .wpb-icon { --clr: var(--hover-clr); }
        .btn__icon { background-color: var(--hover-clr); color: var(--hover-bg-clr);
            i { animation: var(--animation-switchback-x); color: var(--hover-bg-clr); }
        }
    }
    &:focus { color: var(--focus-clr)!important; background-color: var(--focus-bg-clr)!important; border: var(--focus-border)!important; box-shadow: var(--focus-box-shadow)!important; 
        .wpb-icon { --clr: var(--focus-clr); }
        .btn__icon { background-color: var(--focus-clr); color: var(--focus-bg-clr);
            i { color: var(--focus-bg-clr); }
        }
    }
    &:active { color: var(--active-clr)!important; background-color: var(--active-bg-clr)!important; border: var(--active-border)!important; box-shadow: var(--active-box-shadow)!important;
        .wpb-icon { --clr: var(--active-clr); }
        .btn__icon { background-color: var(--active-clr); color: var(--active-bg-clr); 
            i { color: var(--active-bg-clr); }
        }
    }

    /*** Button sizes ***/
    &.btn--small { --p: 0 1.5rem; --fs: 1.4rem; min-height: 3.8rem; column-gap: .4rem;
        &:has(.btn__icon) { column-gap: .6rem; }
        .btn__icon { --size: 1.8rem; }
    }
    &.btn--large { --p: 0 2.6rem; --fs: 1.8rem; min-height: 5.3rem; }
    &.btn--square { --p: 0; aspect-ratio: 1/1; }

    /*** Button variations ***/
    &.btn--wit { --clr: var(--clr-text); --bg-clr: var(--clr-white); --border: 1px transparent; --hover-clr: var(--clr-white); --hover-bg-clr: var(--clr-primary); 
        &.btn--on-green { --hover-bg-clr: var(--clr-dark); }
        &.btn--on-dark { --hover-clr: #fff; --hover-bg-clr: var(--clr-primary); }
    }
    &.btn--transparent { --clr: var(--clr-text); --bg-clr: transparent; --border: none; --hover-clr: var(--clr-primary); --hover-bg-clr: transparent; --p: 0;
        .btn__icon i { color: #fff; }
    }
    &.btn--outline { --clr: var(--clr-text); --bg-clr: transparent; --border: 1px solid var(--clr-dark-20); --hover-clr: var(--clr-text); --hover-bg-clr: var(--clr-dark-10); --hover-border: 1px solid var(--clr-dark-20); 
        .btn__icon i { color: #fff; }
    }
    &.btn--outline-dark-20 { --clr: var(--clr-text); --bg-clr: transparent; --border: 1px solid var(--clr-dark-20); --hover-clr: #fff; --hover-bg-clr: var(--clr-dark); ; --hover-border: 1px solid var(--clr-dark); }
    &.btn--outline-primary { --clr: var(--clr-primary); --bg-clr: transparent; --border: 1px solid var(--clr-primary); --hover-clr: #fff; --hover-bg-clr: var(--clr-primary); --hover-border: 1px solid var(--clr-primary); }
    &.btn--link { --clr: var(--clr-text); --bg-clr: transparent; --p: 0; --border: none; --hover-clr: var(--clr-primary-120); --hover-bg-clr: transparent; flex-direction: row-reverse; 
        .btn__icon i { color: #fff; }
    }
    &.btn--dark-10 { --clr: var(--clr-text); --bg-clr: var(--clr-dark-10); --border: none; --hover-bg-clr: var(--clr-dark); --hover-clr: #fff; }
    &.btn--groen { --clr: var(--clr-white); --bg-clr: var(--clr-primary); --border: 1px transparent; --hover-bg-clr: var(--clr-primary-130); }
    &.btn--hover-green-110 { --hover-bg-clr: var(--clr-primary-110);; --hover-clr: #fff; }
    &.btn.btn--gform { --hover-bg-clr: var(--clr-primary-130); --hover-clr: #fff;
        i { color: var(--clr-dark); }
    }
}  

.btn-group { --gap: 1rem; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: var(--gap); }  

.wpb-bg-clr--primary {
    .btn.btn--outline { --clr: #fff; --bg-clr: var(--clr-primary); --hover-bg-clr: var(--clr-light); --hover-clr: var(--clr-text); --border: 1px solid #fff4; z-index: 2; }
}

@media (max-width: 767.98px) {
    .btn.btn--fluid {width: 100%; justify-content: center;}
}

@media (min-width: 768px) {
    .btn, .gform_button, .gform_next_button, .gform_previous_button, .button { --fs: 1.8rem; --br: 6.4rem; min-height: 5.6rem; --p: 0 2.5rem;}
}

/* .btn.btn--more::before{ --src: url('/app/themes/wux/assets/icons/btn_arrow_mask.svg'); content: ''; transition: all var(--ts-15) var(--cb--smooth); } */

.btn.btn--wit-outline { --clr: var(--clr-text); --hover-clr: #fff; --border: 1px solid var(--clr-dark-20); --bg-clr: #fff; --hover-bg-clr: var(--clr-primary); --hover-border: 1px solid var(--clr-primary); }