/*** ---------- Buttons ---------- ***/
.btn, .gform_button, .gform_next_button, .gform_previous_button, .button, .swiper-button-prev, .swiper-button-next { 
    --fs: 1.6rem; 
    --lh: 1; 
    --p: 0 1.6rem; 
    --br: var(--radius--small);
    --min-height: 4.3rem; 
    --gap: .8rem;
    --tsd: var(--ts-duration);
    --tsf: var(--ts-function);
    --tsp: color, background-color, border-color, box-shadow, -webkit-box-shadow;

    --clr: var(--clr-text-primary); --bg-clr: var(--clr-primary); --border: 2px solid var(--clr-primary); --box-shadow: none; 
    --hover-clr: var(--clr); --hover-bg-clr: var(--clr-primary-hover); --hover-border: 2px solid var(--clr-primary-hover); --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: center; align-items: center; min-height: var(--min-height); gap: var(--gap); font-size: var(--fs); line-height: var(--lh); padding: var(--p); color: var(--clr)!important; background-color: var(--bg-clr)!important; 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); font-family: var(--font-primary); transition-property: var(--tsp);

    span { font: inherit; color: inherit; }
    i, i::before { --clr-icon: var(--clr); color: var(--clr); }

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

    /* Button states */
    &.loading { position: relative; 
        &::before, &::after { content: ''; display: block; position: absolute; z-index: 1; border-radius: inherit;}
        &::before { top: 0; right: 0; bottom: 0; left: 0; background: var(--clr-primary); }
        &::after { border-radius: 50%; --w: 2rem; --h: 2rem; width: var(--w); height: var(--h); top: calc(50% - (var(--h) / 2)); left: calc(50% - (var(--w) / 2)); border: 2px solid var(--clr); border-top: 2px solid transparent; animation: rotate .75s linear infinite; }
    }

    /* Button sizes */
    &.btn--small { --p: 0 .8rem; --fs: var(--fs-small); --min-height: 3.2rem; }
    &.btn--large { --p: 0 2.4rem; --fs: var(--fs-h6); --min-height: 4.8rem; }

    /* Button add-ons */
    &.btn--ghost::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
    &.btn--square { --p: 0; aspect-ratio: 1/1; }

    /* Button variations, colors follow the Blog Settings */
    &.btn--secondary { --clr: var(--clr-text-secondary); --bg-clr: var(--clr-secondary); --border: 2px solid var(--clr-secondary); --hover-bg-clr: var(--clr-secondary-hover); --hover-border: 2px solid var(--clr-secondary-hover); }
    &.btn--outline { --clr: var(--clr-primary); --bg-clr: transparent; --border: 2px solid var(--clr-primary); --hover-clr: var(--clr-text-primary); --hover-bg-clr: var(--clr-primary); --hover-border: var(--border); }
    &.btn--white { --clr: #000; --bg-clr: #fff; --border: 2px solid #fff; --hover-clr: #fff; --hover-bg-clr: #000; --hover-border: 2px solid #000; }
    &.btn--black { --clr: #fff; --bg-clr: #000; --border: 2px solid #000; --hover-clr: #000; --hover-bg-clr: #fff; --hover-border: 2px solid #fff; }
    &.btn--link { --p: 0; --clr: var(--clr-text); --bg-clr: transparent; --border: unset; --hover-clr: var(--clr-primary); --hover-bg-clr: transparent; --hover-border: unset; }
    &.btn--dark { --clr: var(--clr-text-dark); --bg-clr: var(--clr-dark); --border: 2px solid transparent; --hover-clr: var(--clr); --hover-bg-clr: var(--clr-primary); --hover-border: var(--border); }
    &.btn--light { --clr: var(--clr-text-light); --bg-clr: var(--clr-light); --border: 2px solid transparent; --hover-clr: var(--clr-light); --hover-bg-clr: var(--clr-dark); --hover-border: var(--border); }

    &.btn--bookmark {
        i { pointer-events: none; }
        i.fa-solid { display: none; }
        &[data-bookmarked="true"] {
            i.fa-regular { display: none; }
            i.fa-solid { display: block; }
        }
    }
}

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