.cx-action-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cx-space-2);
    /* Single row keeps the 44px bar; when groups wrap (narrow screens / many actions) the bar grows instead of letting buttons spill out. */
    height: auto;
    min-height: var(--cx-actionbar-height);
    margin-block-end: 0;
    padding: var(--cx-space-1) var(--cx-space-5);
    background: var(--cx-color-surface);
    border-block-end: 1px solid var(--cx-color-border);
}

.cx-action-bar--sticky {
    position: sticky;
    top: var(--cx-header-height);
    z-index: calc(var(--cx-z-header) - 1);
    margin-inline: 0;
    padding-inline: var(--cx-space-5);
    background: var(--cx-color-surface);
    border-block-end: 1px solid var(--cx-color-border);
    box-shadow: none;
}

.cx-action-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cx-space-2);
}

.cx-action-group--end {
    margin-inline-start: auto;
}

.cx-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--cx-radius-sm);
    font-family: var(--cx-font-family);
    font-size: var(--cx-font-size-sm);
    font-weight: var(--cx-font-weight-medium);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.cx-button-primary {
    color: var(--cx-color-text-inverse);
    background: linear-gradient(
        110deg,
        var(--cx-brand-start),
        var(--cx-brand-end)
    );
    border-color: transparent;
    box-shadow: var(--cx-shadow-sm);
}

.cx-button-primary:not(:disabled):not([aria-disabled="true"]):hover {
    color: var(--cx-color-text-inverse);
    background: linear-gradient(
        110deg,
        var(--cx-brand-start-hover),
        var(--cx-brand-end-hover)
    );
    border-color: transparent;
}

.cx-button-secondary {
    color: var(--cx-color-text);
    background: var(--cx-color-surface);
    border-color: var(--cx-color-input);
}

.cx-button-secondary:not(:disabled):not([aria-disabled="true"]):hover {
    color: var(--cx-color-text);
    background: var(--cx-color-surface-muted);
    border-color: var(--cx-color-border-strong);
}

.cx-button-danger {
    color: var(--cx-color-danger);
    background: var(--cx-color-surface);
    border-color: color-mix(in oklab, var(--cx-color-danger) 25%, transparent);
}

.cx-button-danger:not(:disabled):not([aria-disabled="true"]):hover {
    color: var(--cx-color-danger);
    background: var(--cx-color-danger-soft);
    border-color: color-mix(in oklab, var(--cx-color-danger) 35%, transparent);
}

.cx-button-ghost {
    color: var(--cx-color-text-muted);
    background: transparent;
    border-color: transparent;
}

.cx-button-ghost:not(:disabled):not([aria-disabled="true"]):hover {
    color: var(--cx-color-text);
    background: var(--cx-color-surface-muted);
}

.cx-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--cx-color-ring) 35%, transparent);
}

.cx-button-primary:focus-visible {
    box-shadow: var(--cx-shadow-sm), 0 0 0 2px color-mix(in oklab, var(--cx-color-ring) 35%, transparent);
}

.cx-button:disabled,
.cx-button[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

.cx-button-primary:disabled,
.cx-button-primary[aria-disabled="true"] {
    color: var(--cx-color-text-inverse);
    background: linear-gradient(
        110deg,
        var(--cx-brand-start-disabled),
        var(--cx-brand-end-disabled)
    );
    opacity: 0.65;
}

a.cx-button[aria-disabled="true"] {
    pointer-events: none;
}

@media (max-width: 48rem) {
    .cx-action-bar {
        align-items: stretch;
    }

    .cx-action-group {
        width: 100%;
    }

    .cx-action-group--end {
        margin-inline-start: 0;
    }
}