/* NOTE: Possibly come back to fonts...(maybe) */
.xch-btn {
    cursor: pointer;
    border-radius: var(--radius-button);
    min-width: 6rem; /* i should probably clamp this at some point */
    color: var(--text-neutral-default);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;

    /* Modifiers Control The Look & Size */
    background-color: var(--btn-bg);
    border: 1px solid var(--btn-border);

    &.btn-active:not(:disabled),
    &:hover:not(:disabled),
    &:focus-visible:not(:disabled) {
        background-color: var(--btn-bg-hover);
        color: var(--btn-text-hover, var(--text-neutral-default));
        border-color: var(--btn-border-hover);
    }

    /* For when/if we need active classes */
    /*&:active:not(:disabled) {*/
    /*    background-color: var(--btn-bg-active);*/
    /*    color: var(--btn-text-active);*/
    /*    border-color: var(--btn-border-active);*/
    /*}*/

    &:disabled {
        color: var(--text-disabled-default);
        background-color: var(--background-disabled-default);
        border-color: var(--border-disabled-default);
        cursor: not-allowed;
    }
}

/* ==========================================================================
                         # MODIFIERS / VARIANTS
    All modifiers are denoted with a double dash -- to represent that it is
    a variant of a default rule.
========================================================================== */
/* ==========================================================================
                         ## DEFAULT
========================================================================== */
.xch-btn--default {
    --btn-bg: var(--background-brand-default);
    --btn-bg-hover: var(--background-brand-hover);
    --btn-border: var(--border-brand-default);
    --btn-border-hover: var(--btn-bg-hover);
    --btn-text-hover: var(--text-brand-hover);
}

/* ==========================================================================
                         ## INFO VARIANT
========================================================================== */
.xch-btn--info {
    /*--btn-text: var(--text-info-default);*/
    --btn-bg: var(--background-info-default);
    --btn-border: var(--border-info-default);
    --btn-text-hover: var(--text-info-hover);
    --btn-bg-hover: var(--background-info-hover);
    --btn-border-hover: var(--border-info-hover);
}

.xch-btn--info-subtle {
    /*--btn-text: var(--text-info-default);*/
    --btn-bg: transparent;
    --btn-border: transparent;
    /*--btn-text-hover: var(--text-info-default);*/
    --btn-bg-hover: var(--background-info-default);
    --btn-border-hover: var(--border-info-default);
}

/* ==========================================================================
                         ## POSITIVE VARIANT
========================================================================== */
.xch-btn--positive {
    /*--btn-text: var(--text-positive-default);*/
    --btn-bg: var(--background-positive-default);
    --btn-border: var(--border-positive-default);
    /*--btn-text-hover: var(--text-positive-hover);*/
    --btn-bg-hover: var(--background-positive-hover);
    --btn-border-hover: var(--border-positive-hover);
}

.xch-btn--positive-subtle {
    /*--btn-text: var(--text-positive-default);*/
    --btn-bg: transparent;
    --btn-border: transparent;
    /*--btn-text-hover: var(--text-positive-hover);*/
    --btn-bg-hover: var(--background-positive-hover);
    --btn-border-hover: var(--border-positive-hover);
}

/* ==========================================================================
                         ## WARNING VARIANT
========================================================================== */
.xch-btn--warning {
    /*--btn-text: var(--text-warning-default);*/
    --btn-bg: var(--background-warning-default);
    --btn-border: var(--border-warning-default);
    /*--btn-text-hover: var(--text-warning-hover);*/
    --btn-bg-hover: var(--background-warning-hover);
    --btn-border-hover: var(--border-warning-hover);
}

.xch-btn--warning-subtle {
    /*--btn-text: var(--text-warning-default);*/
    --btn-bg: transparent;
    --btn-border: transparent;
    --btn-text-hover: var(--text-warning-hover);
    /*--btn-bg-hover: var(--background-warning-hover);*/
    --btn-border-hover: var(--border-warning-hover);
}

/* ==========================================================================
                         ## DANGER VARIANT
========================================================================== */
.xch-btn--danger {
    /*--btn-text: var(--text-danger-default);*/
    --btn-bg: var(--background-danger-default);
    --btn-border: var(--border-danger-default);
    /*--btn-text-hover: var(--text-danger-hover);*/
    --btn-bg-hover: var(--background-danger-hover);
    --btn-border-hover: var(--border-danger-hover);
}

.xch-btn--danger-subtle {
    /*--btn-text: var(--text-danger-default);*/
    --btn-bg: transparent;
    --btn-border: transparent;
    /*--btn-text-hover: var(--text-danger-hover);*/
    --btn-bg-hover: var(--background-danger-hover);
    --btn-border-hover: var(--border-danger-hover);
}

/* ==========================================================================
                         ## SIZES
========================================================================== */
.xch-btn-medium {
    padding: clamp(var(--unit-4), 1.2vw, var(--unit-12));
    font-weight: var(--text-xl-semibold-weight);
    font-size: clamp(13px, 1.5vw + 6px, var(--text-xl-semibold-size));
    letter-spacing: var(--text-xl-semibold-letter-spacing);
    line-height: var(--text-xl-semibold-line-height);
}

.xch-btn-small {
    padding: clamp(4px, 1vw, var(--unit-8));
    font-weight: var(--text-xl-semibold-weight);
    font-size: clamp(11px, 1.2vw + 5px, var(--text-xl-semibold-size));
    letter-spacing: var(--text-xl-semibold-letter-spacing);
    line-height: var(--text-xl-semibold-line-height);
}