// Shared native `<button>` chrome (host opt-in patch uses this without affecting `.btn` twice).
@mixin essentials-native-host-button-chrome-base() {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding-block: 0px;
    padding-inline: 0px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    color: var(--color-fg);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all var(--transition-fast);

    &:hover:not(:disabled) {
        background: var(--color-border);
    }

    &:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
}