.btn, .gform_button, .gform_next_button, .gform_previous_button, .button { 
    --font-size: 1.4rem; 
    --line-height: 1.2; 
    --padding: 0 2rem; 
    --border-radius: .6rem; 
    --button-mh: 4rem;

    --color: var(--clr-text); --bg-color: var(--clr-text); --border: 1px solid rgb(0,0,0); --box-shadow: none; 
    --hover-color: var(--color); --hover-bg-color: var(--bg-color); --hover-border: var(--border); --hover-box-shadow: var(--box-shadow); 
    --focus-color: var(--hover-color); --focus-bg-color: var(--hover-bg-color); --focus-border: var(--hover-border); --focus-box-shadow: var(--hover-box-shadow); 
    
    transition-property: color, background-color, border-color, box-shadow; transition-duration: var(--ts-15); transition-timing-function: ease;
    min-height: var(--button-mh); display: inline-flex; column-gap: 2rem; justify-content: space-between; align-items: center; text-align: left; font-size: var(--font-size); line-height: var(--line-height); padding: var(--padding); color: var(--color); background-color: var(--bg-color); border-radius: var(--border-radius); border: var(--border); font-weight: 600; box-shadow: var(--box-shadow); text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; 
    
    span { font: inherit; color: inherit; text-box: trim-both text; }
    i { display: inline-flex; width: auto; color: var(--color); transition: color var(--ts-15) ease; }
    .wpb-icon { --icon-color: var(--color); }

    &:hover { color: var(--hover-color)!important; background-color: var(--hover-bg-color)!important; border: var(--hover-border)!important; box-shadow: var(--hover-box-shadow)!important; 
        i { color: var(--hover-color); }
        .wpb-icon { --icon-color: var(--hover-color); }
        .wpb-icon-wrapper--outline { border-color: var(--hover-color); }
    }
    &:focus, &:active { color: var(--focus-color)!important; background-color: var(--focus-bg-color)!important; border: var(--focus-border)!important; box-shadow: var(--focus-box-shadow)!important;
        i { color: var(--focus-color); }
        .wpb-icon { --icon-color: var(--focus-color); }
    }

    /* Button sizes */
    &.btn--mini { --padding: 0 1.6rem; --button-mh: 3rem; }
    &.btn--small { --padding: 0 1.8rem; --button-mh: 3.6rem; column-gap: .8rem; 
        > .wpb-icon {--width: 1.6rem; --height: 1.6rem;}
    }
    &.btn--medium { --padding: 0 2rem; --button-mh: 4.5rem; column-gap: 1rem; font-size: 1.4rem; }
    &.btn--large { --padding: 0 2.2rem; --font-size: 1.4rem; --button-mh: 4.4rem; }
    &.btn--square { --padding: 0; min-width: var(--button-mh); min-height: var(--button-mh); justify-content: center; }

    &.btn--ghost::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }


    /* Button styles */
    &.btn--link { --color: var(--clr-text); --bg-color: transparent; --border: 1px solid transparent; --box-shadow: none; --padding: 0; --hover-color: var(--clr-primary); min-height: 0; display: inline-flex; column-gap: .6rem; 
        &.btn--link-blue { --color: var(--clr-contrast-blue); 
            .wpb-icon-wrapper--outline { border-color: var(--clr-contrast-blue);
                i { color: var(--clr-contrast-blue); }
            }
        }
        &.btn--link-green { --color: var(--clr-green);
            .wpb-icon-wrapper--outline { border-color: var(--clr-green);
                i { color: var(--clr-green); }
            }
        }
    }
    &.btn--link-blue { --color: var(--clr-contrast-blue);
        .wpb-icon-wrapper--outline { border-color: var(--clr-contrast-blue);
            i { color: var(--clr-contrast-blue); }
        }
    }
    &.btn--link-primary { --color: var(--clr-primary); --bg-color: transparent; --border: none; --padding: 0;
        .wpb-icon-wrapper--outline { border-color: var(--clr-primary);
            i { color: var(--clr-primary); }
        }
    }
    &.btn--white { --color: var(--clr-text); --bg-color: #ffffff; --border: 1px solid rgb(255,255,255); --hover-color: #ffffff; --hover-bg-color: var(--clr-dark); --hover-border: .1rem solid rgb(255, 255, 255); }
    &.btn--outline { --color: var(--clr-contrast-blue); --bg-color: transparent; --border: .1rem solid var(--clr-border); --hover-bg-color: var(--clr-light); --hover-color: var(--clr-blue); --hover-border: 1px solid var(--clr-blue);
        &.wpb-icon-wrapper--outline { border-color: var(--clr-blue); }
            
        &.selected { --border: .1rem solid var(--clr-blue); --bg-color: var(--clr-blue), .15; --color: var(--clr-blue); }
        &.loading::after { --color: var(--clr-green); }
    }
    &.btn--outline-dark { --color: var(--clr-headings); --bg-color: transparent; --border: .1rem solid var(--clr-border-dark); --hover-bg-color: var(--clr-light); --hover-border: 1px solid var(--clr-blue);
        .wpb-icon-wrapper--outline { border-color: var(--clr-headings);
            i { color: var(--clr-headings); }
        }
    }
    &.btn--outline-headings { --color: var(--clr-headings); --bg-color: transparent; --border: .1rem solid var(--clr-headings); --hover-bg-color: var(--clr-blue); --hover-color: #ffffff; --hover-border: 1px solid var(--clr-blue);
        .wpb-icon-wrapper--outline { border-color: var(--clr-headings); 
            i { color: var(--clr-headings); }    
        }
    }
    &.btn--outline-white { --color: #ffffff; --bg-color: transparent; --border: .1rem solid rgba(255,255,255, .35); --hover-color: var(--clr-headings); --hover-border: .1rem solid rgb(255,255,255); --hover-bg-color: #ffffff; 
        .wpb-icon-wrapper--outline { border-color: #ffffff; 
            i { color: #ffffff; }
        }
        &:hover .wpb-icon-wrapper--outline { border-color: var(--clr-headings);
            i { color: var(--clr-headings); }
        }
    }
    &.btn--light { --bg-color: var(--clr-light); --border: .1rem solid var(--clr-light); --color: var(--clr-headings); --hover-bg-color: var(--clr-light-contrast); 
        .wpb-icon-wrapper--outline { border-color: var(--clr-headings); 
            i { color: var(--clr-headings); }
        }
    }
    &.btn--blue { --bg-color: var(--clr-blue); --border: 1px solid var(--clr-blue); --color: #ffffff; --hover-bg-color: var(--clr-dark); }
    &.btn--green { --bg-color: var(--clr-green); --border: 1px solid var(--clr-green); --color: #ffffff; --hover-bg-color: var(--clr-dark); --hover-border: 1px solid var(--clr-dark); }
    &.btn--red { --bg-color: var(--clr-red); --border: 1px solid var(--clr-red); --color: #ffffff; --hover-bg-color: var(--clr-dark); --hover-border: 1px solid var(--clr-dark); }
    &.btn--lightgreen { --bg-color: var(--clr-lightgreen); --border: 1px solid var(--clr-lightgreen); --color: #ffffff; --hover-bg-color: #FFF; }
    &.btn--secondary { --bg-color: var(--clr-dark); --border: .1rem solid var(--clr-dark); --color: #ffffff; --hover-bg-color: var(--clr-blue); --hover-border: .1rem solid var(--clr-blue); }    
    &.btn--primary, &.button { --bg-color: var(--clr-blue); --border: 1px solid var(--clr-blue); --color: #ffffff; --hover-bg-color: var(--clr-dark); 
        &.btn-on-dark:hover {--hover-bg-color: #2d4774;}
    }
}

.btn-group { --gap: .8rem; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); }

.btn--check {
    + .btn { --active-color: #ffffff; --active-bg-color: var(--clr-headings); --active-border: 1px solid var(--clr-headings); }
    &:checked + .btn { --hover-color: #ffffff; --hover-bg-color: var(--clr-headings); --hover-border: .1rem solid var(--clr-headings);
        .wpb-icon-wrapper--outline { border-color: rgb(255,255,255); 
            i { color: #ffffff; }
        }
    }
}

@media (min-width: 576px) {
    .btn, .gform_button, .gform_next_button, .gform_previous_button, .button { font-size: 1.6rem;
        &.btn--small { font-size: 1.4rem; }
    }
}

@media (min-width: 992px) {
    .btn, .gform_button, .gform_next_button, .gform_previous_button, .button { --button-mh: 4.6rem;
        &.btn--large { --button-mh: 5.3rem; --padding: 0 2.4rem; --font-size: 1.6rem; }
    }
}