/*
 * The base rule is the neutral tone. It used to paint `transparent`, which on a
 * dark ground left a hairline outline that read as page furniture rather than a
 * control - the one button an operator is most likely to want was the hardest
 * one to see. A raised surface gives it a body without giving it emphasis.
 */
.xava-ui-button {
    /*
     * Both of these mix away from the page rather than naming a colour, because
     * "a step up from the background" is a different direction on each theme.
     * surface-raised was tried first and only works on dark: on light it is
     * #eef1f6 against a #f4f6f9 page, which measured 1.05 and vanished.
     * Measured now: fill 1.46 dark / 1.33 light, border 5.3 / 3.4 against the
     * page - a component boundary wants 3:1 and the old one managed 2.69.
     */
    --xava-ui-button-bg: color-mix(in srgb, var(--surux-hue-lift) 14%, var(--xava-ui-bg));
    --xava-ui-button-border: color-mix(in srgb, var(--xava-ui-text) 44%, transparent);
    --xava-ui-button-color: var(--xava-ui-text);
    --xava-ui-button-hover: color-mix(in srgb, var(--surux-hue-lift) 22%, var(--xava-ui-bg));

    min-width: 0;
    min-height: var(--xava-ui-control-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--xava-ui-space-2);
    margin: 0;
    padding: .48rem .86rem;
    border: 1px solid var(--xava-ui-button-border);
    border-radius: var(--xava-ui-radius-button);
    background: var(--xava-ui-button-bg);
    color: var(--xava-ui-button-color);
    font: inherit;
    font-size: var(--xava-ui-control-font);
    font-weight: 720;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    transition:
        color var(--xava-ui-transition),
        border-color var(--xava-ui-transition),
        background-color var(--xava-ui-transition),
        box-shadow var(--xava-ui-transition),
        transform var(--xava-ui-transition);
}

.xava-ui-button:hover {
    border-color: color-mix(in srgb, var(--xava-ui-button-border) 72%, var(--surux-hue-lift) 28%);
    background: var(--xava-ui-button-hover);
    color: var(--xava-ui-button-color);
    text-decoration: none;
    transform: translateY(-1px);
}

.xava-ui-button:active {
    transform: translateY(0);
}

.xava-ui-button:focus-visible {
    outline: 0;
    box-shadow: var(--xava-ui-focus-ring);
}

.xava-ui-button:disabled,
.xava-ui-button[aria-disabled="true"],
.xava-ui-button.is-busy {
    opacity: .58;
    cursor: not-allowed;
    transform: none;
}

/*
 * A disabled button must not keep advertising its tone. Fading a filled primary
 * to 58% on a dark surface still reads as an enabled blue button, so "Choose
 * update action" looked ready to press while it was refusing every click for
 * want of a selected target - the operator blames the button, not the state.
 *
 * Busy is deliberately excluded: that button is mid-action and should keep its
 * colour, because the tone is what says the action is still running.
 */
.xava-ui-button:disabled:not(.is-busy),
.xava-ui-button[aria-disabled="true"]:not(.is-busy) {
    border-color: var(--xava-ui-border);
    background: var(--xava-ui-surface-raised);
    color: var(--xava-ui-muted);
    box-shadow: none;
    filter: none;
}

.xava-ui-button-small {
    min-height: var(--xava-ui-control-sm);
    padding: .32rem .68rem;
    font-size: .76rem;
}

.xava-ui-button-large {
    min-height: var(--xava-ui-control-lg);
    padding: .68rem 1.05rem;
    font-size: .94rem;
}

.xava-ui-button-primary {
    --xava-ui-button-bg: var(--xava-ui-primary);
    --xava-ui-button-border: var(--xava-ui-primary);
    --xava-ui-button-color: var(--xava-ui-on-primary);
    --xava-ui-button-hover: color-mix(in srgb, var(--xava-ui-primary) 86%, var(--surux-hue-lift) 14%);
    box-shadow: 0 .32rem .9rem rgba(var(--xava-ui-primary-rgb), .18);
}

/*
 * Border at 78%, not 52%. At 52% the four tinted tones measured 2.16-2.66
 * against the light page - under the 3:1 a component boundary needs, and the
 * same fade the neutral tone had. 78% is the lowest step where all four clear
 * it (3.29-4.05 light, 4.98-7.74 dark); 70% left warning at 2.93.
 */
.xava-ui-button-info {
    --xava-ui-button-bg: color-mix(in srgb, var(--xava-ui-info) 13%, transparent);
    --xava-ui-button-border: color-mix(in srgb, var(--xava-ui-info) 78%, transparent);
    --xava-ui-button-color: color-mix(in srgb, var(--xava-ui-info) 76%, var(--surux-hue-lift) 24%);
    --xava-ui-button-hover: color-mix(in srgb, var(--xava-ui-info) 20%, transparent);
}

.xava-ui-button-success {
    --xava-ui-button-bg: color-mix(in srgb, var(--xava-ui-success) 13%, transparent);
    --xava-ui-button-border: color-mix(in srgb, var(--xava-ui-success) 78%, transparent);
    --xava-ui-button-color: color-mix(in srgb, var(--xava-ui-success) 76%, var(--surux-hue-lift) 24%);
    --xava-ui-button-hover: color-mix(in srgb, var(--xava-ui-success) 20%, transparent);
}

.xava-ui-button-warning {
    --xava-ui-button-bg: color-mix(in srgb, var(--xava-ui-warning) 13%, transparent);
    --xava-ui-button-border: color-mix(in srgb, var(--xava-ui-warning) 78%, transparent);
    --xava-ui-button-color: color-mix(in srgb, var(--xava-ui-warning) 78%, var(--surux-hue-lift) 22%);
    --xava-ui-button-hover: color-mix(in srgb, var(--xava-ui-warning) 20%, transparent);
}

.xava-ui-button-danger {
    --xava-ui-button-bg: color-mix(in srgb, var(--xava-ui-danger) 13%, transparent);
    --xava-ui-button-border: color-mix(in srgb, var(--xava-ui-danger) 78%, transparent);
    --xava-ui-button-color: color-mix(in srgb, var(--xava-ui-danger) 78%, var(--surux-hue-lift) 22%);
    --xava-ui-button-hover: color-mix(in srgb, var(--xava-ui-danger) 20%, transparent);
}

.xava-ui-button-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
}

.xava-ui-button-icon > svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.xava-ui-button-spinner {
    width: .92rem;
    height: .92rem;
    flex: 0 0 auto;
    border: 2px solid color-mix(in srgb, currentColor 34%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: xava-ui-spin .72s linear infinite;
}

@media (max-width: 560px) {
    .xava-ui-page-actions > .xava-ui-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xava-ui-button {
        transition: none;
    }

    .xava-ui-button-spinner {
        animation-duration: 1.5s;
    }
}

@media (forced-colors: active) {
    .xava-ui-button,
    .xava-ui-status-chip,
    .xava-ui-surface,
    .xava-ui-scope-control {
        forced-color-adjust: auto;
    }
}