.btn, .gform_button, .gform_next_button, .gform_previous_button, .button, .swiper-button-prev, .swiper-button-next { 
    --fs: 1.6rem; 
    --lh: 1.2; 
    --p: 0 2.4rem; 
    --br: var(--radius-full);
    --min-height: 4.8rem; 
    --gap: .6rem;
    --tsd: var(--ts-duration);
    --tsf: var(--ts-function);
    --tsp: color, background-color, border-color, box-shadow, -webkit-box-shadow;

    --clr: #FFFF; --bg-clr: var(--clr-secondary); --border: 1px solid transparent; --box-shadow: none; 
    --hover-clr: var(--clr); --hover-bg-clr: var(--clr-primary); --hover-border: 1px solid var(--hover-bg-clr); --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: none;
    --active-clr: var(--focus-clr); --active-bg-clr: var(--focus-bg-clr); --active-border: var(--focus-border); --active-box-shadow: var(--focus-box-shadow); 

    display: inline-flex; justify-content: space-between; align-items: center; min-height: var(--min-height); gap: var(--gap); font-family: var(--font-accent); font-size: var(--fs); font-weight: 700; 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(--tsd); transition-timing-function: var(--tsf); transition-property: var(--tsp);

    span { font: inherit; color: inherit; }
    i { --clr: var(--icon-clr, inherit); color: var(--clr); font-size: .8em; margin-top: .15rem; transition: color var(--tsd) var(--tsf); }

    &: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;
        i { --clr: var(--hover-clr); color: var(--hover-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; 
        i { --clr: var(--focus-clr); color: var(--focus-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; 
        i { --clr: var(--active-clr); color: var(--active-clr); }
    }

    /* Button sizes */
    &.btn--small { --p: 0 1.2rem; --gap: .5rem; --min-height: 3.8rem; 
        i { margin-top: -.1rem; }
    }
    &.btn--large { --p: 0 2.8rem; --min-height: 5.4rem; }

    /* Button add-ons */
    &.btn--ghost::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; }
    &.btn--square { --p: 0; aspect-ratio: 1/1; justify-content: center; }
    &.btn--round { --br: 50%; }

    /* Button variations */
    &.btn--primary { --hover-bg-clr: var(--clr-primary); }
    &.btn--light { --clr: var(--clr-dark); --bg-clr: var(--clr-light); --border: 1px solid var(--clr-light); --box-shadow: none; --hover-clr: #FFFF; --hover-bg-clr: var(--clr-dark-75); }
    &.btn--dark { --clr: #FFFF; --bg-clr: var(--clr-dark); --border: 1px solid var(--clr-dark); --box-shadow: none; --hover-clr: #FFFF; --hover-bg-clr: var(--clr-primary); }
    &.btn--beige { --clr: var(--clr-dark); --bg-clr: var(--clr-beige); --border: 1px solid var(--clr-beige); --box-shadow: none; --hover-clr: #FFFF; --hover-bg-clr: var(--clr-dark-75); }
    &.btn--white { --clr: var(--clr-dark); --bg-clr: #fff; --border: 1px solid #fff; --box-shadow: none; --hover-clr: #fff; --hover-bg-clr: var(--clr-dark); --hover-border: 1px solid var(--clr-dark); }
    &.btn--link { --p: 0; min-height: 2rem; --clr: var(--clr-dark); --hover-clr: var(--clr-dark); --bg-clr: transparent; --border: 1px solid transparent; --box-shadow: none; --icon-clr: var(--clr-primary); 
        i { font-size: .75em; width: fit-content; }
    }

    &.btn--nav-toggle { --hover-bg-clr: transparent; --hover-border: 1px solid transparent; --hover-clr: var(--clr); --gap: .8rem; background-color: transparent; border-radius: 0; padding: 0;
        svg { fill: var(--clr); 
            rect { transition: y var(--ts-25) ease var(--ts-25), transform var(--ts-25) ease, opacity var(--ts-25); transform-origin: center; }
        }
        &:hover svg rect { fill: var(--hover-clr); }
        &:focus svg rect { fill: var(--focus-clr); }
        &:active svg rect { fill: var(--active-clr); }

        &[aria-expanded="true"] {
            svg .top { transform: translateY(5px) translateX(-4px) rotate(45deg); }
            svg .middle { opacity: 0; }
            svg .bottom { transform: translateY(-5px) translateX(-4px) rotate(-45deg); }
        }

        .btn__icon { --size: 4rem; --br: .6rem; --bg-clr: var(--clr-beige); width: var(--size); height: var(--size); min-width: var(--size); border-radius: var(--br); background-color: var(--bg-clr); display: inline-grid; place-items: center; }
    }

    .wpb-block--cta &{
        &.btn--dark { --hover-bg-clr: #FFFF; --hover-clr: var(--clr-dark); }
    }

    @media (min-width: 768px) {
        --min-height: 5.1rem; --p: 0 clamp(2.4rem, 2.8vw, 3.2rem); 

        &.btn--small { --p: 0 2rem; --min-height: 4.4rem; }
        &.btn--large { --p: 0 3.6rem; --min-height: 6.2rem; }
    }
}

.btn-group { --gap: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); 
    @media (max-width: 575.98px) {
        .btn { width: 100%; }
        &.btn-group--desktop { display: none; }
    }
}