/*** Buttons ***/
button, .button { cursor: pointer; border: unset; outline: unset; }

.link { cursor: pointer; }

.btn { --clr: var(--text-clr); --clr-bg: var(--bg-clr); --padding: 8px 16px; --border: 1px solid transparent; color: var(--clr); cursor: pointer; position: relative;  transition-duration: var(--transition-duration); transition-timing-function: var(--transition-function); transition-property: opacity, background-color, color, text-decoration-color; }
.btn:not(.btn.btn--link) { background-color: var(--clr-bg); border: var(--border); padding: var(--padding, 8px 16px); border-radius: var(--br-small); display: flex; justify-content: center; align-items: center; gap: 8px; }
.btn .wux-icon { --clr: var(--text-clr); transition: background-color var(--timing); --w: var(--fs-p); --h: var(--w); }
.btn span { color: var(--clr); }


.btn--xsmall { --padding: 0; --fs: var(--fs-xsmall); }
.btn--xsmall .wux-icon { --w: var(--fs-xsmall); --h: var(--w); }

.btn--small { --padding: 4px 8px; --fs: var(--fs-small); }
.btn--small .wux-icon { --w: var(--fs-small); --h: var(--w); }

.btn--medium {} /** Default **/
.btn--medium .wux-icon {} /** Default **/

.btn--large { --padding: 12px 24px; --fs: var(--fs-medium); }
.btn--large .wux-icon { --w: var(--fs-medium); --h: var(--w); }

.btn--square { aspect-ratio: 1/1; --padding: 0; width: 48px; height: 48px; }
.btn--square .wux-icon { --w: 16px; width: var(--w); height: var(--h); aspect-ratio: 1/1; }


.btn--icon { width: 32px; height: 32px; padding: unset !important; display: grid; place-content: center; --clr-bg: var(--bg-clr); }
.btn--icon .wux-icon { --w: 16px; --h: 16px; --clr: var(--text-clr); }

.btn--disabled, .btn.--disabled { cursor: not-allowed; opacity: 0.5; }

.btn--filter { align-items: center; }
.btn--filter .btn__active-count { border-radius: var(--br-round); color: var(--text-clr-invert); background-color: var(--text-clr); width: 22px; height: 22px; display: grid; place-content: center; font-size: var(--fs-xsmall); }


.btn--primary { --clr: var(--text-clr-invert); --border: 1px solid var(--accent); --clr-bg: var(--accent); }
.btn--primary .wux-icon { --clr: var(--text-clr-invert); }

.btn--primary-outline { --clr: var(--accent); --border: 1px solid var(--accent); --clr-bg: transparent; }
.btn--primary-outline .wux-icon { --clr: var(--accent); }

.btn--outline { --clr: var(--text-clr); --border: 1px solid var(--text-clr); --clr-bg: transparent; }
.btn--outline .wux-icon { --clr: var(--text-clr); }

.btn--white { --clr: var(--text-clr); --border: 1px solid #fff; --clr-bg: #fff; }
.btn--white .wux-icon { --clr: var(--text-clr); }

.btn--white-outline { --clr: #fff; --border: 1px solid #fff; --clr-bg: transparent; }
.btn--white-outline .wux-icon { --clr: #fff; }

.btn--black { --clr: var(--text-clr-invert); --border: 1px solid #000; --clr-bg: #000; }
.btn--black .wux-icon { --clr: var(--text-clr-invert); }

.btn--black-outline { --clr: #000; --border: 1px solid #000; --clr-bg: transparent; }
.btn--black-outline .wux-icon { --clr: #000; }

.btn--link { --clr: var(--accent); --fw: normal; text-decoration: underline; text-decoration-color: var(--accent); --fs: var(--fs-p); background-color: unset; border: unset; padding: 0; min-height: unset; min-width: unset; }
.btn--link .wux-icon { --clr: var(--accent); }

.btn:is(:hover,:focus,:active,.--active,.--focused) {
    &.btn--icon { background-color: var(--accent); }
    &.btn--icon .wux-icon { --clr: var(--text-clr-invert); }

    &.btn--filter .btn__active-count { color: #000; background-color: var(--bg-clr); }


    &.btn--primary { --clr: var(--text-clr); --border: 1px solid var(--accent); --clr-bg: var(--bg-clr-light); }
    &.btn--primary .wux-icon { --clr: var(--text-clr); }

    &.btn--primary-outline { --clr: var(--text-clr-invert); --border: 1px solid var(--accent); --clr-bg: var(--accent); }
    &.btn--primary-outline .wux-icon { --clr: var(--text-clr-invert); }

    &.btn--outline { --clr: var(--text-clr-invert); --border: 1px solid #000; --clr-bg: #000; }
    &.btn--outline .wux-icon { --clr: var(--text-clr-invert); }

    &.btn--white { --clr: var(--text-clr-invert); --border: 1px solid var(--bg-clr-invert); --clr-bg: var(--bg-clr-invert); }
    &.btn--white .wux-icon { --clr: var(--text-clr-invert); }

    &.btn--white-outline { --clr: var(--text-clr); --border: 1px solid var(--bg-clr); --clr-bg: var(--bg-clr); }
    &.btn--white-outline .wux-icon { --clr: var(--text-clr); }

    &.btn--black { --clr: var(--text-clr-invert); --border: 1px solid var(--accent); --clr-bg: var(--accent); }
    &.btn--black .wux-icon { --clr: var(--text-clr-invert); }

    &.btn--black-outline { --clr: var(--text-clr-invert); --border: 1px solid #000; --clr-bg: #000; }
    &.btn--black-outline .wux-icon { --clr: var(--text-clr-invert); }

    &.btn--link { --clr: var(--accent-hover); text-decoration-color: var(--accent-hover); }
    &.btn--link .wux-icon { --clr: var(--accent-hover); }
}


.btn--danger { --clr: var(--text-clr-invert); --border: 1px solid var(--red-300); --clr-bg: var(--red-300); }
.btn--danger .wux-icon { --clr: var(--text-clr-invert); }

.btn--danger-outline { --clr: var(--red-300); --border: 1px solid var(--red-300); --clr-bg: transparent; }
.btn--danger-outline .wux-icon { --clr: var(--red-300); }

.btn--warning { --clr: var(--text-clr-invert); --border: 1px solid var(--orange-300); --clr-bg: var(--orange-300); }
.btn--warning .wux-icon { --clr: var(--text-clr-invert); }

.btn--warning-outline { --clr: var(--orange-300); --border: 1px solid var(--orange-300); --clr-bg: transparent; }
.btn--warning-outline .wux-icon { --clr: var(--orange-300); }

.btn--success { --clr: var(--text-clr-invert); --border: 1px solid var(--green-300); --clr-bg: var(--green-300); }
.btn--success .wux-icon { --clr: var(--text-clr-invert); }

.btn--success-outline { --clr: var(--green-300); --border: 1px solid var(--green-300); --clr-bg: transparent; }
.btn--success-outline .wux-icon { --clr: var(--green-300); }

.btn--info { --clr: var(--text-clr-invert); --border: 1px solid var(--blue-300); --clr-bg: var(--blue-300); }
.btn--info .wux-icon { --clr: var(--text-clr-invert); }

.btn--info-outline { --clr: var(--blue-300); --border: 1px solid var(--blue-300); --clr-bg: transparent; }
.btn--info-outline .wux-icon { --clr: var(--blue-300); }

.btn:is(:hover,:focus,:active,.--active,.--focused) {
    &.btn--danger { --clr: var(--red-300); --border: 1px solid var(--red-300); --clr-bg: var(--bg-clr-light); }
    &.btn--danger .wux-icon { --clr: var(--red-300); }

    &.btn--danger-outline { --clr: var(--text-clr-invert); --border: 1px solid var(--red-300); --clr-bg: var(--red-300); }
    &.btn--danger-outline .wux-icon { --clr: var(--text-clr-invert); }

    &.btn--warning { --clr: var(--orange-300); --border: 1px solid var(--orange-300); --clr-bg: var(--bg-clr-light); }
    &.btn--warning .wux-icon { --clr: var(--orange-300); }

    &.btn--warning-outline { --clr: var(--title-clr); --border: 1px solid var(--orange-300); --clr-bg: var(--orange-300); }
    &.btn--warning-outline .wux-icon { --clr: var(--title-clr); }

    &.btn--success { --clr: var(--green-300); --border: 1px solid var(--green-300); --clr-bg: var(--bg-clr-light); }
    &.btn--success .wux-icon { --clr: var(--green-300); }

    &.btn--success-outline { --clr: var(--title-clr); --border: 1px solid var(--green-300); --clr-bg: var(--green-300); }
    &.btn--success-outline .wux-icon { --clr: var(--title-clr); }

    &.btn--info { --clr: var(--blue-300); --border: 1px solid var(--blue-300); --clr-bg: var(--bg-clr-light); }
    &.btn--info .wux-icon { --clr: var(--blue-300); }

    &.btn--info-outline { --clr: var(--text-clr-invert); --border: 1px solid var(--blue-300); --clr-bg: var(--blue-300); }
    &.btn--info-outline .wux-icon { --clr: var(--text-clr-invert); }
}


.btn--loading, .btn.--loading { cursor: not-allowed; animation: pulse 1.5s infinite; }