/* BluKavantUi_Community_Core → Button → Style Sheet.
   Extracted from the published BluUITheme on 2026-10-09.
   Size selectors are strengthened for later OutSystems phone/tablet Theme rules;
   Default and Secondary use neutral surfaces matching Chip's palette.
   Keep the shared --blu-* DESIGN TOKENS in BluUITheme.
   Includes existing variants, sizes, loading spinner, focus, and preview. */

/* ============================================================
   BUTTON — BASE
   ============================================================ */

.blu-button.blu-button {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--blu-space-2);

    box-sizing: border-box;

    margin: 0;
    padding: 0;

    border: 1px solid transparent;
    border-radius: var(--blu-radius-md);

    font-family: var(--blu-font-family);
    font-weight: var(--blu-font-weight-semibold);
    line-height: 1;

    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    user-select: none;

    box-shadow: none;

    transition:
        background-color var(--blu-transition-fast),
        border-color var(--blu-transition-fast),
        color var(--blu-transition-fast),
        box-shadow var(--blu-transition-fast),
        transform var(--blu-transition-fast);
}


/* ============================================================
   BUTTON — COLORS
   These only define variables.
   Variant rules below decide how they're displayed.
   ============================================================ */


/* Shared palette. Existing Button variants remain Filled, Outlined, Ghost.
   Named presets have a soft filled surface; status buttons have solid fills.
   Default and Secondary keep their neutral button appearance. */
.blu-button.blu-button--default {
    --blu-button-color: var(--bluui-color-default-text);
    --blu-button-hover: var(--bluui-color-default-text);
    --blu-button-active: var(--bluui-color-default-text);
    --blu-button-soft: var(--bluui-color-default-soft);
    --blu-button-soft-active: var(--bluui-color-default-border);
    --blu-button-fill: var(--bluui-color-default-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-default-text);
}

.blu-button.blu-button--primary {
    --blu-button-color: var(--bluui-color-primary-text);
    --blu-button-hover: var(--bluui-color-primary-text);
    --blu-button-active: var(--bluui-color-primary-text);
    --blu-button-soft: var(--bluui-color-primary-soft);
    --blu-button-soft-active: var(--bluui-color-primary-border);
    --blu-button-fill: var(--bluui-color-primary-solid);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-primary-contrast);
}

.blu-button.blu-button--secondary {
    --blu-button-color: var(--bluui-color-secondary-text);
    --blu-button-hover: var(--bluui-color-secondary-text);
    --blu-button-active: var(--bluui-color-secondary-text);
    --blu-button-soft: var(--bluui-color-secondary-soft);
    --blu-button-soft-active: var(--bluui-color-secondary-border);
    --blu-button-fill: var(--bluui-color-secondary-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-secondary-text);
}

.blu-button.blu-button--success {
    --blu-button-color: var(--bluui-color-success-text);
    --blu-button-hover: var(--bluui-color-success-text);
    --blu-button-active: var(--bluui-color-success-text);
    --blu-button-soft: var(--bluui-color-success-soft);
    --blu-button-soft-active: var(--bluui-color-success-border);
    --blu-button-fill: var(--bluui-color-success-solid);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-success-contrast);
}

.blu-button.blu-button--processing {
    --blu-button-color: var(--bluui-color-processing-text);
    --blu-button-hover: var(--bluui-color-processing-text);
    --blu-button-active: var(--bluui-color-processing-text);
    --blu-button-soft: var(--bluui-color-processing-soft);
    --blu-button-soft-active: var(--bluui-color-processing-border);
    --blu-button-fill: var(--bluui-color-processing-solid);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-processing-contrast);
}

.blu-button.blu-button--warning {
    --blu-button-color: var(--bluui-color-warning-text);
    --blu-button-hover: var(--bluui-color-warning-text);
    --blu-button-active: var(--bluui-color-warning-text);
    --blu-button-soft: var(--bluui-color-warning-soft);
    --blu-button-soft-active: var(--bluui-color-warning-border);
    --blu-button-fill: var(--bluui-color-warning-solid);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-warning-contrast);
}

.blu-button.blu-button--error {
    --blu-button-color: var(--bluui-color-error-text);
    --blu-button-hover: var(--bluui-color-error-text);
    --blu-button-active: var(--bluui-color-error-text);
    --blu-button-soft: var(--bluui-color-error-soft);
    --blu-button-soft-active: var(--bluui-color-error-border);
    --blu-button-fill: var(--bluui-color-error-solid);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-error-contrast);
}

.blu-button.blu-button--danger {
    --blu-button-color: var(--bluui-color-danger-text);
    --blu-button-hover: var(--bluui-color-danger-text);
    --blu-button-active: var(--bluui-color-danger-text);
    --blu-button-soft: var(--bluui-color-danger-soft);
    --blu-button-soft-active: var(--bluui-color-danger-border);
    --blu-button-fill: var(--bluui-color-danger-solid);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-danger-contrast);
}

.blu-button.blu-button--magenta {
    --blu-button-color: var(--bluui-color-magenta-text);
    --blu-button-hover: var(--bluui-color-magenta-text);
    --blu-button-active: var(--bluui-color-magenta-text);
    --blu-button-soft: var(--bluui-color-magenta-soft);
    --blu-button-soft-active: var(--bluui-color-magenta-border);
    --blu-button-fill: var(--bluui-color-magenta-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-magenta-text);
}

.blu-button.blu-button--red {
    --blu-button-color: var(--bluui-color-red-text);
    --blu-button-hover: var(--bluui-color-red-text);
    --blu-button-active: var(--bluui-color-red-text);
    --blu-button-soft: var(--bluui-color-red-soft);
    --blu-button-soft-active: var(--bluui-color-red-border);
    --blu-button-fill: var(--bluui-color-red-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-red-text);
}

.blu-button.blu-button--volcano {
    --blu-button-color: var(--bluui-color-volcano-text);
    --blu-button-hover: var(--bluui-color-volcano-text);
    --blu-button-active: var(--bluui-color-volcano-text);
    --blu-button-soft: var(--bluui-color-volcano-soft);
    --blu-button-soft-active: var(--bluui-color-volcano-border);
    --blu-button-fill: var(--bluui-color-volcano-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-volcano-text);
}

.blu-button.blu-button--orange {
    --blu-button-color: var(--bluui-color-orange-text);
    --blu-button-hover: var(--bluui-color-orange-text);
    --blu-button-active: var(--bluui-color-orange-text);
    --blu-button-soft: var(--bluui-color-orange-soft);
    --blu-button-soft-active: var(--bluui-color-orange-border);
    --blu-button-fill: var(--bluui-color-orange-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-orange-text);
}

.blu-button.blu-button--gold {
    --blu-button-color: var(--bluui-color-gold-text);
    --blu-button-hover: var(--bluui-color-gold-text);
    --blu-button-active: var(--bluui-color-gold-text);
    --blu-button-soft: var(--bluui-color-gold-soft);
    --blu-button-soft-active: var(--bluui-color-gold-border);
    --blu-button-fill: var(--bluui-color-gold-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-gold-text);
}

.blu-button.blu-button--lime {
    --blu-button-color: var(--bluui-color-lime-text);
    --blu-button-hover: var(--bluui-color-lime-text);
    --blu-button-active: var(--bluui-color-lime-text);
    --blu-button-soft: var(--bluui-color-lime-soft);
    --blu-button-soft-active: var(--bluui-color-lime-border);
    --blu-button-fill: var(--bluui-color-lime-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-lime-text);
}

.blu-button.blu-button--green {
    --blu-button-color: var(--bluui-color-green-text);
    --blu-button-hover: var(--bluui-color-green-text);
    --blu-button-active: var(--bluui-color-green-text);
    --blu-button-soft: var(--bluui-color-green-soft);
    --blu-button-soft-active: var(--bluui-color-green-border);
    --blu-button-fill: var(--bluui-color-green-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-green-text);
}

.blu-button.blu-button--cyan {
    --blu-button-color: var(--bluui-color-cyan-text);
    --blu-button-hover: var(--bluui-color-cyan-text);
    --blu-button-active: var(--bluui-color-cyan-text);
    --blu-button-soft: var(--bluui-color-cyan-soft);
    --blu-button-soft-active: var(--bluui-color-cyan-border);
    --blu-button-fill: var(--bluui-color-cyan-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-cyan-text);
}

.blu-button.blu-button--blue {
    --blu-button-color: var(--bluui-color-blue-text);
    --blu-button-hover: var(--bluui-color-blue-text);
    --blu-button-active: var(--bluui-color-blue-text);
    --blu-button-soft: var(--bluui-color-blue-soft);
    --blu-button-soft-active: var(--bluui-color-blue-border);
    --blu-button-fill: var(--bluui-color-blue-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-blue-text);
}

.blu-button.blu-button--geekblue {
    --blu-button-color: var(--bluui-color-geekblue-text);
    --blu-button-hover: var(--bluui-color-geekblue-text);
    --blu-button-active: var(--bluui-color-geekblue-text);
    --blu-button-soft: var(--bluui-color-geekblue-soft);
    --blu-button-soft-active: var(--bluui-color-geekblue-border);
    --blu-button-fill: var(--bluui-color-geekblue-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-geekblue-text);
}

.blu-button.blu-button--purple {
    --blu-button-color: var(--bluui-color-purple-text);
    --blu-button-hover: var(--bluui-color-purple-text);
    --blu-button-active: var(--bluui-color-purple-text);
    --blu-button-soft: var(--bluui-color-purple-soft);
    --blu-button-soft-active: var(--bluui-color-purple-border);
    --blu-button-fill: var(--bluui-color-purple-soft);
    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
    --blu-button-fill-border: var(--blu-button-fill);
    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
    --blu-button-fill-border-active: var(--blu-button-fill-active);
    --blu-button-contrast: var(--bluui-color-purple-text);
}

/* ============================================================
   BUTTON — FILLED
   Default/Secondary supply neutral fills. Other colors use their original
   solid color, hover, and pressed values through the fallbacks below.
   ============================================================ */

.blu-button.blu-button--filled {
    background-color: var(--blu-button-fill, var(--blu-button-color));
    border-color: var(--blu-button-fill-border, var(--blu-button-color));
    color: var(--blu-button-contrast);

    box-shadow: var(--blu-shadow-xs);
}

.blu-button.blu-button--filled:hover {
    background-color: var(--blu-button-fill-hover, var(--blu-button-hover));
    border-color: var(--blu-button-fill-border-hover, var(--blu-button-hover));
    color: var(--blu-button-contrast);
}

.blu-button.blu-button--filled:active {
    background-color: var(--blu-button-fill-active, var(--blu-button-active));
    border-color: var(--blu-button-fill-border-active, var(--blu-button-active));
    color: var(--blu-button-contrast);

    transform: translateY(1px);
}


/* ============================================================
   BUTTON — OUTLINED
   ============================================================ */

.blu-button.blu-button--outlined {
    background-color: transparent;
    border-color: var(--blu-button-color);
    color: var(--blu-button-color);

    box-shadow: none;
}

.blu-button.blu-button--outlined:hover {
    background-color: var(--blu-button-soft);
    border-color: var(--blu-button-hover);
    color: var(--blu-button-hover);
}

.blu-button.blu-button--outlined:active {
    background-color: var(--blu-button-soft-active);
    border-color: var(--blu-button-active);
    color: var(--blu-button-active);

    transform: translateY(1px);
}


/* ============================================================
   BUTTON — GHOST
   ============================================================ */

.blu-button.blu-button--ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--blu-button-color);

    box-shadow: none;
}

.blu-button.blu-button--ghost:hover {
    background-color: var(--blu-button-soft);
    border-color: transparent;
    color: var(--blu-button-hover);
}

.blu-button.blu-button--ghost:active {
    background-color: var(--blu-button-soft-active);
    border-color: transparent;
    color: var(--blu-button-active);

    transform: translateY(1px);
}


/* ============================================================
   BUTTON — SIZES (specificity preserves sizes before Theme CSS)
   ============================================================ */

.blu-button.blu-button.blu-button--small {
    min-height: 32px;

    padding: 0 12px;

    font-size: var(--blu-font-size-sm);
}

.blu-button.blu-button.blu-button--medium {
    min-height: 40px;

    padding: 0 16px;

    font-size: var(--blu-font-size-md);
}

.blu-button.blu-button.blu-button--large {
    min-height: 48px;

    padding: 0 20px;

    font-size: var(--blu-font-size-lg);
}


/* ============================================================
   BUTTON — FULL WIDTH
   ============================================================ */

.blu-button.blu-button--full {
    width: 100%;
}


/* ============================================================
   BUTTON — FOCUS
   ============================================================ */

.blu-button.blu-button:focus {
    outline: none;
}

.blu-button.blu-button:focus-visible {
    outline: 2px solid var(--bluui-primary, #4f46e5);
    outline-offset: 3px;

    box-shadow: var(--blu-focus-ring);
}


/* ============================================================
   BUTTON — DISABLED
   ============================================================ */

.blu-button.blu-button:disabled,
.blu-button.blu-button--disabled {
    opacity: 0.48;

    cursor: not-allowed;
    pointer-events: none;

    box-shadow: none;
    transform: none;
}


/* ============================================================
   BUTTON — LOADING
   ============================================================ */

.blu-button.blu-button--loading {
    cursor: wait;
    pointer-events: none;
}

/*
   OutSystems may render the native button as disabled while loading.
   Don't fade the loading state.
*/

.blu-button.blu-button--loading:disabled {
    opacity: 1;
}


/* ============================================================
   BUTTON — SPINNER
   ============================================================ */

.blu-button__spinner {
    display: inline-block;

    width: 16px;
    height: 16px;

    box-sizing: border-box;

    flex: 0 0 16px;

    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;

    opacity: 0.85;

    animation: blu-spin 0.65s linear infinite;
}

.blu-button--small .blu-button__spinner {
    width: 14px;
    height: 14px;

    flex-basis: 14px;
}

.blu-button--large .blu-button__spinner {
    width: 18px;
    height: 18px;

    flex-basis: 18px;
}

@keyframes blu-spin {

    to {
        transform: rotate(360deg);
    }
}


/* ============================================================
   BUTTON — CONTENT
   ============================================================ */

.blu-button__content {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
}


/* ============================================================
   BUTTON — ICON
   ============================================================ */

.blu-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    font-size: 1.1em;
    line-height: 1;
}

/* ============================================================
   BUTTON — PREVIEW
   ============================================================ */

.blu-preview-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    min-width: 90px;

    padding: 0 16px;

    border-radius: 8px;

    background-color: var(--bluui-color-primary-solid, #4f46e5);
    color: var(--bluui-on-primary, #ffffff);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 14px;
    font-weight: 600;
}

/* Respect motion preferences while preserving a static loading indicator. */
@media (prefers-reduced-motion: reduce) {
  .blu-button { transition: none !important; }
  .blu-button .blu-button-spinner, .blu-button .blu-button__spinner { animation: none !important; }
}